CSS Introduction

What you should already know?

Before you continue you should have a basic understanding of the following:

* HTML / XHTML

If you want to study these subjects first, find the tutorials on our Home page.

What is CSS?

* CSS stands for Cascading Style Sheets
* Styles define how to display HTML elements
* Styles are normally stored in Style Sheets
* Styles were added to HTML 4.0 to solve a problem
* External Style Sheets can save a lot of work
* External Style Sheets are stored in CSS files
* Multiple style definitions will cascade into one

CSS demo

An HTML document can be displayed with different styles: See how it works.

Multiple styles will cascade into one

Style sheets allow style information to be specified in many ways.

Styles can be specified:

* inside an HTML element
* inside the head section of an HTML page
* in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order - What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or in a browser (a default value).

If the link to the external style sheet is placed after the internal style sheet in HTML , the external style sheet will override the internal style sheet!