Introduction to CSS (Cascading Style Sheets)

-

A Cascading Style Sheet is a set of rules that specify how a HTML document should be presented.

Cascading Style Sheets are used to format HTML. You should have at least a basic understanding of HTML before starting to learn CSS.

There are three types of style sheet: external, internal, and inline. Cascading Style Sheets get their name from the hierarchy assigned to them. The inline style sheet has the highest priority when formatting the HTML, followed by the internal style sheet, and finally the external style sheet. This means that if there are conflicting values in an inline style sheet and an external style sheet for example, only the style defined within the inline style sheet will be applied (the rest of the external style sheet will be applied as normal however).

The only major difference between style sheets is their location in relation to the document. Inline style sheets are contained within the specific element's tags, and will be only be applied to that element. Internal style sheets are included between the head tags of the document, and will only be applied to the elements within that specific document. External style sheets are separate .css documents that are applied to elements in pages that they are linked to. This makes them very useful for applying the same style to different documents. The link to the external style sheet is included in the head tags.

The CSS structure is comprised of 3 components: the selector, the property and the value. The selector defines which HTML element is being formatted. The property defines what aspect of the HTML element needs to be changed. The value specifies how the aspect will be changed.

The selector is defined first, followed by the property and the value contained between curly braces and separated by a colon, like so: Selector{property:value}

For example, if we wanted to define a 2 pixel border for all the tables in a document:
Table{border-width:2px}

Note: the word "attribute" is often used instead of "property".

The structure is slightly different for inline style sheets, as they are specific to the element in which they are contained; there is no need for the selector or the curly braces. If we wanted to define a 2 pixel border for one specific table, the tag would look like this



(An apostrophe has been included after the starting tag to avoid being recognized as HTML).

Once you know the structure of CSS, all you need to know is the different selectors, properties and values. You define your own selectors using classes and IDs. An ID is unique and can only be used once in a document, whereas you can classify any number of elements in a document using classes. Remember not to start the name of your ID or class by a number as this not supported by some browsers. There is also a 'wildcard' selector: the asterisk *.

If you are interested in learning more about CSS, there are many good resources online.