Introduction to Cascading Style Sheets
Cascading
Style Sheets are now the standard way to define the presentation of
your HTML pages, from fonts and colours to the complete layout of a page. They are
much more efficient than using HTML on every page to define the look of your site.
CSS is becoming a more important language to know every day, so the sooner you have
a grip on this most elegant of presentational languages, the better.
HTML was originally designed as a simple way of presenting information, with the
aesthetics of a web page being far less important than the content (and largely
being left up to the web browser). Of course, now that the web has become as popular
as it has, the presentation of your content has become almost critical to a site's
success. This, among other things, was why CSS was brought in.
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
Benifits of StyleSheet
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.
All major browsers support Cascading Style Sheets.
Style Sheets Can Save a Lot of Work
Styles sheets define HOW HTML elements are to be displayed, just like the font tag
and the color attribute in HTML 3.2. 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!
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:
- Browser default
- External style sheet
- Internal style sheet (inside the <head> tag)
- 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).