For some this may be new, but for me it is more a reminder.  Stylesheets save time and that means more time to enjoy life.  Stay displined when it comes to stylesheets and you’ll be designing sites like a pro in no time.

The primary reason for this post was inspired by my wife.  I was going over a future article on stylesheet based menus and she asked what the heck is a stylesheet?  I’m glad she did.  It is quite possible to achieve the same results as stylesheets using font tags, tables, and other classic HTML stuff.  This is great for making things bold, but if you want every title on the site to look the same way, or a paragraph to be formatted with a certain indentation, it is often better to move these specifications into a stylesheet.

A stylesheet is a plain old text file that describes how each element in your page or site should look.  Think of it as instructions to the web browser on how to paint your page.  I suggest starting with making the elements you already know and love in HTML a certain style across your site.  We’ll get into more advanced topics in future posts.  For now, let’s setup a basic page.  The source code for this is below and you can also view this naked page.

<html>
<head>
<title>Simple HTML Page</title>
</head>
<body>

Our Simple HTML Page


This is a simple paragraph, with a simple link.  It is designed to show how to do simple styles.

</body>
</html>

Now let’s style it up. The first thing we need to do is create a new file in the same directory for the stylesheet. For simplicity lets call it style.css. We will then start populating this with some basic styles for our page. Each tag on the page is an opportunity to set a style. This begins with the <html> tag and continues to the end of the document. What can you do with the html tag? Glad you asked. The beauty of stylesheets is they cascade, meaning things you setup in the top level elements trickle down to the lower elements. I usually setup basic styles like my default fonts and such in the html tag. An example style for this might be:

html
{
   font-family: Tahoma, Arial, Sans-Serif;
   font-size: 12pt;
}

In this case we set the font to Tahoma, but the viewer doesn’t have that font installed it will use Arial or their system’s default non-serifed (no extra tails on the letters) font.

Now we might want to make our links orange. In order to this we again use the html element and then proceed to set the style for it.

a
{
  color: orange;
}

Pretty simple, eh? With just one style, color, we are able to make every link on every page that includes our stylesheet, orange.

Last example for the day. We can also style our paragraphs. In this case I’m going to put a border around it and make the background color yellow.

p
{
  border: 1px solid orange;
  background-color: yellow;
}

Now to put all of this together paste each of the three examples into your css document and save it. I’ve combined them in the space below for easier copying and pasting.

html
{
   font-family: Tahoma, Arial, Sans-Serif;
   font-size: 12pt;
}
a
{
  color: orange;
}
p
{
  border: 1px solid orange;
  background-color: yellow;
}

Once this is done you need to tell the browser to apply your stylesheet to the page. In order to this you link it together with the >link< tag and add it in your >head< section of the html document.

Once you have saved the document your web page will now be styled. Take a look.

You can learn more about stylesheets from the W3C (the people who set standards for the web) on their online tutorial. If you have questions about stylesheets and how they apply to your site, feel free to ask the community by posting a comment below.

Tomorrow we are going to go back to application development and take a look at current development techniques and how and why they fail. o.k. maybe it won’t be that depressing, but it will be an eye opener.