CSS Basics

Posted on Thursday, October 2nd, 2008 at 12:57 pm in

What is CSS?

CSS stands for Cascading Style Sheets.

A style defines how an HTML element is displayed.

Style information can be stored:

  • In the header of a given HTML page (Internal Style)
  • Within a given tag (Inline style)
  • In a separate file which is then linked to the HTML page by a reference in the page header (External style)

Why use CSS?

A web page consists of two basic components – the Content (or information you wish to display) and the Style (the way if which you wish the content to be displayed).

CSS allows you to separate Content from Style. It’s even possible to have more than one style sheet – thus allowing you to have more than one way of displaying a page.

If all of the style information is retained within one external style sheet, it is possible to edit that one file and make sweeping changes (such as changing background and/or text colours) that affect hundreds of related web pages without having to touch a single HTML file

You can define a style for any HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all relevant elements on every page are affected automatically.

Multiple Styles Cascade Into One

Since you can specify CSS information in a number of ways, it is possible to utilise all three CSS methods as required. When you do utilise more than one CSS methodology (eg. using both external and inline style on the one web page), the multiple styles will cascade. This means that they will merge together to form a complete ‘virtual’ set of style instructions.

Generally speaking, styles using the following rules in descending priority:

  • Inline Style (inside HTML element)
  • Internal Style Sheet (inside the <head> tag)
  • External Style Sheet
  • Browser default style

So, an inline style declaration has the highest priority and will override any declared internal or external style for the same HTML element and any default style properties normally applied by the browser.

You might also be interested in

WordPress Support Services