Cascading Stylesheets (CSS) for the Layman

Cascading Style Sheets (CSS) are another way for web designers to tell the web browser how the website should look. HTML does this already but CSS has greater advantages.

With HTMl you would normally describe a paragraph with the ‹font› tag followed by the specifiers such as color, size, face, et ct. If you wanted other changes to the font, they aren't logically a font tag specifier. They would have their own tag such as ‹b› for bold or ‹i› for italics.

CSS defeats the poor logic behind the original design of the people who created HTML. In CSS you could describe font for a paragraph by using something like the following:

p{
color:black;
text-align:center;
font-size:large;
font-family:arial;
font-weight:bold;
}

As you can see, we defined the paragraph tag with the "p" before the "{," described what the text should look like then how the font should be manipulated and closed everything with "}." This is more logical being that the look of the writing was described by "text" specifiers--text being defined as the written word and therefore its look--and the typesetting and size manipulated by "font" specifiers--font being defined as a complete set of type of one size and face.

Now let's dissect the above. To start a CSS entry, we must tell the web browser what we are defining. This would normally be an HTML tag. The one above defines the paragraph tag "p" but you could also do the span tag "span" or any table tag such as "td." After telling what we are defining, we must open the script dialog. We do this by putting "{." We may then enter our definitions.

HTML is very limited in definitions. One may only specify bold, size, and color. With CSS we may define not just bold but how bold. We may define not just size in terms of pitch but also, percentages, pixels, width, height, et ct. We may also define the what the text does such as letter spacing or even blinking.

Type all the specifiers you'd like in the form shown above. Name of the specifier and the specification separated by a colon then ended with a semicolon. Each entry should be on a separate line and all closed off with a "}." For a list of available CSS specifiers please visit W3School's CSS Reference Page

Sometimes one could not just define HTML tags but can set up generic descriptions. For example you want all font to be a certain size and color but you want headers to have a different color and to be bold. You would do this by the use of "selectors." You would define one as follows:

.header{
font-size:larger;
font-weight:bolder;
}

Note specifically that there is a period in front of a word. The word is clearly not a tag. You may use any word you wish. The period tells the browser to look for HTML tags with the word embedded inside the "class" specifier. When it finds the word it uses that design instead of the default.

Besides advanced design capability, there are other practical purposes for CSS. When you write HTML it will take up space. Of course web page will have a file size, right? Well, as people look at your site they download the information and it takes up "bandwidth" and certain webhosts may limit this. Not only that but even if you host your site with your own server then you would worry about bandwidth because it increases employment expenses as well as many other problems. CSS helps because it reduces the many HTML tags defining the same basic design into just defined once. Also, because of that it reduces the many web pages file size saving bandwidth. On top of that, web visitors can download the CSS file once to view all pages. Lastly, the separate CSS file can be set to define all web pages on your site. That means you make one change on a single document and your whole web site will look different. Now that's fantastic!

To recap, with CSS one can describe how many things should look. HTML can only describe one thing at a time. CSS can be embedded anywhere inside a webpage. HTML must be embedded right next to what it describes. CSS can not only describe many things but on many number of pages; HTML cannot. You could create a single document with the extension ".css" which will control all your web pages on your site; HTML cannot. If you need to make changes to your site, it will only take one change with CSS in one place but many on all pages with HTML.