id

An id in CSS is unique, and can only be used once on a page/document.

Analogy
id = (ID) is unique to one person. eg. A person's Identification
class = There are many people in a group. eg people in a classroom.
id's must be written as a single word, cannot start with a number and must be enclosed in quote marks...

eg id = "banner"

id's are named between <body><body> on a web page

eg
<div id="banner"> </div>

eg ) id="easytorememberdescription" (the decriptions commonly used are header, banner, body, container, navigation, leftcolumn, rightcolumn, footer, sidebar... )
id helps you keep track of all your div elements or layers. Makes it easy to have different style attributes and positions for each <div></div> or html element. You can also overlap <div></div> layers ... so it helps to know what <div></div> element might be getting in the way.

class

The name you give for class must be written as a single word, cannot start with a number and must be enclosed in quotes
class ="redheadings"
Generally, class can be any HTML element, like h1 (headings), p, pre, ul, img, or even div's

A class is named between <body> and </body> on a web page

How to write CSS

selector {property: value;}

Where:

The selector is:: *, Universal, applies to all elements; Any element; A class; An ID
A Declaration: ...is made up of a property name and a value; ....is delimited (contained) inside the curly brace { }(brackets)
property name: are CSS identifiers; Include things like height, color, font-family, etc...; ...is always followed by a colon
Value: includes: none, inherit, %, auto, url...; Units include: ex, em, in, cm, mm, pt, pc, %, auto, and px (pixels); ...is always followed by a semi-colon

To select the styling for an ID, use the "#" symbol plus name

  #banner { width: 960px;
            height: 100px;
            background-color:silver;
          }

To select the styling for a class, use the "." (dot) symbol plus the class name

.redheadings {color: red;}

To select an html element just write the element

p {font-size: Arial; }

The External Style Sheet

An external style sheet is a text file that must have the extension .css

eg) "mystylesheet.css"

The HTML page using the style sheet must link to the style sheet with a link written

between <head>and </head>

The Embedded Style Sheet

CSS can also be embedded on the same page as the html
The styles must be between <head> and </head>
and between
<style type= "txt/css" >
</style>

In-line styles

CSS can also be written "in-line" in between the <body> and </body>

CSS Priority ---The Order of Interpretation

#1 Priority is the Browser's default value...
#2 The External Style sheet
#3 The embedded Style Sheet
#4 The in-line styles

A few more rules

Grouping

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

    h1,h2,h3,h4,h5,h6 { 
                       color:green
                       }

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/
    p {
        text-align:center;
/*This is another comment*/
        color:black;
        font-family:arial
      }

Pseudo-Class

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

Must be written in the above order to work correctly...

Descendant Selectors

Allow you to target a specific element and not affect similar elements used elsewhere on the page

#subject h1 {color: red;}
all h1's in the div with ID "subject" are colored red
other h1's on the page, not in the div "subject" are not affected

Daisy chaining descendants

#subject p em {color: blue;}

#leftcol .navigation li {color: red:}

Practice, practice, practice

Basic CSS Rules

CSS Styles Web Page Content, the HTML

id