Cascading Style Sheets or CSS as they are more commonly known have been around for many years now and can be used to format your page any way imaginable. CSS is a very easy way to keep you web page consistant with your fonts, colors, and many other aspects. CSS also allows you to get this information in a single file instead across all of your web pages. If you have a 200 + page website and a decision has been made to change the font on the pages from arial to verdana then you would have to manually edit 200+ pages to make tha change. But with CSS all you have to do is change the CSS files, which for a large webpage maybe two or three files, a lot better than 200+ files.

There are three ways that you can use CSS in your web page:

• Inline Styles
  • This type of style is done inline with the tag you are currently writing.

  • www.mikenetpc.com

• Embedded Styles
  • This type of style is defined between the < and >tags
  • When defining the styles you will have to put them between <>tags

  • <style type="text/css">
     h2 { font-size: 16px; }

• External Styles
  • External Styles are stored in a seperate file normally named with a .css extension
  • With external styles you must put a statement in the HEAD of your document that tells the page here to look for styles

In my personal opinion I find Inline Styles absolutly pointless except when adding a style that you can’t do with normal tags. If you are going to use style sheets in your web page you might as well go ahead and make an external CSS file to use. This way you can reference every page to that style sheet and then if you need to make a change it will be global not just specific to one page. So lets first create our HTML document then we will create our CSS to change the way that it looks.

Here will be our HTML document.

<h2>This is a heading level we will change</h2>
<div id=”leftside”> This will be some text that we can change its position and its font and pretty much anything that we want.</div>
<div id=”rightside”>

This is text in a paragraph that we will be able to change the font, color, size and other effects to make it more appealing to the viewer.

 This is some text that is not enclosed in any tags.</div>

This plain HTML document is about as boring as they come right now. It will have a white background and black text with the first line being bigger than the rest. Lets now add a little bit of color to this web page by using a Style Sheet. I am going to give you the style sheet in its full form and then I am going to explain it line by line so that you understand it all.

 body { font-size: 12px;
        font-family: Verdana;
        background-color: blue;
      }

 p { font-size: 14px;
     font-family: Georgia;
     color: red;
   }

 H2 { font-size: 18px;
      font-weight: bold;
    }

 #leftside { position: absolute;
             width: 300px;
             height: 200px;
             margin: 0;
             margin-top: 10px;
             border-right: 1px solid #000000;
             font-weight: bold;
           }

 #rightside { position: absolute;
              margin-top: 50px;
              margin-left: 310px;
            }

Now lets go through this CSS file step by step so that you understand it all. Lets start with the body section, this section is default settings everything that is included in the body tag will have these settings applied. Most of the settings are self explanitory. font-size specifies the size of the text within the body tags, font-family specifies the font within the body tags, and background-color specifies the color of the webpage. The next section is the p tags as with the body tags these statements apply to anything in the HTML document that are within the p tags. Every statement here was used above except the color statement and this simply sets the font color. The H2 section only has one new statement within it and that is the font-weight command and se you can see here we are setting the text within the H2 tags to bold.

Next we will talk about the div tags that we used and we will put the text in different positions on the page. First we will use the #leftside and I will go through each step here.

• position: absolute;
  • This sets the position to use exact pixels to set the location, the other option is float which will adjust the location with the size of the screens.
• width: 300px;
  • As you can probably guess this sets the width of the box.
• height: 200px;
  • This sets the height of the box
• margin: 0;
  • This is a generic margin setting
• margin-top: 10px;
  • This specifically sets that margin at the top to 10 pixels
• border-right: 1px solid #000000;
  • This statements adds a border to the right side of the box, makes it 1 pixels wide, solid and color of black
• font-weight: bold;
  • This just makes the text inside this box bold

Now that we have created these two files open the HTML file in a web browser and look at what you just created. These are just a few of the statements that can be used in a CSS document. So play around with the CSS file and see how the HTML document changes.

Hope that you have enjoyed this article and look for some of my others.