There is a distinction in classical education between Content and Form.  A simplified way of making the distinction is that “Content” is what you are saying and “Form” is how you say it.  In web design, we use the coding languages HTML or XML to create web content.  To change the the form, or way that the HTML or XML is displayed on your computer monitor, we pass the code through a “style sheet.”

Two common types of style sheets are XLST and CSS (Cascading Style Sheets). XLST is used when the XML content needs to be changed dynamically and mathematical functions are involved.  CSS is much more common in basic web design, and that will be mostly what is discussed in this article.

Imagine you have two websites: one for girls and one for boys.  You want to give them the exact same textual information, but for the girls you want the site to be pink with pictures of dolls and for the boys you want the site to be blue with pictures of racing cars.  You don’t have to create the textual content twice – you only have to create it once and employ a different CSS for each site.

This is the way it works:

In the <head> section of the web page you add this line of code:

<link rel=”stylesheet” href=”css/name-of-stylesheet.css” type=”text/css” />

replacing “name-of-stylesheet” with your own title.

Then in the root of your web domain, create a folder called “CSS” (e.g. www.name-of-your-site.com/css).  Then in your HTML editing program or any text editor like Notepad create a file and save it as “name-of stylesheet.css.”

Then, within the CSS file you are to describe all of the attributes of different tags within the HTML.  For example, in your HTML code you will create paragraphs in between the <p> and </p> tags, you will create hyperlinks within the <a> and </a> tags, and images using the <img src=”image.jpg”> tag.  With the CSS you can define how those tagged items are treated.  Something like this:

p {
color: #000000;
margin-top: 10 px;
text-alignment:left;
}

a {
text-decoration: underline;
font-size: 12 px;
color: #eeeeee;
}

img {
border:none;
padding: 5 px;
}

This CSS code will make your paragraph text justified to the left, the color black, and with 10px of blank space above each paragraph. It will make your hyperlinks grey, 12 pixels high, and underlined. It will make your images not have a border and be padded with 5 pixels of empty space around each side.

You can change the style sheets to fit your needs, or switch them out to give your site a new theme for a holiday or special event. It really is a powerful tool that will help your websites be lighter, cleaner, and more compatible with mobile devices, printing functions, and data storage.

A really good reference sheet for all of the CSS attributes you might need to get started can be found here.