CSS+-+The+Beginning


 * How CSS Works **

CSS overrides the browser's default settings for interpreting how tags should be displayed, letting you use any HTML element indicated by an opening and closing tag (including the tag) to apply style attributes defined either locally or in a stylesheet.

Stylesheets contain rules, composed of selectors and declarations that define how styles will be applied. The selector (a redefined HTML element, class name, or ID name) is the link between the HTML document and the style.

There are two different kinds of selectors: types (HTML element tags) and attributes (such as class and ID names).

The first way to add a style to you page is to simply declare it inside an HTML tag. The way to do this is to add the style=" " attribute to an html tag. The general form to add one style property looks like this:

style="property:value"

To help clarify this, let's look at an example. If you want the color of some text to look red, the style attribute would look like this: style="color:red"

The style sheet property is "color". The value of the color is "red". Notice there is a colon in between color and red, not an equal sign, and there are no extra quote marks.

Now, you just insert this into an HTML tag, such as the  tag. DIV is just a division on a page. Remember to close the tag when you are through or you will have more red text than you bargained for! Here is the sample code: Wow, I am totally red! This will give you the following: <span style="background-color: #ffffff; color: red; display: block; font-family: Arial,sans-serif;">Wow, I am totally red! <span style="background-color: #ffffff; font-family: Arial,sans-serif;">You can also apply more than one property in the style attribute. Place a semicolon after your first property and value, and add another. So if we want the text to be red and to be italic, we would do the following: <span style="background-color: #ffffff; font-family: Arial,sans-serif;">I'm some red-hot italic text!</DIV> <span style="background-color: #ffffff; font-family: Arial,sans-serif;">Now we will have text that is both red and italic: <span style="background-color: #ffffff; color: red; display: block; font-family: Arial,sans-serif;">I'm some red-hot italic text! <span style="background-color: #ffffff; font-family: Arial,sans-serif;">In this way, you can add any number of properties to the section of text. Just separate them with semicolons: <span style="background-color: #ffffff; font-family: Arial,sans-serif;">

<span style="background-color: #ffffff; font-family: Arial,sans-serif;">Now I'm also bold and have an Arial font!

<span style="background-color: #ffffff; font-family: Arial,sans-serif;"></DIV> <span style="background-color: #ffffff; font-family: Arial,sans-serif;">Now you would get this: Now I'm also bold and have an Arial font!