In this installment of HTML Tips, I’m going to begin with what is probably the most important thing that anybody can learn about web design. If you learn nothing else from this article series, please get this much. It will literally save you hours of time.

The one thing I am talking about is CSS. CSS stands for Cascading Style Sheets. In order to understand the importance of CSS, you have to understand what goes into putting a web site together.

Let’s start with something very simple. Let’s take a simple one page sales page. If you look at it, you’ll notice that the print throughout the page is not constant throughout. Some of it is small, some big and some in different colors. In order to make the print different in each section, a different piece of HTML code called a font command has to be inserted.

An example would be something like this:

What this line of code does, for the text that follows it, is it sets the font size equal to 4 and makes the look of the font, or style, that of Arial, which is one of your basic fonts.

Now, in the course of designing your page, you’re going to have a number of lines of text that you will want to have with this same font size and face. For each of those lines, you will have to include the above line.

But what happens if you decide that you want to change the font of each of these lines to size 6 and face Times New Roman? What you would then have to do is go back to each of these lines and make the change to each one separately. If you have a large page, this could turn into several hundred individual changes. Do you now see where this can be very time consuming? This is the last thing you want to do.

This is where CSS comes in. With CSS, you can designate a code that says that every line that you want to look like the above line will look that way. It’s one line of code and it will be filtered through the entire web page.

Here’s an example of what a CSS file looks like.

BODY { font-family: arial; font-style: normal; font-weight: 400;
font-size: 14pt;}
.head{font-family:arial; font-size: 14pt; font-style: bold; font-weight: 400}
.head2{font-family:arial; font-size: 11pt; font-style: bold; font-weight: 600}
.body{font-family:arial; font-size: 12pt; font-style: normal; font-weight: 400}
.small{font-family:arial; font-size: 10pt; font-style: bold; font-weight: 600}
.small2{font-family:arial; font-size: 11pt; font-style: normal; font-weight: 400}
:link { color: rgb(0, 0, 0) } /* for unvisited links */
:visited { color: rgb(56, 101,37) } /* for visited links */
:active { color: rgb(255, 0, 102) } /* when link is clicked */
:hover { color: rgb(0, 96, 255) } /* when mouse is over link */

The individual tags, such as head, body, small and so on, are placed at the various points in the HTML code where you want THAT style to show up. This way, if you want to change the style, all you need to do is go to the CSS file and make the change to the one line. For example, if you like, you can change the font-size in the head tag from 14pt to 16pt and that change will then show up in every head tag line in your main HTML file.

As I said, CSS can save you hours of time.

Use it!