Cascading Style Sheets CSS Embedding
Embedding CSS
Embedded style tags perform the same tasks as inline style tags. However, coding for the embbeded style tags is placed in the head section of the page i.e. between the <head and </head> tags. It is possoble to specify the formatting and appearance of the whole page using this method i.e. links, fonts, text and more, just using embedded style tags.
Examples
This example displays active links in blue. The hover color (when the mouse is placed over the link) will be displayed in red and the underline will disappear.
- <style>
<!--
a:active { color: blue; text-decoration; }
a:hover { color:red; text-decoration: none; }
//-->
</style>
For example, you can create a class to format a paragraph. Just add .mystyle following the selector, in this case p is the selector and para is the class name so it becomes p.para.
- <style>
<!--
p.para {padding-left: 5px;
padding-right: 5px;
font-family: verdana;
font-size: 10px;}
//-->
</style>
To call it in your code use <p class="para">, you need to add this the each paragragh you which to apply this too. Notice that the class name is the same as that declared in the style statement.
Note the comment tags <!-- and //--> are there so that non CSS browsers ignore the code.
To specify a font family use this:
- p.red { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; etc.........}