Cascading Style Sheets (CSS) are being used more and more by
web designers to layout and format web pages. Although they have
been around for several years now many designers have avoided
them due to browser incompatibility.
Although compatibility
problems still exist they are no longer an issue for most
applications. Here I will concentrate here on the main features
and how they work and why they are used.
You may find
yourself using CSS anyway without you knowing as programs like
FrontPage use CSS (depends on page setup options) for some of
their functionality.
Styles Solve a Common Problem
HTML was originally designed to define the content of a
document but not the document presentation/layout. The layout of
the document was supposed to be taken care of by the browser,
without using any formatting tags. The content is defined by
using tags like h1,
, table, which basically say "This is a header", "This is a
paragraph", "This is a table", by using tags like and so on.
The principal browser vendors, Netscape and Microsoft,
competed by adding support for new, proprietary tags (like the
tag and the colour attribute) and technologies that
permitted increasingly high-impact Web pages.
These
innovations were good for spurring the development of Web
technology, but they created problems as well. Consequently
it became more and more difficult to create Web sites where the
content of HTML documents was clearly separated from the
document's presentation and that would be displayed correctly on
any browser.
The World Wide Web Consortium (W3C) - the
consortium responsible for standardizing HTML - created a
language called Cascading Style Sheets, or CSS.CSS, unlike HTML,
is designed solely to define appearance as efficiently as
possible.
It can exist either within HTML or as a linked
document, letting developers separate a Web page's content
(marked up in HTML) from its presentation (defined by CSS). Both
Netscape 4.0 and Internet Explorer 4.0 and later support
Cascading Style Sheets.
Style sheets work like templates: you
define the style for a particular HTML element once (e.g. header
tag h1), and then use it over and over on any number of Web
pages.
If you want to change how an element looks, you just
change the style; the element automatically changes wherever it
appears. (Before CSS, you had to change the element
individually, each time it appeared) .Style sheets let Web
designers quickly create more consistent pages--and more
consistent sites.
How Style sheets are Implemented
There are 3 basic ways to add the functionality of Style
Sheets:
1. Inline - Creating the elements for each
HTML Tag. This will allow the same HTML Tag to have different
styles on the same page.
2. Embedding - Creating the
elements on the page itself that will affect every occurrence of
an HTML Tag.
3. Linking - Creating one page that
defines the elements and include in the pages that you want to
affect.
For beginners using Embedding or Linking is
recommended.. The Linking Style is used when you want to use the
same style on multiple pages, you can then use Embedding and/or
Inline on specific pages that don't fit the design style of the
Linking Sheet.
Precedence and inheritance
As the
term Cascading Style Sheets implies, more than one style sheet
can be used on the same document, with different levels of
importance. Generally styles from different style sheets merge
together (cascade) into a virtual style.
However, If you
define conflicting styles for the same HTML element, the
innermost definition--the one closest to the individual
tag-wins
The precedence Style Sheets follow is Inline,
Embedding, then Linking. Inline Style takes precedence over
Embedding Style, which takes precedence over Linking Style.
There is a fourth style sheet which is set not by the
document author but by the reader and that is the browser
default. Taking this style sheet into consideration the order of
precedence is:
1. Inline Style (inside HTML element)
.
2. Embedding Style Sheet (inside the
tag).
3.
External Style Sheet.
4. Browser default.
So, an
inline style (inside an HTML element) has the highest priority,
which means that it will override every style declared inside
the tag, in an external style sheet, and in a browser (a
default value).
About the author:
Stephen Cope is a freelance trainer and the Webmaster at - making a website
and Niche Website
Guide.
