HTML Cookbook Basic HTML Course

Alternate Version

Pseudo-elements

In CSS Lesson 4, we used pseudo-classes to set rules for the anchor tag. This lesson uses a similar concept, pseudo-elements, to set the appearance of the first letter or first line of a block of text. Pseudo-elements act like HTML elements (tags) even though they are straight CSS, thus... pseudo (fake) elements.

First-letter Pseudo-element

The first-letter pseudo-element allows you to style just the first letter of a paragragh.

Sample CSS Rule

First-line Pseudo-element

Just about any CSS property that we have learned can be used to style a pseudo-element and more than one property can be declared.

Where does the CSS go?

Pseudo-element rules are placed in your stylesheet, so they affect everything on a page (unless you make a class rule). For this reason, you may want to make a separate stylesheet just for the pages that you want to use these effects on. We'll discuss three ways to do this, keeping in mind that you can use more than one stylesheet for one page. We'll also show alternate stylings to simulate the pseudo-elements.

Internal stylesheet

If you prefer internal stylesheets, you can just add pseudo-element styling to your stylesheet - EZ.

External stylesheet plus internal pseudo-element

If you prefer to use external stylesheets, but just want to use pseudo-elements on a page or two, just add an internal stylesheet to the head of your page.

Example:
<link rel="stylesheet" href="style1.css" type="text/css" />
<style type="text/css">
<!--
p:first-line
{
color: #0000ff;
font-size: 32pt;
}
-->
</style>

This code would make the first line of all paragraphs blue and very large.

External stylesheet plus external pseudo-element

Finally you can use your main stylesheet for your basic look and add a second external stylesheet for pseudo-elements to some pages only.

Example:
<link rel="stylesheet" href="style1.css" type="text/css" />
<link rel="stylesheet" href="pseudo.css" type="text/css" />

First Letter Styling

Here are some sample pages using the first-letter pseudo-element. Sample stylesheets are at the bottom of each page.

Large red first letter  PC Screenshot
Large bold first letter  PC Screenshot
Large blue italic first letter  PC Screenshot

First Line Styling

Here are some sample pages using the first-line pseudo-element. Sample stylesheets are at the bottom of each page.

First line red text  PC Screenshot
First line in italics  PC Screenshot
First line large text  PC Screenshot

Both stylings can be used on the same page.

First line large text and red first letter
PC Screenshot

Pseudo-element Class Examples

We can make a class for a pseudo-element so the special styling will only show in the paragraghs that you choose.

Sample Stylesheet

Sample Codes

Browser Support

Pseudo-elements are supposed to work for both div and p, but support is limited to p in MSIE. WebTV does not support pseudo-elements at this time.

Alternate Stylings

Both pseudo-elements can be easily simulated with the styling that we have already learned by using span with a style statement or a class.

To simulate the first-letter pseudo-element, use

Sample Stylesheet


Sample Code

Appears as:

To simulate the p:first-line pseudo-element, you can style just the first line, then end the first line with <br />. like so:

The only challenge with this approach is to determine where to end the first line since different monitor widths will have different first line widths. Decide how long you want your first line to be, then add your <br />.

Sample Stylesheet

Sample Code

Appears as:

Assignment

Simulate first-letter styling on a page. Simulate first-line styling on a page. Post your page or pages (both simulations may be on the same page).

Happy coding!
Gnubee

Links

Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup