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/







CSS syntax.



Procedure
  1. The syntax used in a css file:

    CSS rule

    simple selector
    selector{
       property: value;
       property: value;
    }
    contextual selector
    selector selector{
       property: value;
       property: value;
    }


    Contextual selectors consist of several simple selectors separated by whitespace.
    The CSS rule is only if selector paterns matches.
    class selector id selector
    selector.style {
       property: value;
       property: value;
    }


    .style {
       property: value;
       property: value;
    }


    The last CSS rule is not attached to any HTML tag.
    selector#style{
       property: value;
       property: value;
    }


    #style{
       property: value;
       property: value;
    }


    The last CSS rule is not attached to any HTML tag.


    simple selector
    p, i{
       color: yellow;
       font-size: 10pt;
    }


    <p>Text</p>
    <i>Text</i>

    contextual selector
    p i{
       color: yellow;
       font-size: 10pt;
    }


    In this example the selector pattern matches:
    <p><i>Text</i></p>

    In this example the selector pattern does not match:
    <i><p>Text</p></i>
    class selector id selector
    p.small {
       color: red;
       font-size: 8pt;
    }


    <p class="small">Text</p>

    .normal {
       color: blue;
       font-size: 9pt;
    }


    <p class="normal">Text</p>
    <div class="normal">Text</div>

    p#small{
       color: red;
       font-size: 8pt;
    }


    <p id="small">Text</p>

    #normal{
       color: blue;
       font-size: 9pt;
    }


    <p id="normal">Text</p>
    <div id="normal">Text</div>



    You can also write these on seperate lines:

    selector {property: value; property: value; property: value;}
    selector.style {property: value; property: value; property: value;}
    .style {property: value; property: value; property: value;}
    selector#style {property: value; property: value; property: value;}
    #style {property: value; property: value; property: value;}


  2. The selector is a HTML tag such as "p".
    For the same selector you can assign different styles such as ".small", ".big".
    The property is the attribute you want to change such as "color".
    The value is assigned to the property such as "red".
    If you assign units, for example "9pt", do not put spaces between 9 and pt.

    p.small {color: "red"; font-size: 9pt;}
    p.big {color: "red"; font-size: 15pt;}


    <p class="small">text</p>

    Note: Only one class attribute can be assigned in a tag and the class must always start with a letter.



  3. Each property/value pair must be inside curly brackets ({ }).

  4. Each property/value pair must be separated by a colon.
    Putting a space on both sides of the colon is for readability and is not required.

  5. Each property/value pair must end with a semicolon.

  6. If a value consists of multiple words, put quotes around the value:

    p {font-family: "sans serif";}

  7. To use a style in all HTML tags omit the selector name.

    .small {color: "red"; font-size: 9pt;}

    This style can only be used if the class attribute is used in the HTML tag:

    <p class="small">text</p>
    <div class="small">text</div>


  8. Multiple selectors with the same CSS formatting can be added together seperated by commas:

    selector, slector, selector {
       property: value;
       property: value;
       property: value;
    }


    You can also write this one one line:

    selector, slector, selector {property: value; property: value; property: value;}

  9. A CSS comment begins with "/*", and ends with "*/". Everything that lies between these delimiters is the comment and should be ignored by the CSS parser. Comments may not be nested and can occur anywhere between CSS syntax constructs.

  10. An example what is explained above is shown here:

    body {
       margin-left: 0px;
       margin-right: 0px;
       margin-top: 0px;
       background-color: #ffffff;
       font-size: 8pt;
       font-family: Verdana, Arial, sans-serif;
    }


    td {
       font-size: 9pt; /* This is also comment */
       font-family: verdana, Arial, sans-serif;
       text-decoration : none;
    }


    /* This is commented out
    a {
       font-size: 9pt;
       font-family: Verdana, Arial, sans-serif;
       font-weight : normal;
       text-decoration : none;
       color: #0000FF;
    }
    */


    a:hover {
       font-weight : normal;
       text-decoration : underline;
       color: #000000;
    }

    p, div, h1 {color: red; font-size: 130%; }



  11. Download the CSS file (style_ie.css) used by Mobilefish.com.