for web designers
Red, Green and Blue

CSS Rules

more related media: books | page as flash

CSS Separates Style from Structure


CSS, Cascading Style Sheets, is a style sheet 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. 

The Selector

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

Or

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.

Or

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







share / bookmark



Send the link for this page to yourself




books

Smashing CSS Smashing CSS
Professional Techniques for Modern Layout
At Amazon
CSS3 for Web Designers
CSS3 for Web Designers
At A List Apart
Transcending CSS Transending CSS
At Amazon
Learn How to Implement Really Original Designs
The Zen of CSS Design The Zen of CSS design
At Amazon
Showcases and demonstrates the mechanics of 36 sites from the website: CSS Zen Garden


join follow up up