What You Should
Already Know
Before you continue you should have
some basic understanding of the following:
If you want to study this subject
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 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:
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).
CSS Basics
[CSS
Tutorial] [CSS
Introduction] [CSS
Syntax] [CSS
How To] [CSS
Background] [CSS
Text] [CSS
Font] [CSS
Border] [CSS
Margin] [CSS
Padding] [CSS
List]
CSS Advance
[CSS
Dimension] [CSS
Classification] [CSS
Positioning] [CSS
Pseudo-class] [CSS
Pseudo-element] [CSS
Media Types] [CSS
Summary]
CSS References
[CSS2
Reference] [CSS2
Print] [CSS2
Aural] [CSS2
Units] [CSS2
Colors] [CSS2
Colorvalues] [CSS2
Colornames]
|
