CSS » Introduction

What is CSS?

Styles sheets define how HTML elements are to be displayed, just like the font tag and the color attribute in HTML. Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

Why CSS?

You might want to have different font and font sizes on your web page. Let's say you want a heading. One way of doing that is to write: <font color="red">My heading</font>
where you want headings. This might be ten different places in your text. Then, lets say, you change your layout, so you don't want the headings to be red anymore. What you have to do then, is to change "red" to "green" (or what ever color) ten places. A easier way of maintaining layouts is using CSS. You would then use <h1>My heading</h1> in the text, and you would define how you would h1 to look like in a style sheet. This can be either external (a whole document with only CSS in, which you make a link to in between the HTML) or internal (you write the CSS in the HTML site). The CSS would say h1 {font-color: red}, and it tells all the ten h1's to be red. When you update the layout, you change red to green only one place, so it's much simpler to maintain .You can define almost anything in the CSS, like text size, text color, image styles (borders and margins and such), text areas, buttons, link colors and so on.

The two biggest browsers, Netscape and Internet Explorer, added more and more HTML tags and attributes (<font> and color attribute for example), so it became more and more difficult to create web pages where it was possible to separate the style from the content.

All major browsers support cascading style sheets.

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value;}

The selector is normally the HTML element/tag you want to define, the property is the attribute you want to change, and each property can have a value. The property and value are separated by a colon, and surrounded by curly brackets:

h1 {color: red}

A browser normally ignores unknown tags.

External or internal CSS?

On any real life web page, external css is a must. But as horseland has blocked external css for security reasons, you have to use internal css.