Cascading Style Sheet Examples

 
HTML page...                                CSS Colors
<head>
        <title>Style Sheet Example</title>
        <link type="text/css" rel="stylesheet" href="mystyles.css">
</head>

CSS page...                       more info styles
body { background: #ffffff; }
h1   { color: #1ed4f8;
       text-align: center;
       font-family: Helvetica, Arial, sans-serif;
       font-size: 48pt;
       font-weight: bold }
h2   { color: #ff6600 }
p    { text-indent: 2em }		<- indents first line in paragraph

-----------------------------------------
a link has four different states which are "pseudo-classes" and 
must be defined in the correct order: link, visited, hover, active
not all browsers (or versions) support all four of the states
-----------------------------------------
a:link    { color: #ff6600;
            font-size: 150%;
            text-decoration: none }	<- eliminates underline of links
a:visited { color: #ff6600;
            font-size: 150%;
            text-decoration: none }
a:hover   { color: #1ed4f8;		<- only in Explorer, like onmouseover
            font-size: 175%;            <- will increase the size of font onMouseOver
            text-decoration: bold 
            padding-left: 15px }        <- will jump over to the left onMouseOver
a:active  { color: #ffcc66;
            font-size: 150%;
            background: #000000 }
-----------------------------------------
body      { background: black }		<- 000000 = black
a:link    { color: #ffffff }		<- ffffff = white
a:visited { color: #ffffff }
a:hover   { color: #ffffff }
a:active  { color: #ffffff }
-----------------------------------------
body { background: #ffccff ;
       margin-left: 1in;
       margin-right: 1.5in;
       margin-top: 0.5in; }
h1   { color: #ff00cc;
       text-align: center;
       font-family: Helvetica, Arial, sans-serif;
       font-size: 48pt }
h2   { color: #cc00ff}
p    { text-indent: 2em }
ul b { color: #cc66ff }
ul i { color: #cc0066;
       font-size: 110% }
p b  { color: red }
p i  { color: #cc00cc;
       font-size: 110% }
a:link    { color: #ff0000;
            font-size: 125%;
            text-decoration: none }
a:hover   { color: #ffffff;
            font-size: 150%;
            text-decoration: bold }
a:active  { color: blue;
            background: #000000 }

You may use color names, hexadecimal colors values (as  above)
 or Red Green Blue values: rgb(255,100,100) or rgb(50%,20%,30%)
 		
absolute units measurement; px=pixels, in=inches, cm=centimeters, mm=millimeters, (avoid these: pt=point, pc=picas)
relative units measurement; em=height of captial letter "M" in the font, %=percentage of font size, (avoid this: ex=x-height size of lowercase letter x in the font)
More about css ,   cascading styles ,   W3C ,   Eric Meyer ,   Builder ,   w3schools ,   Tutorial ,   10 tricks ,   University of Html ,   css Zen Garden ,