SIGN UP! LOGIN SUPPORT CONTACT US FREE HOST
Free Web Hosting by Stormpages

CSS (cascading style sheets) Tutorial

Cascading style sheets are a new addition to the HTML language, they allow a web designer to program in the font styles, colors, the page width, image location and much more all in advanced. CSS allows for many different things to be programmed in advance and generally all computers use CSS the same.

  • Base structure of CSS:
    Note: CSS code ALWAYS goes between the <head> and </head> tags.

    <style type="text/css">
    css code here
    </style>

  • Link colors with CSS:
    Many sites have started to make their links not underlined, this is rather simple to do with CSS. Simply add the below code.

    <STYLE TYPE="text/css">
    <!--
    A:link { text-decoration: none;
    color: red;
    font-family: Arial; }
    A:visited { text-decoration: none;
    color: blue;
    A:active {text-decoration: none;
    color: black;
    -->
    </STYLE>


    In this code, the web browser is told to load links with the color red (normal link), blue (for visited links) and black (active links). You can of course change these colors if you wish, and it is not required to define all types of links (alink, vlink and link) in CSS.

  • Fonts in CSS:
    Fonts can be a little more complicated then links, but there is many simple ways to use them.

    <STYLE TYPE="text/css">
    <!--
    font-family: Arial;
    font-weight: Bold;
    font-size: 14px; }
    -->
    </STYLE>


    These are two simple font commands. The first one, font-family lets you specify what fonts are to be used and in what order (depending on what the user has). The second is font-weight which allows you to choose just how the font will appear in style. Possible options are bold, underline, italic and so forth.
  • Font Colors:
    Adding colors to fonts is just as easy as changing the font or the style, simply use the below code, once again adding it to your present CSS code.

    <style type="text/css">
    <!-- //hide this from old browsers
    H1 {color: red};
    H2 {color: blue};
    //-->
    </style>

    This makes any part of the page using the class H1 turn red and the class h2 turn blue.

  • Background colors with CSS:

    <style type="text/css">
    <!--
    BODY{ background-color: green};
    -->
    </style>

    That's it, just add that and change the color if needed (no need to add hexideimal colors for this, the name with do just fine)
  • Background Images and backgrounds as watermarks:
    Background images are very simple to add, and using CSS they can be manipulated to do all sorts of things, from making water marks, to starting in a certain place, to whatever. Here is some sample code.

    <style type="text/css">
    BODY{
    background-image: url(background.gif);
    background-attachment: fixed;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: white;
    }
    </style>

    Some values that can be changed are of course the image location. For the position, you may use top, middle, bottom, left, right and center or some% some%. For repeate you may use y or x or no-repeat (for watermarks or non moving backgrounds). And for the color, any color will work.
  • More Complex CSS: Indenting, margins and classes:
    CSS does much more then just allow you to select how the page will look for fonts and links. You can also change the margine width, allow different fonts for different "classes" and change the background. We will show you a few samples of advanced CSS below

    <style type="text/css">
    <!--
    BODY { background-color: rgb(255,255,255); color: rgb(0,0,0); font-family: Bookman Old Style, serif }
    H1, H2, H3 { font-family: Tahoma, sans-serif; font-weight: bold; font-variant: small-caps }
    H2 { margin-left: 20px }
    H3 { margin-left: 60px }
    .h2 { margin-left: 20px }
    .h3 { margin-left: 60px }
    BLOCKQUOTE { font-family: Times New Roman, serif; font-style: italic }
    .cite { text-align: right }
    -->
    </style>


    This code would make a page where the class h1, h2 and h3 indent the page a certain amount of pixels (spaces). It also would specify how other classes would work and the background and fonts to be used in the page. Click here to see the page
  • Comments in CSS:
    Just incase your wondering how to add your comments to you CSS code we listed the answer. To make a comment, add this: /* this is a place for comments */

Related articles: How Do I Start A Web Page?