|
Introduction To CSS
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
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:
-
Browser default
-
External Style Sheet
-
Internal Style Sheet (inside
the <head> tag)
-
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).
|
