For the most part, styles refer to classes or elements on your web pages. Unlike regular styles and elements, pseudo-classes and pseudo-elements are used to differentiate additional states, taking the process one step further.
If you want to customize the first letter or first line of a paragraph's style, you can do it using a pseudo-element style. As for pseudo-classes, think links. You write styles for links; to distinguish between link states, you can use pseudo-classes.
Paragraphs are identified on your pages using the <p> tag. You can add as many different styles of paragraphs to a page as you like (or can keep track of!), but the style is applied to the entire paragraph. To change the content of some of the paragraph, you can build span styles, but that isn't as neat as a pseudo-element. One difference between using spans and pseudo-elements is that a pseudo-element applies only to the first letter or first line of a paragraph. If you want to differentiate the first word, for example, use a <span> tag and a style.
Pseudo-elements can be used with any block-level element, such as paragraphs and headings. You can see the first letter of this paragraph has a special style (as does the remainder of the text). I wrote styles for both the first letter and the rest of the paragraph. If you check the source code for this page, you see the style .letter is assigned to the <p> tag for this paragraph. The styles are written like this:
p.letter {
font-weight: bold;
}p.letter:first-letter {
font-family : Verdana, Arial, sans-serif;
font-size : 32px;
font-style: oblique;
font-weight: bold;
color : #663366;
background-color: #f8ebeb;
padding: 6px;
}
The first-line pseudo-element is used to modify the appearance of the first line of a paragraph or other block element. Again I wrote styles for both the paragraph as well as the first line pseudo-element:
p.line{
font-size : 14px;
line-height: 21px;
background-color: #f8ebeb;
}p.line:first-line {
font-family : Verdana, Arial, sans-serif;
font-style: italic;
color : #663366;
}
I wrote this page using an internal style sheet, that is, the styles are included within the <head> tags of this page rather than building and referencing a separate stylesheet.
The anchor tag used for links is an example of a pseudo-class. Your browser has four built-in anchor tag styles. The <a> tag is the tag that you write in your page of code. The browser interprets the tag according to activity. A new <a> tag is underlined in blue. When you move the mouse over the tag, it turns red. After the tag content has been clicked once, the tag content turns maroon. This page has one link and uses these styles:
a:link {
color: #660066;
background-color: #cccccc;
text-decoration: none;
}
a:visited {
color: #663366;
background-color: #f8ebeb;
text-decoration: none;
}
a:hover {
color: #ffffcc;
background-color: #cc6699;
}
The four main anchor pseudo-class tags are:
Note: There is also one more pseudo-class, called a:focus, which applies to form fields.
When you write styles for anchor pseudo-classes, you must write the style in a particular sequence. The a:link and a:visited definitions are first, followed by the a:hover style, and finally the a:active style. Writing anchor pseudo-classes affects only the style sheet; the HTML markup of the page does not change.
| copyright © 2004, D.L.Baker | e-mail:db@donnabaker.ca |