Web @ Kiowok

Cascading Style Sheets (CSS)

Overview

A style is a rule (the rule affects the appearance of a web page element).

A style sheet is a set of styles.

You can have styles in three places:

inside a given tag (in-line)
in a sheet at the top of given web page (embedded or internal)
in a sheet in an external file, and that file is referenced by potentially several web pages (external or linked style sheet)

You can layer, or cascade, the styles. For example a given tag might have its appearance affected by both an in-line style, an embedded style, and an external style sheet (the appearance will be a combination of all of those styles). If there is a conflict in the requested styles, then the style defined closest to the tag takes precedence.

The Structure of an In-Line Style

Example:

The parts of this style statement are:

selector - identifies the page element that is going to be affected (here it is hr)
declaration - identifies how the element's appearance should be changed (here it is "height: 5px; color: #00FF00")

The declaration has:

a property (or style), such as height
a value, such as 5px

The Structure of an Embedded Style

Define a style sheet at the top of the web page:

<style>

<!--

hr { height: 5px; color: #00FF00 }

-->

</style>

Above, hr is the selector and { height: 5px; color: #00FF00 } is the declaration.

An External Style Sheet

An external style sheet is a file (filename ending in .css, such as pets.css) that contains a list of styles, such as:

hr { height: 5px; color: #00FF00 }

p { text-align: center; color: red }

Each web page that wants to have access to those styles puts a link to the .css file in its head section:

There are SO MANY Properties!??!*#!

How can we find a list of all of the properties?

Once place is at w3schools: http://www.w3schools.com/cssref/