Lesson 16B - Pseudo-Elements, Pseudo-Classes and Cursor

Style commands are associated with specific HTML tags. There are subcategories of HTML tags called Pseudo-Elements that can also be given separate style commands. Here are the current ones:

P:first-letter Sets the style for the first letter of every paragraph. Allows for larger font size, or color, or font-family, or whatever than the rest of the paragraph. (try it)
P:first-line Sets the style for the first line of every paragraph. Regardless of where the viewer's browser causes the line break, the entire first line is styled as directed here. (try it)

If you typed:

 . . . 
<style type="text/css">
<!--
P:first-letter { font-size:2.5em; font-weight:bold; float:left; 
    margin:0 5px 0 0; background-color:#C9D5EB; border:thin solid black; 
    padding:5px; }
P:first-line   { text-transform:uppercase }
-->
</style>
 . . . 

It would appear like so:

This paragraph has a lot of nonsensical words just to fill space. Pecr pholatiem ti funohes losnant. Smot est. Morh enosc ovascriem niv plimutranis al pehelonis. Drom tucron im pridibi ipurhant. Giquadius, epamiem at sepum urastanis. Dascr imohes crodiquider, nep lerh hepiem lotorotis. Acrasnum itu ege holiplit at stuhudron est. Apoquidue boscho, quideps adraspiem ica finop egolant. Schedacon, trobapreus en gefacri ifimo. Quaden petuspa, drit scrogacue dro crofegon baras.

Cut and paste the above Style rules into your sample.css file and cut and paste the above paragraph into your sample2.htm file.

In addition to Pseudo-Elements, there are also Pseudo-Classes.

A:link Sets the style for anchors and links that have not yet been clicked.
A:hover Sets the style for anchors and links that the cursor is over.
A:active Sets the style for anchors and links that the viewer has just clicked.
A:visited Sets the style for anchors and links that have already been clicked.
(try it)

If you typed:

. . .
<style type="text/css">
<!--
A:link { color:blue; }
A:hover { background-color:yellow; color:navy; text-decoration:none }
A:active { background-color:yellow; color:yellow; text-decoration:none }
A:visited { color:#303030; }

-->
</style>
. . .

All links that are not yet clicked will appear blue and underlined. (Most browsers will automatically underline all links unless you specify otherwise). If the viewer's cursor is hovering over a link, it will have a background color of yellow, font color of navy, and will not be underlined. The active links will be the same, only with a font of yellow. All visited links will be dark gray and underlined. (These are the style commands used on these web pages.)

If you typed:

. . .

<style type="text/css">
<!--
A:link { color:blue; }
A:hover { background-color:yellow; color:navy; text-decoration:none }
A:active { background-color:yellow; color:yellow; text-decoration:none }
A:visited { color:#303030; }
Div.rev { background-color:navy; color:white }
Div.rev A:link { color:yellow }

-->
</style>

. . .

All links in normal space would be blue and underlined, but all links between <div class="rev"></div> tags would be yellow and underlined. (try it)

Do the following:
  1. Add a Stylesheet link to sample.css on sample2.htm.
  2. Copy the Style rules for all the classes you made from sample2.htm to sample.css.
  3. Delete the Style tags and remaining Style rules in your sample2.htm file.
  4. Add the Style rules from the above box to your sample.css file.
  5. Go into your sample2.htm file again, and change one of your <p class="wn"> ... </p> paragraphs to a <div class="rev"> ... </div>.
  6. Within that Div, add a link.
  7. View the changes in sample2.htm. Play with it.

With Style, you can also change the cursor to whatever you like. (try it)


In this lesson, we learned about these Style properties:
P:first-letter
P:first-line
A:link
A:hover
A:active
A:visited
cursor:
By now, your sample2.htm file should look like this and your sample.css file should have this code.

Lesson 16A CSS/Page Breaks   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 17 Images

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 4,011 different visits in the last 30 days.
435,577 hits on this domain since 24 Nov 2006.
http://www.sandersongs.com/HTMLcourse/Lesson16B.php
This page was last modified on our server on 6 Oct 2013
and last refreshed on our server at 3:57 am, MST
This file took 0.01372 seconds to process.