Click Here!
  Web Development, Web design, HTML code, HTML tutorials, Javascripts, DHTML, ASP, Perl, CGI scripts  
YOU ARE HERE: Home : Articles : Cascading Style Sheets (CSS)
Web Hosting  •  Website Tools  •  HTML Tutorials  •  PHP Resources
Cascading Style Sheets. (CSS)
By Virtual Mechanics
Last week we introduced Dynamic HTML and Cascading Style Sheets (CSS) as one of its three major components. We have mentioned CSS in several past issues. Unfortunately its name tends
to send many people running for cover. It's a term that could only have been coined by a techie with a penchant for the dramatic. If I were responsible for the name I would have called it PHH for 'Position your HTML Heverywhere'. This name not only helps describe what it does but the spelling also identifies it as a techie term.

Cascading Style Sheets are a W3C (see below) specified method for adding desktop publishing capabilities to HTML. CSS enables you to define a Style such as position, size, Font etc. and assign it to a picture, block of text or combination of Objects on your web sites. There are two primary ways to define a style. The first is through
the Style container which is used to define a globally accessible style. The second is inline were the style may be applied to a single tag.

The style container is used to define multiple styles that will be applied globally to the document. An example of a style container is:

<STYLE TYPE="text/css">
H1 {color: blue; 12pt}
P {color: black; 10pt}
UL {background -image: url(mypic.gif)}


In this example, whenever a H1, P or the UL tag is used, the specified color, font sizes and for the UL tag, a background image, will be applied. The style container can either be placed between the </HEAD> and <BODY> tags or it can be placed into a separate file and accessed by multiple documents on your web site through the
LINK tag as in: <LINK rel=STYLESHEET HREF="mysheet.css" TYPE="text/css">

The second method defines Styles inline with individual tags. Inline tags are only applied to the current tag but will take precedence over global container styles. An example of an inline style is:

<p style="color:red;Font-Size:24pt;background-color:green">This is a style example</p>

What styles are available?

Many of the styles such as FONT expand upon the basic HTML elements. Some Styles such as BACKGROUND add new features. Some of the major categories are (capitalized only for clarity) BACKGROUND, BORDER, CLEAR, COLOR, FLOAT, FONT, HEIGHT, LETTER, LIST, MARGIN, PADDING, POSITION, TEXT, VERTICAL, WHITE, WIDTH and WORD. Many categories also include multiple properties providing a wealth of new design
capabilities to HTML authors.

So just why do Style Sheets Cascade? It refers to the potential conflict that arises when an element has the same attribute assigned to it multiple times. This can occur when a style is defined in a external file, again in a container and again in multiple in-line attributes. The Cascade determines which style will be used. This is usually (simplistic) the style closest to the element it is applied to.

If you would like to find out more about Style Sheets, an excellent place to start is the W3C Style page at If you are not aware of it, the W3C or World Wide Web Consortium is a group of Internet professionals responsible for defining the www standards such as HTML. The W3C web site is at and contains all kinds of useful Internet information.

Source: "IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.

To subscribe send an email to or visit for subscription information and a list of past articles.

More Articles


  " TARGET="_blank">...





More News  
[an error occurred while processing this directive]

Join our newsletter!
Join our eNewsletter
for software updates,
freebies and more!


Registered Worldwide
...more statistics

Click Here!


  Articles are submitted to EDN and licensed from various content sites.
  To report abuse, copyright issues, article removals, please contact [violations (at@)]

  Copyright © Evrsoft Developer Network. Privacy policy - Link to Us

Contact Evrsoft