iPage Hosting
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $4.95/mo
Globat $4.44/mo
Free Domain Name
If you Order Today!
Our CSS Style topics:
CSS Code Tutorial Chapters:
- Introduction
- Basics of CSS
- All About Selectors
- Background and Color
- Fonts and Text
- Links
- Lists
- Margin
- Padding
- Border
- Good CSS Design
- Resources
visit our other tutorials:
web design tutorial
html code tutorial
All About Selectors for Styles
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).
Dave has a
New Course for your iPad!Download HTML and CSS Web Design Basics Right Now! Or Search for "Web Design Basics" in AppStore!
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.
| < Ch. 3 part 2 | > continue to Chapter 4 |
iPage Hosting
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $6.95/mo
Globat $4.44/mo
Free Domain Name If you Order Today!