The Significance of Cascading Your Styles

[H1]The Significance of Cascading Your Styles[/H1]

Author: Red Matrix

Hello and welcome to my tutorial.

This tutoral will help you, the reader, understand what cascading
means when using style.

AT A GLANCE

After reading this tutorial, you will learn the following:

Materials needed: Text Editor, Web Browser
Time allowance: 5 Minutes

* * *

Types of Styling

There are three major ways to incorporate style into your HTML documents.

The first way is called Inline style. It is called this because the programmer enters style info directly into the selector.

<P style="size: 10px; color: red;">Hello World.</P> would come out: " Hello World.".

The second way is called Embedded style. With this type, the programmer gathers all formatting rules into one area
on the page. Below is the syntax for embedding a style onto an HTML document.

<style type="text/css">  </style>

Then we have External style sheets. This is a text file with a dot-CSS extention. (.css)
External style sheets have styles listed in the same manner as embedded, but does not need to
be qualified with the <style> tag in the file itself.

To include, or link, an HTML document to an external style sheet, you need to place the link
inside the <header> tag. Eg:

<head> <title>External Style</title> <LINK rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head>

This is assuming that you have named your style sheet "style.css" and that it is located in the same folder as your HTML document.

* * *

Cascading

Okay boys and girls. This is where it gets interesting.

When using CSS, you must realize that sometimes there are situations that require you to use more than one meathod. The programmer can use all three meathods with no adverse effects. This is because the styles are applied in a certain mannor. First, the browser checks for any external stylesheets via the <LINK> command. If it finds definitions, it loads them into memory. Then it looks for embedded styles, and finally, inline styles.

As you may imagine, there are many opportunities for styles to get overlapped. Well, don't fret. The beauty of CSS is that the closer a rule is to its target, the stronger its relevance, and thus, its dominance. In case there is an overlap, the style closest to the content wins hands down. If the conflict occours INSIDE the same type, then the rule that comes last is the winner.

For example, in an external, one might have declared that all <P> tags be rendered as 12 pixels, and in red. And further down the sheet, there is another declaration that all <P> tags are in the Couier font, and be in blue. The conflict occours between the color statements. Here, the dominant rule is the one that came last, so all <P> tag content will be: Courier, 12 pixels, and blue.

You can use this to your advantage by utilizing multiple style sheets and / or embedded styles. I like to use all layout rules in a file called main.css, and all styles in styles.css.

* * *

Forced Dominance

To put it simply, you can override the default dominance that CSS has built into it. At any given time, you can append a rule to any of your declarations that will put the control back into your style. I am of course, talking about the !important command.

This command will override any style rule that the visitor may have in their settings; unless they are also using this command. However, it is also used the way I described. Here is the syntax:

P { font-size: 18pt ! important }

This insures that if the browser encounters any font size rules for <P> tags, that they will not take dominance. (Unless they also have the !important rule)

* * *

Summary

In order to be a better CSS programmer, you've got to learn the way styles are rendered on the visitor's screen. Use the !important command sparingly, and you will be 99% sure that your pages are shown the way you intended them.
The closer a declaration is to the conent, the more power it has during a conflict.
[/font]

If you like this tutorial, please Click here to register.

--------------MY-SITES-------------
http://www.sixdegrees-forum.com :: Talk about the new ABC show, Six Degrees, produced by JJ Abrams!
http://www.ListGrind.com :: Add your link for free!

Graphic Addicts Forums