CSS Rules

CSS, Cascading Style Sheets is a mark-up language that was first proposed in 1994 by Håkon Wium Lie. The following Rules are the basis of how CSS works The primary purposes of a CSS, Cascading Style Sheet is to separate the web page styles from the page structure. Also see Css Media Types and Cascading Rules

The Selector

Css styles sheets are made up of sets of rules that can directly effect an html tag by using the html selector.

Css styles can effect a variety of different html tags by using the class selector.

Or
You can be specific and only effect a specific element on the page by using the id selector.

everything (for a specific property) can be changed by using the * asterisk selector

Selectors HTML tags

The selector in the css indicates what will be affected. Below the selector is h2. The styles would be placed between the curly braces

h2{

}

All html tags can be used as selectors with the exception of the

horizontal line <hr /> and the break <br />

The advantage of directly targeting an html tag is that you can set up thecss in advance and the styles will automaticly effect the page once you type in a particular tag.

Selectors class

Below the selector is a class. A class is indicated by using a period in front of the class name.

.name{

}

In the html code you can place a class into more than one tag

and different types of html tags

<span class="name">information</span>

<div class="name">information</div>

Selectors ID

Below the selector is an id. An id is indicated by using a #

in front of the id name.

#name{

}

An id can only be used once on a page.

<div id="name">information</div>

Selector Universal

The * asterisk selector changes everything for a particular property

* {

font-size: 12pxs;

}

If you were to use the example shown above all of the text

in your site would be 12px.

Naming a selector

When naming selectors choose a name that makes sense in relationship to its purpose.

Use all lower case with the underscore when needed

Declaration

declaration

The declaration contains the property and the value of the style and is placed between the curly braces.

Relationships

You can create selectors that target elements based on their ancestors, siblings attributes and more

CSS Tree

The img and h1 tags are the children of the div.

The div is the parent of img and h1 tags.

img and h1 tags are siblings.
The body tag is the ancestor of the img and h1 tags.

Decendents

Example one

div#content img
{border-width: 2px;
}

<div id="content"> all of the images within this div </div>

Example two

div#content a
{color: #fff;
}

<div id="content"> all of the links within this div</div>

Example three

div#content.red{
color: #f00;
}

<div id="content">all elements with the class "red" within this div</div>

Child Selectors

The following rule would effect the direct decendents of the body in this case paragraphs. It would not effect

paragraphs within div and tables because they would not be a direct decendent.

body>p{

color: #333;

}

We can also be very precise we could target a particular head tag in a div that was within a div

body > div > div > h2 {

color: red;

}

Ajacent Sibling

h1 + p {

color: #f00;

}

The rule would apply to all paragraphs that follow H2 that have the

same parent