HOME

CSS Basic
CSS HOME
CSS Introduction
CSS Syntax
CSS How To
CSS Background
CSS Text
CSS Font
CSS Border
CSS Margin
CSS Padding
CSS List

CSS Advanced
CSS Dimension
CSS Classification
CSS Positioning
CSS Pseudo-class
CSS Pseudo-element
CSS Media Types

Examples/Quiz
CSS Examples
CSS Quiz Test

References
CSS2 Reference
CSS2 Print
CSS2 Aural
CSS Units
CSS Colors
CSS Colorvalues
CSS Colornames

Please visit our sponsors !

Introduction to CSS

Previous Next

What You Should Already Know

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

  • WWW, HTML and the basics of building Web pages

If you want to study these subjects first, before you start reading about CSS, you can find the tutorials you need at W3Schools' 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 you a lot of work
  • External Style Sheets are stored in CSS files
  • Multiple style definitions will cascade into one

CSS Demo

With CSS, your HTML documents can be displayed using different output styles:

See how it works

Styles Solve a Common Problem

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 two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites 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) - the non profit, standard setting consortium responsible for standardizing HTML - created STYLES in addition to HTML 4.0.  

Both Netscape 4.0 and Internet Explorer 4.0 support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work

Styles in HTML 4.0 define how HTML elements are displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in files external to your HTML documents. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing a single CSS document. If you have ever tried to change the font or color of all the headings in all your Web pages, you will understand how CSS can save you a lot of work.

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

Multiple Styles Will Cascade Into One

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?
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 (inside the <head> tag)
  4. Inline Style (inside HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).

Previous Next

Jump to: Top of Page or HOME or Printer Friendly Printer friendly page

Search W3Schools:

What Others Say About Us

Does the world know about us? Check out these places:

Dogpile Alta Vista MSN Google Excite Lycos Yahoo Ask Jeeves

We Help You For Free. You Can Help Us!

W3Schools is for training only. We do not warrant its correctness or its fitness for use. The risk of using it remains entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2002 by Refsnes Data. All Rights Reserved

Validate How we converted to XHTML Validate

IISCart
ASP Ecommerce & Shopping Cart


Your own Web Site?

Read W3Schools
Hosting Tutorial


$15 Domain Name
Registration
Save $20 / year!


Advertise
at W3Schools

Only 0.5 CPM


SELECTED LINKS

University Online
Master Degree
Bachelor Degree

Web Software

The Future of
Web Development

Jobs and Careers

Web Security
Web Statistics
Web Standards


PARTNERS

W3Schools
TopXML
VisualBuilder
XMLPitstop
DevelopersDex
DevGuru
Programmers Heaven
The Code Project
Tek Tips Forum
ZVON.ORG
TopXML Search