•  Print this page
    Print this page

Cascading Style Sheet Quick Guide
 
 
This guide contains information how to create Cascading Style Sheets (CSS).

More information about CSS can be found at: http://www.w3.org/Style/CSS/

Quick guides







Style order.



Procedure
  1. Styles can be overridden when using stylesheet files and/or embedded styles.

    The rule is:

    A style which is defined closes to the text that it affects, overrides the others.

    Example
    <html>

    <title>Demo</title>

    <head>
    <link rel="stylesheet" type="text/css" href="../../download/css/green.css" />
    <style type="text/css" media="all">
    <!--
       @import "../../download/css/yellow.css";
       @import "../../download/css/orange.css";
    -->
    </style>
    <link rel="stylesheet" type="text/css" href="../../download/css/brown.css" />
    <style type="text/css">
    <!--
       h1 {color: red;}
    -->
    </style>
    </head>

    <body>
       <h1 style="color:blue;"><p style="color:gray;"><i>hello</i></p></h1>
    </body>

    <html>

    The style order applied to the "hello" text in the example above is:

    • The <i></i> tag has no style attribute, so it inherits from its parent (gray)
    • style attribute (gray)
    • style attribute (blue)
    • style block (red)
    • linked stylesheet (brown)
    • imported stylesheet (orange)
    • imported stylesheet (yellow)
    • linked stylesheet (green)

    Note: The style order applies to Firefox 1.0.7 and IE 6.0.