CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners


This course was developed in 2002. The CSS all still works, but I've added Web Design Basics for iPad (same Dave, much better course!)

Our Hosting Partners:
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:



Cascading Style Sheets: an Interactive Tutorial

All About Selectors for Styles

Chapter 3 part 3 (of 3)
PSEUDO-ELEMENTS

There are two important pseudo-elements that are built into CSS capable web browsers. (There are also common pseudo-classes which you'll learn in the links chapter.)

These two elements are :first-letter and :first-line. Notice that pseudo-elements are defined with a : instead of a . or # (this is because they have special meanings to a web browser).

Here's a silly example for each: Imagine you want the first letter of each paragraph to be red, or the first-line of each paragraph to be green.

p:first-letter { color: red; }
p:first-line { color: green; }

This example is kind of
seasonal, eh?

You can also apply these pseudo-elements to only certain classes of p, for example, if you make a p called seasonal, you could use this style:

p.seasonal:first-letter { color: red; }
p.seasonal:first-line { color: green; }

<p>This paragraph is not<br> seasonal.</p>
<p class="seasonal">However, this paragraph<br> is quite seasonal.</p>

This paragraph is not
seasonal

However, this paragraph
is quite seasonal

Ready to test your skills? Try making a paragraph selector with a pseudo-element first-line that is purple. Then make an ID selector with yellow text.

Click here for an answer if you get stuck or you want to see how I did it.

Our Hosting Partners (Sponsored Ads):
  iPage Hosting $1.99/mo
  1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!


Copyright © Dave Kristula. All Rights reserved.