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

What Are Style Sheets

      Style Sheets are a lot like Cascading Style Sheets (CSS). Accually Style Sheets are CSS, just not as a seperate file like CSS is. Style Sheets are simply a CSS file writen directly onto the web page.
    Example
    <style type="text/css">
    <!--
    body { font-family: Verdana; font-size: 11px;
    color: #000000; background-color: #FFFFFF;
    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;}

    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;}
    -->
    </style>
And much like CSS you stlye sheet can also look like this.
    <style type="text/css">
    <!--
    .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;}

    .border { color: #000000;
    border: #000000; border-style: solid; border-top-width: 1px;
    border-right-width: 1px; border-bottom-width: 1px;
    border-left-width: 1px; background-color: #FFFFFF;}

    table { font-size: 11px}

    body { font-family: Verdana; font-size: 11px;
    color: #000000; background-color: #FFFFFF;
    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;}

    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;}
    -->
    </style>

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.