Search
Related Links




    

Informative Articles

A Web site: To Have or Have Not
Article: This article may only be reproduced in its entirety, with permission, and including the resource box and web site address. A courtesy copy of your publication would be nice, too! A Web Site: To Have or Have Not By: Tim Minnick...

A Website Design Checklist
A Web Site Design Checklist Website design is a significant function of the website. It is the basis of the website development and publication. The web designer must be a creative person who can design a web site that is aesthetically...

Content is king
Introduction A pencil. Yes, a pencil. In my opinion, every great idea has started with a pencil. Sure, lots stay in someone’s head, but to me a great idea doesn’t have any value until it’s written down. Until it’s written down it’s just dust I...

Do This One Thing to Create a Powerful Product-Selling Web Site
Spend time planning your Web site. Before you design a page or write a word, get a visual, and mental picture of your preferred audience. Your visitors will spend up to 10 seconds on your home page, so plan accordingly. Draw your specific...

Establishing your Internet Presence
Introduction This article shows you what is involved to get your own website up and running. This information can help you with preparing the requirements for your website. Having well defined requirements will result in a better website while...

 
Starting Cascading Style Sheets


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.