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. |
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:- Add a Stylesheet link to sample.css on sample2.htm.
- Copy the Style rules for all the classes you made from sample2.htm to sample.css.
- Delete the Style tags and remaining Style rules in your sample2.htm file.
- Add the Style rules from the above box to your sample.css file.
- Go into your sample2.htm file again, and change one of your <p class="wn"> ... </p> paragraphs to a <div class="rev"> ... </div>.
- Within that Div, add a link.
- 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:
