5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

First letter stylization?

by KubiK
4 replies
  • WEB DESIGN
    • |
Hi,

I am trying to do stylization of only the first letter of an article. I created a class in an external css file. Then I call this class in the html. What should I use to call? I try using <span> or <p>, ie:

<p>
<span class="firstLetter">F</span>irst letter here!
</p>

The first letter "F" does get all the styles specified, but there is a extra space between letter "F" and "i" which is not what I want. Any suggestion?
#letter #stylization
  • Profile picture of the author coffeeguy
    check your line spacing style.
    {{ DiscussionBoard.errors[8298361].message }}
    • Profile picture of the author Pixota
      If you have included 'padding' in your CSS class then this could result in the gap you are talking about - you'll need to make sure there is no right hand side padding
      {{ DiscussionBoard.errors[8298813].message }}
  • Profile picture of the author Istvan Horvath
    You don't really need a span for it... there is a pseudo-selector
    CSS :first-letter pseudo-element
    Signature

    {{ DiscussionBoard.errors[8298849].message }}
  • Profile picture of the author RobinInTexas
    You might check w3schools where you will find the correct way to do the what you want before going to a forum where you may get incorrect advice.
    Select and style the first letter of every <p> element:

    Code:
    p:first-letter
{ 
font-size:200%;
color:#8A2BE2;
}
    The :first-letter selector is used to add a style to the first letter of the specified selector.

    Note: The following properties can be used with :first-letter:
    • font properties
    • color properties
    • background properties
    • margin properties
    • padding properties
    • border properties
    • text-decoration
    • vertical-align (only if float is 'none')
    • text-transform
    • line-height
    • float
    • clear
    You could use the school example to apply to all <p> elements or create a <p> class to apply only to the <p>'s in the class.
    Signature

    Robin



    ...Even if you're on the right track, you'll get run over if you just set there.
    {{ DiscussionBoard.errors[8298850].message }}

Trending Topics