SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile How to style individual letters

    Hi, Can anyone let me know if it is possible to style individual letters. So for example in the word 'welcome' the W would be big and curly?

    Many thanks,

    Slooshy

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,811
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Wrap the letter(s) to be styled inside a span tag with an appropriate class.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The :first-letter pseudo element in CSS is fairly widely supported today, so you use it to pick that letter out, if you like.

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Well if W is the first letter of a paragraph you can do:
    HTML Code:
    <p class="first">Welcome to my site here is some text to tell you what it is about.</p>
    Code:
    p.first:first-letter {
      font-family:Georgia, Serif;
      font-size:1.1em;
      font-weight:bold;
    }
    http://reference.sitepoint.com/css/p...nt-firstletter

    If however it is just a random word in a paragraph than you could do:
    HTML Code:
    <p>Here is some text to tell you what my site is about, <span class="first">W</span>elcome</p>
    Code:
    .first{
      font-family:Georgia, Serif;
      font-size:1.1em;
      font-weight:bold;
    }
    Hope it helps.

  5. #5
    WordPress Freelancer banago's Avatar
    Join Date
    Dec 2006
    Location
    Vlorė, Albania
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Wrap the letter(s) to be styled inside a span tag with an appropriate class.
    I would recommend span too.
    WPlancer.Com - PHP & WordPress Developer
    ProverbHunter - English Proverbs Explained

  6. #6
    SitePoint Enthusiast trishacupra's Avatar
    Join Date
    May 2008
    Location
    Australia
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This tutorial could help - How to use initial caps
    Trisha Cupra, Web Design Watchdog
    Protecting website owners from the most painful online mistakes

  7. #7
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would go with span tags.


Bookmarks

Posting Permissions

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