Code needed to add styles to your document

<style type="text/css">

 

</style>
needed to render styles in your html file. Place within <head> section of your html

 
add color and/or images to the background of your document

body {

}
rule for changing the overall look of your web page, including backgrounds. All tags are "descendants" of the body tag, so most of the visual choices added in this rule(type, color) will be inherited by other tags throughout your page.

background-color: color;
background-image: url(imagename.gif);

sample attributes to include in the body style

body {
background-color: green;
}

sample of style producing a green web page background

 
changing style of HTML tags

H1 {

}

other tags you can change default style:
H2, H3, H4, H5, H6, P, HR, UL, LI, DIV

H1 {
font-size: 20px;
font-family:
verdana, helvetica, sans-serif;
color: #336699;

}

sample of style changing every H1 tag on your site

color: #336699;
font-size: 29px;
font-weight: bold;
(lighter is another attribute for weight)
font-style: italic;
font-family: Arial, Helvetica, sans-serif;

optional properties for text styling

background-color: #336699;
background-image: url(filename.gif);
border: solid #339900 2px;
(type color thickness- no commas between)
margin: 10px;
(space around an object)
padding: 10px; (space around an object)

optional properties for divs and block level items

 
classes to change specific items

.highlight {

}
a class is a rule that can be used multiple times in your document. It can be applied to any almost any kind of tag. The rule name MUST start with a period.

color: #336699;
font-size: 29px;
font-weight: bold;
(lighter is another attribute for weight)
font-style: italic;
font-family: Arial, Helvetica, sans-serif;

optional properties for text

<p class="highlight">entire paragraph gets a style</span>
<div class="highlight">
entire div section gets a style</span>
<span class="highlight">a word or small portion of a par or div gets styled</span>
examples of ways to add a class rule

 
how to style link colors
a:link {
color: #336699;
text-decoration: none;
(optional, but use if you do not want a link underlined)
}
this will effect ALL links in your html file automatically with no additional code in the body section

a:visited {
color: #669900;
}

changes color of your link after user has viewed the link, and returned back to your page

a:hover {
color: #663333;
}

changes color of your link while user is "moused over" it. Commonly called a rollover.
 
IDs- style rules for div tags

#doggie {

}
An id is a style that can be used only once in your document.
The name MUST start with a #.
An ID should only be added to a <DIV> tag

position: absolute;
height: 200px;
width: 200;
left: 50px;
top: 40;

properties needed for positioning with an ID style (all pixels given are for example only)


background-color: #993300;
border: solid #339900 2px;
(type color thickness- no commas between)
padding: 10px;
(space between edges of container and text inside)
margin-left: 50px;
margin-top: 40px;

optional properties for the ID style

<div id="doggie">all the text and images inside your container </div>
how to add the ID style to your div tag
Reference   CSS Cheatsheet