Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Targeting Specific Letters in <h1> Tag?

    Hello,

    I'm trying to format an <h1> tag in such a way that it'll be able to target specific letters within the tag for independent styling while still being readable to search engines.

    For example, the <h1> tag on my website will function as the logo text and I want the letters to be in all caps. However, I want the first letters of each word slightly larger.

    Such as: WEBSITE TITLE

    To achieve the effect visually, I wrapped the two letters I wanted to target in spans and in the CSS, gave that font a larger size. This renders fine on the web page but I doubt search engines would pick up on the title this way. Example:

    Code:
    <h1><span id="logoCaps">w</span>ebsite <span id="logoCaps">t</span>itle</h1>
    What would be a better way to code this?

    Thanks for any advice you have to offer.

  • #2
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    simple add a span class to each letter like so...

    <h1><span class="big">W</span>website <span class="big">T</span>itle</h1>

    span.big { font-size: 40px; }



  • #3
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Or use the pseudo-class :first-letter to target the letter...



    h1:first-letter {font-size: 40px; }


    This way may be more browser friendly.

  • Users who have thanked Mr. for this post:

    BukToof (09-15-2011)

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ha, Success! It took a bit more tweaking to get the full effect I wanted but the h1:first-letter pseudo-class worked perfectly when containing each word in it's own <h1> tag.

    Thank you!
    Last edited by BukToof; 09-15-2011 at 07:11 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •