Need help? Check out our Support site, then


Changing letter (not full word) color and size using CSS - Esquire theme

  1. robbiefitzwater
    Member

    Hi,

    I am new to CSS, but purchased the upgrade on wordpress for my website. I was wondering it was possible to:

    1) Change the color of one letter in my header using CSS. That is, I want the entire word black, but one letter in the word to be orange.

    2) Make the first letter of each word in my subtitle to be bolded using CSS.

    Thank you for your help,

    Robbie

    The blog I need help with is fishbowlism.com.

  2. 1) Change the color of one letter in my header using CSS. That is, I want the entire word black, but one letter in the word to be orange.

    There isn't a way to change the color of just one letter in a heading using CSS only. I would recommend using an image instead. Once you make the image, I can help you with image replacement CSS if you need help with that.

    2) Make the first letter of each word in my subtitle to be bolded using CSS.

    CSS can do that! Use this:

    text-transform: capitalize;

    You'll need the subtitles to have a specific HTML element or class to attach to—such as h3 or h4. Or you can add the CSS inline, but I wouldn't recommend that.

    Here is an example of HTML from your current home page:

    <p><strong><span style="color:#0000ff;">Why social media and digital marketing?</span></strong></p>

    You should edit that and change it to:

    <h3>Why social media and digital marketing?</h3>

    Then add this to your Appearance → Custom Design → CSS editor:

    .content h3 {
    	font-size: 1.8em;
    	font-weight: bold;
    	color: #0000ff;
    	text-transform: capitalize;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic