This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.

CSSShark - CSS Basics
The CSS Know-How Site

 

The Basics

The Cascade and Inheritance

HTML elements inherit stylistic properties from their parents.

Usually, you have a structure in the HTML document like this:

<HTML>
<HEAD>
        <TITLE>The Tree Structure</TITLE>
</HEAD>
 
<BODY>
<P>This is normal text and <strong>here 
we have text in bold</strong> and right back to normal text</P>
</BODY>
<HTML>

In the stylesheet, the <BODY> tag is defined as follows:

<style type="text/css">
  <!--
BODY {color: #FF0000;}
    -->
</style>

This means that the 'foreground' color (text, borders etc.) is red, throughout the BODY of the document [Disclaimer: NN4.xx has difficulties with this concept, because it fails to properly inherit styles.].

 Back to the Top 

The <P> tag inherits the red text color, the <strong> tag within the <P> tag inherits the red color ...

Now we override this inheritance:

   
<style type="text/css">
  <!--
BODY {color: #FF0000;}
STRONG {font-weight: bold;
        color: #006633;}
    -->
</style>

The result: the bold text will be green.

That is the cascade, and this concept has a few hidden agendas:

Since <STRONG> is a child element of the <BODY> it should have inherited the color red. But: the <STRONG> rule is more specific than the BODY rule and therefore wins.

CSS is not a programming language, and in this example the order is irrelevant:

<style type="text/css">
  <!--
STRONG {font-weight: bold;
        color: #006633;}
BODY {color: #FF0000;}
    -->
</style>

 Back to the Top 

Still, the normal <P> text is red, the <STRONG> text is green.

Too easy. Let's try something else:

<style type="text/css">
  <!--
BODY {color: #FF0000;}
STRONG {font-weight: bold;
        color: #006633;}
STRONG {font-weight: bold;
        color: #FF00FF;}
    -->
</style>

And the color is...?

Sickly pink/violet.
WHY?

!! If two rules have exactly the same weight and specifity, the one that occurs later in the style sheet wins.
(This is part of the 'Cascade')

Now we keep these styles, but in the document itself we change the <P>:

<BODY>
<H1>Text and Colour:</H1>
<P style="color: blue"> This is normal text and
<strong> here we have text in bold</strong> and 
right back to normal text</P>
</BODY>

 Back to the Top 

The color of the text is blue.

Inline styles have more weight than external styles; what comes later in a stylesheet has more weight than what is above: what is closer to the element in question, wins out.

A single HTML document can import multiple external stylesheets, use embedded and inline styles at the same time, and these styles can conflict with each other. CSS uses rules based on document structure, inheritance, specifity and cascading order to resolve those conflicts.

The importance of styles applied to the same elements in case of a conflict is as follows:
The linked stylesheet - will be overridden by the @import stylesheet, because this comes later in the document, but those styles will be overridden by the 'embedded' styles in the <style> declaration in the <head> section of the document, and those styles will be overridden by the inline styles directly applied to the element, (which will be overridden by HTML tags, if available.)

linked -> imported -> embedded -> inline -> HTML [element]

The "closer" the style is to the element, the more importance it carries.

Other topics:


Home   • CSS FAQs   • Basics   • NN4 Issues   • CSS-P   • Links   • Books  
Content, Design and Programming © 2001 by MaKo from Orion HiTek, Inc.. All rights reserved worldwide.