What is a Cascading Style Sheet?
 
 

 

A Cascading Style Sheet is a method used to enhance the property of HTML tags that offers enormous benefits for Web authors. Web authoring with style sheets allows you to focus on the presentation of your work, giving you complete control over all the features HMTL tags without changing the content of your webpages. As you will see, this will give you increased flexibility and control over your creations.

When you create Cascading Style Sheets, you are incorporating more properties onto one or more existing HTML tags. Additional properties can be applied to an infinite number of tags, one after another. The end result is a series of styles that can be applied to your webpages.

IMPORTANT:
Cascading Style Sheets can only be implemented in either Microsoft's Internet Explorer 3.0+ or Netscape's Navigator 4.0+. Any other previous versions of WILL NOT be able to view the style sheet.

Lets take a closer look at another sample of a style sheet. Shown below is an example using the HTML tag <CENTER> . When placed in a webpage, it causes the text to align center...


SAMPLE: (without a style sheet)
This sentence is in the <CENTER> tag.

With a style sheet implemented for the <CENTER> tag, notice what happens:


SAMPLE: (with a style sheet)
This sentence is in the <CENTER> tag.

This is what the Style Sheet for this example looks like:

<style type="text/css">
<!--
CENTER
{
font-family: Courier;
font-style: Italics;
font-size: 14px;
font-weight: 500;
color: #0000A0;
}
-->
</style>

Keep in mind that you can make the style sheet reflect any style you want. And you can have as many as you want in your webpage, not just one.


What happens when you start adding more than one Style Sheet on a website ?

Adding more than one Style Sheet is where the term Cascading Style Sheet came from. They are designed to be read in cascading order, one after the other.

Let's take an example where you have two Style Sheets, one for the <BODY> tag and one for the <H1> tag. It could look something like this:

<style type="text/css">
<!--
BODY {
background: #008000;
}
H1 {
font-family: Verdana;
color: #C0C0C0;

background: #000000;
}
-->
</style>

In this Style Sheet, the <BODY> tag has a green background. <H1> has been given the properties of silver VERDANA font with a black background.

 

BreBru.Com Extra Information Techonology HTML