StyleExample_CSS_01 | |||
This page describes a number of different CCS style treatments. The general link styles for this page - a:link, a:visited, a:active and a:hover. The specific link style semiartcle which permits the use of more than one link style set on the same page. And finally, the Gradient class and the Scrollbar redifined with CSS. | |||
a:link, a:visited, a:active and a:hover |
|||
a:link, a:visited, a:active { font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; color: #666666; letter-spacing: 1px; } a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; color: #990000; letter-spacing: 1px; } |
General styles for all links on the page. Example of the defalt a:link, a:visited, a:active a:hover on this page |
||
.semiartcle - specific link styles |
|||
.semiartcle{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; } .semiartcle a:link, { color: #990000; } .semiartcle a:link, { font-size: 12px; } .semiartcle a:link, { letter-spacing: normal; } .semiartcle a:visited {color: #990000;} .semiartcle a:visited {font-size: 12px;} .semiartcle a:visited {letter-spacing: normal; } .semiartcle a:active { color: #990000; } .semiartcle a:active {font-size: 12px;} .semiartcle a:active {letter-spacing: normal; } .semiartcle a:hover { color: #FF0000; } .semiartcle a:hover {font-size: 12px;} .semiartcle a:hover {letter-spacing: normal; } |
Specific styles for all links on the page defined with the semiartcle class. Example of a semiacticle class link All parameters that are not defined by semiarticle will
be defined by the a:link, a:visited, a:active, a:hover onthis page OR
any other style that defines the container - inheritance of properities. |
||
gradient and scrollbar |
|||
BODY{ scrollbar-arrow-color: #CC0033; scrollbar-3dlight-color: #CC0033; scrollbar-highlight-color: #EAEAEA; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #CC0033; scrollbar-track-color: #FFFFFF; } .gradient { filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#CCCCCC', startColorstr='#FFFFFF', gradientType='0'); } |
Self explanitory | ||