Cascading Style Sheet (css) 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, a:focus, a:active <- hover for mouseover, focus for keyboard only, active for IE6 & 7
{ color: #1ed4f8;
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, a:focus, a:active { 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, a:focus, a:active
{ 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 ,
Return to Top of Page
