Link to good site: http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3
Web reference site: http://www.webreference.com/authoring/style/sheets/
Style rules are formed as follows:
selector { property: value }
Multiple style declarations for a single selector may be separated by a semicolon:
selector { property1: value1; property2: value2 }
As an example, the following code segment defines the color and font-size properties
for
H1 and H2 elements:
<head>
<title>CSS Example</title>
<style type="text/css">
h1 { font-size: x-large; color: red }
h2 { font-size: large; color: blue }
</style>
</head>
Another example:
A style sheet may be embedded in a document with the STYLE element:
<style type="text/css" media=screen>
<!--
body { background: url(foo.gif) red; color: black }
p em { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</style>
Linking to an External Style Sheet
An external style sheet may be linked to an HTML document through HTML's LINK element:
<link rel =styleSheet href="style.css" type="text/css" MEDIA=screen>
The <LINK> tag is placed in the document HEAD. The optional TYPE attribute
is used to specify a media type--text/css for a Cascading Style Sheet--allowing
browsers to ignore style sheet types that they do not support. Configuring the
server to send text/css as the Content-type for CSS files is also a good idea.
External style sheets should not contain any HTML tags like <HEAD> or
<STYLE>. The style sheet should consist merely of style rules or statements.
A file consisting solely of
P { margin: 2em }
http://www.w3.org/TR/REC-CSS1
Sample style sheet:
p, td {font-size: 10pt;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #00006e;}
.text {font-size: 10pt;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #00006e;}
h3 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13pt;
color: #00006e;}
a {text-decoration: underline;}
a.anchor {text-decoration: none;}
a.noline {text-decoration: none;}
a.tocsmall {text-decoration: none;
font-size: 9pt;}
a.tocsmall:hover {color:#93beee;}
a.toc {text-decoration: none;
font-size: 11pt;
font-weight: bold;}
a.toc:hover {color:#93beee;}
a.nav:visited {text-decoration: none;
color:dimgray}
a.nav:hover {color:white;}
a.nav:link {text-decoration: none;
color: #00006e;}
h2 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: dimgray;}
li.vertspace {list-style-image : url(images/vertspacer.gif);}
.title
{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #00006e;}