Home :: About SD :: Staff :: Terms of Use Policies :: Awards :: Guestbook :: Message Board :: FAQs :: Links :: Job Opportunities
Layouts :: Avatars :: Buttons :: Banners :: Wallpapers :: Tutorials :: Graphic Request

Tutorials

CSS Help

      Cascading Style Sheets (CCS) have many different features to them. For example, you can change the text color and style as well as its size without having to use a <font> tag. That is just one of the many different features CSS can do. Some of the most useful features of CSS are listed below.
    Font
      - font-family: Verdana;
      - color:#000000;
      - font-size:11px;

    Body Background
      - background-color:#FFFFFF;
      - background: url(bg.jpg);
      - bg-properties: fixed;

    Scrollbar
      - scrollbar-arrow-color: #000000;
      - scrollbar-track-color: #FFFFFF;
      - scrollbar-face-color: #FFFFFF;
      - scrollbar-highlight-color: #FFFFFF;
      - scrollbar-3dlight-color: #000000;
      - scrollbar-darkshadow-color: #FFFFFF;
      - scrollbar-shadow-color: #000000;

    Links
      - a:active { color: #0000FF; text-decoration: none;}
      - a:link { color: #0000FF; text-decoration: none;}
      - a:visited { color: #0000FF; text-decoration: none;}
      - a:hover { color: #000080; text-decoration: none;}

    Cursors
      - cursor: n-resize;
      - cursor: e-resize;
      - cursor: s-resize;
      - cursor: w-resize;
      - cursor: ne-resize;
      - cursor: se-resize;
      - cursor: sw-resize;
      - cursor: nw-resize;
      - cursor: crosshair;
      - cursor: wait;

    Headers
      - .head { font-weight: bold; color: #000000; background-color: #F5F5F5; border-color: #000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;}
        Example:

        Header

        The code for the above example is
        <p class="head">Header</p>

    Borders
      - .border { color: #FFFFFF; border: #000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: #FFFFFF;}
        Example:
        1 2
        3 4
        The code for the above example is
        <table width="200" height="100" class="border">
        <tr>
        <td width="100" class="border">
        1
        </td>
        </tr>
        <td width="100" class="border">
        2
        </td>
        </tr>
        </tr>
        <tr>
        <td width="100" class="border">
        3
        </td>
        </tr>
        <td width="100" class="border">
        4
        </td>
        </tr>
        </table>

      Border Options
        - color: #000000; <-- border font color
        - border: #000000; <-- color of the border
        - border-style: solid; <-- border style
          -- solid
          -- dotted
          -- dashed
          -- double (border size must be 3 or more)
        - border-top-width: 1px; <-- top border
        - border-right-width: 1px; <-- right side border
        - border-bottom-width: 1px; <-- bottom border
        - border-left-width: 1px; <-- left side border
        - background-color: #FFFFFF; <-- border background color

    Table Options
      - font-size: 11px;
      - border-size: 1px;
      - border-style: solid;
        -- solid
        -- dotted
        -- dashed
        -- double (border size must be 3 or more)
      - border-color: #000000;
      - color: #000000;

Written by: Kaze Kikotsu. Questions? Comments? Complaints? E-mail Kaze Kikotsu.
Affiliates:       Apply
Starlight Designs is © copyright Kaze Kikotsu 2002-2011. All anime/manga & video games © copyright their respective owners. All Rights Reserved.