Home arrow Style Sheets arrow Page 3 - Learn CSS, part 7: Pseudo Elements

Learn CSS, part 7: Pseudo Elements

We have discussed CSS selectors in the last three articles in this sereis. We have said that a selector can be a markup element, an attribute selector based on the class and ID attributes, or a structured selector based on the document structure. CSS introduces pseudo elements, which we will be discussing in this article. This is one area of functionality that you can't achieve using HTML, and you will be amazed how easily you can achieve it in CSS.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 28
June 27, 2005
  1. · Learn CSS, part 7: Pseudo Elements
  2. · Using the ::first-line Pseudo Element
  3. · Using the ::first-letter Pseudo Element
  4. · Using the ::selection Pseudo Element
  5. · The Content Property
  6. · The ::before and ::after Pseudo Elements

print this article

Learn CSS, part 7: Pseudo Elements - Using the ::first-letter Pseudo Element
(Page 3 of 6 )

The ::first-letter pseudo element applies your styling rules to the first letter of the first word of the first line in block level elements. A block level element is that element that occupies its parent element's complete area (we will talk about this later in the series). I think that by now you understand what it does, so let's take a look at an example. Add the following CSS code to the CSS file:

  background-color: blue; 
  color: yellow;
  font-size: 2em;
  font-family: Tahoma;

This code will style the first letter of the first word of the first line in all the block level elements to have a blue background with yellow text as Tahoma 2 em. Reload the Web page to see the effect.

Okay, I know that some of you now may be saying "How does the ::first-letter override the styling rules of the ::first-line?" and some others would say "How do some selectors override the styles of other selectors?" I will answer these questions in the article covering inheritance and cascade, which is coming soon in the series. As you can see, only the block level elements (the <p> and <div> elements) have been styled. The <span> element has not been styled because it's an inline element.

With the ::first-letter pseudo element you can use color properties, background properties, padding properties, margin properties, border properties, clear, line-height, text-shadow, text-decoration, text-transform and float. These are discussed in the appropriate articles in the series. This pseudo element is supported in IE 5.5, 6 and Mozilla 1.7 and Opera 7.5

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials