Introduction to CSS

CSS stands for Cascading Style Sheets. Styles define how to display HTML elements. Styles are normally stored in Style Sheets. External Style Sheets are stored in CSS files and can save you a lot of work.

CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. HTML is used to structure content. CSS is used for formatting structured content.

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the major browsers continued to add new HTML tags and attributes to the original HTML specification, it became more and more difficult to create websites where the content of HTML documents was clearly separated from the document's presentation layout. To solve this problem, the World Wide Web Consortium (W3C) created STYLES in addition to HTML 4.0.

CSS was a revolution in the world of web design. The benefits of CSS include:

  • CSS solve a common problem: separation of the presentation style of documents from the content of documents, make site maintenance a lot easier.
  • Pages download faster.
  • You have to type less code, and your pages are shorter and neater.
  • The look of your site is kept consistent throughout all the pages that work off the same stylesheet.

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your web, just by editing one single CSS document.

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. 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?

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 (inside the <head> tag)
  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 declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

Basic CSS Syntax

Assume you want a red color as the background of a webpage. Using HTML, you could have done it like this:

<body bgcolor="#ff0000">

With CSS the same result can be achieved like this:

body {background-color: #ff0000;}

Format

selector {property: value;}