How to use CSS

<< back | refresh | forward >>

If you dont already know this, CSS changes the whole look of your page. You can edit your scrollbar color, font color,
font face, font size, link color, hover color, background, textareas, tables, and so much more. It is also very useful
when changing layouts, since you can use something called External CSS. Go here to learn more about it.
For now, ill teach you how to put up your own style sheet.

There are two things you need to know before we begin:

  • First, you must place your style sheet after the <head> tag and before the </head> tag.
  • Second, you must know that style sheets always begin with this: <style type="text/css"> and end with this: </style>

  • Lets begin with the scrollbar. Copy the code below and place it after <style type="text/css">.
    Then replace where it says #color with your choice of color. It's pretty obvious what each one is.
    Ex: Face color is the face color of your scrollbar, shadow color is the shadow color of your scrollbar..,
    3dlight color is the blah blah. You get the idea! Lol.

    <!--BODY{
    scrollbar-face-color:#color;
    scrollbar-shadow-color:#color;
    scrollbar-3dlight-color:#color;
    scrollbar-arrow-color:#color;
    scrollbar-base-color:#color;
    scrollbar-track-color:#color;
    scrollbar-darkshadow-color:#color;
    scrollbar-highlight-color:#color;
    scrollbar-shadow-color:#color;
    }-->

  • This is the second part of your style sheet. It's to change the color of your links. Copy and paste it
    under the scrollbar part and replace "#color" with your choice of color. Below, you'll see that ive
    explained what each one is.

    <!--
    a:link {text-decoration: none; cursor:default; font-weight:normal; color: #color;}

    a:active {text-decoration: none; cursor:crosshair; font-weight: normal; color: #color;}

    a:visited {text-decoration: none; cursor:crosshair; font-weight: normal; color: #color;}

    a:hover {color: #color; cursor:crosshair; text-decoration: none; font-weight: normal;}
    -->

    1. text-decoration: here, you just have to replace 'none' with what you want your text decoration to be.
      Example: If i want my text to be underlined, ill replace 'none' with 'underline'. Heres a list of what you can replace 'none' with:
      underline, overline, underline overline, line-through

    2. cursor:

      If you want to change your cursor, replace 'default' with one of these:

      text
      help
      crosshair
      wait
      move
      pointer
      nw-resize
      ne-resize
      w-resize

    3. font-weight: you can change how bold or light your text is by replacing 'normal' with one of these:
      lighter, bold, bolder

      You can even use numbers, starting from 100 being the lightest and ending with 900 being the boldest:
      100,600,900

    4. color: replace '#color' with the color you want.

      Continued--->