CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over their design and content layout. Using CSS allows a designer to create a standard set of commands (either embedded inside the web page or from an external page) that controls the style of all following pages.

CSS RULES Cascading Style Sheets are a set of rules that govern the display of the document through a web browser. The rules simply are lines of command codes that tell the browser how to display the information. It is crucial with CSS to get the syntax of the command lines correct to keep any frustrating errors from popping up.

What does a rule look like?

SELECTOR The SELECTOR selects (determines) which HTML element you’re working with. HTML elements are common tags like,,. Often the selector is referred to as an element selector or a type selector.

DECLARATION The DECLARATION tells the browser what to do with the Selected element. It consists of two parts: I.PROPERTY II.VALUE

PROPERTY and VALUE The PROPERTY, which identifies which attribute like font type, size and color, for example, is called into play. The VALUE, determines how the attribute works, in other words it causes the action that changes the font type, size and color to what the property asks for. A declaration is always signaled by a { bracket and is ended with a closing }. A property is separated by a : and a ; ends each declaration.

An example of a Declaration

Types of Style-Sheets CSS allows you to control the document’s appearance through a compartmentalized section of declarations that format the page, or site, to your eyeglasses. There are (3) different types of stylesheets:

1. External Style-Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:

2. Embedded Style-sheet An Embedded Style-sheet resides in between the tags. The declarations are positioned between tags. Embedded stylesheets are only connected to the page, and can not be used by another file like External Stylesheets can.

An Example Example body {background-color: #FF0000;} This is a red page

3. Inline Style-sheet An inline style lives in the tag area of the code being effected. For example if you want to control the font, font size and color of an tag then it would look like this: < font style="font-face: Arial; font-size:22px; color:red; text-decoration:underline; ">

An Example Example This is a red page

CLASS STYLES Class styles enable you to set-up an independent style that can be applied to any HTML tag. A class is given unique name which can be added to any tags with the style attribute. When assigning a class style you have to define in the CSS as: HTMLselector.class {property: value;} Example:.headerfont {font-size: 15px; font-family: Arial; color: red; } Then in the HTML body you would put: This is The Header The Result of the Class Style: This is the header.

CLASS STYLES Notice how there is a period (. ) in front of the selector. This signals that we are dealing with a class style. Then in the you’ll notice there is no period. Class name may not contains spaces or underscores and they must always begin with a letter, even though they can include numbers in the class name.