Tutorials

Stylesheet (CSS) Codes

If you're into designing websites and like to change them every once in a while i can really advice you to use a stylesheet. I couldn't live without it! ;-). If you are already using css this tutorial might also be helpful to you, i've collected some nice codes.

  1. Open a new page and save it as stylesheet.css in the root directory of your website (where you've got your other pages too). Whe are gonna code it later.

  2. In all the the html pages you are gonna create, or have created, insert this code in the head:
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  3. Now you're ready to decide what your pages are going to look like. first we'll start with some simple coding. Let's say you want your font to be gray, in a regular size and with font-family arial. Just insert this code in your stylesheet:
    body {
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
    font-weight: normal;
    font-size: 80%;
    }
  4. You probably don't want your links to appear in the regular purple and blue colour, or underlined. Insert this code in your stylesheet and adjust the colours to whatever you want them to be:
    a:link, a:visited {
    color: #0099CC;
    text-decoration: none;
    }
    a:active {
    color: #0099CC;
    text-decoration: underline;
    }
    a:hover {
    color: #95E4FF;
    text-decoration: none;
    }
  5. Maybe you would also like to control the appearance of your forms and drop down menu's:
    input, textarea, select {
    background-color: #99CCCC;
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 11px;
    border: 1px solid #669999;
    }
  6. It's also nice to use headlines in your website. Usually you can make them by putting the text between h1 or h2 tags, depending on how big you want your text to appear. Because that's all it will do really, make you text bigger. But with css you can also style the head tags. For instance you put the headline between h1 tags (<h1> title </h1>), but you don't want it that big and with a nice pink background colour:
    h1 {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    background-color: #FFCCFF;
    margin: 2px 0px 2px 0px;
    font-size: 14px;
    color: #666666;
    }
  7. This is not all you can do with css, you can make a complete layout based on css (also called pure css layout), but that requires a little more practise. If you want to learn more about that, please visit Glish. For now i'll give you a few more nice codes you can use in your stylesheet.
    - text-transform: uppercase (capitalizes all text)
    - text-transform: capitalize
    - letter-spacing: 8px
    - cursor: crosshair
    - cursor: help
    - border-bottom: thin dashed #800080
    - border: 3px dotted #66CCCC
    - text-decoration: line-through
  8. Wanna know how good your knowledge of css is? Take this test, I scored 95%! Last year when I looked at the quiz it seemed like abracadabra to me (^_^).