Cascading Style Sheet Quick Guide

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

More information about CSS can be found at:

Style order.

  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.



    <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";
    <link rel="stylesheet" type="text/css" href="../../download/css/brown.css" />
    <style type="text/css">
       h1 {color: red;}

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


    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.