Cascade Style Sheet Basics

There are only three parts to Cascade Style Sheets (CSS), and once we understand what they are and how to use them, CSS becomes very easy and exciting to use. One of the best parts of CSS is that you can create an external Cascade Style Sheet which you can use for all web pages on your website. You can also have one CSS for all of your articles and a different one for all of your press releases. Making one change in your CSS, you are able to effect changes to a few web pages or to hundreds of web pages without ever touching any of the different web pages themselves.

Below I am going to break out each one of the parts of CSS and explain them in non-techie terms:

1. Selector 2. Property 3. Value

This is what these three parts will look like when they are all put to together:

selector { property: value }

The first part is the selector. In techie terms, a selector is the (x)HTML element that you want to style. Now what does this really mean to the person who doesn’t know about (x)html code and really doesn’t want to learn it, but does want to make changes to their own websites. Absolutely nothing, right? It just went over your head and now you are at a loss (oh how well I know that feeling!). Well, let me show you what some of the most common selectors are, and I know that you will begin to feel more comfortable with selectors.

The first selector that you come across in all web pages is the body, next might be h1, or the p. In (x)html the code is going to look like this:

<> your web page content goes here< /body>: or, <> Your headline text goes here< /h1> ; or, <> your paragraph text goes here< /p> .

For the first example, let’s start with the body. Here is the main thing that you will likely do with this simple but important piece of code. Let’s say you want the main background color of your website to blue or #0000ff (which is the hex code for blue). It will look like this:

body {background-color: #0000ff}

OK, what does all that mean? It is saying that the “background-color”, which is the property, is going to be blue, which is the value of that property. In simple terms, it means the main background color of your website is going to blue. It is easy to change the background color of your website now just by changing the hex code (#0000ff) to a different color, say red, which would look like this: #ff0000.

Now let’s look at the selector h1:

h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22pt; font-weight: bold; text-align: center; color: #000000; background-color: #ffffff; }

Here we are defining what h1, or the text inside of our header 1 tags, is going to look like. The first line in the property is the font-family, and the value is Verdana, Arial, Helvetica, and sans-serif. So, in plain English, what we are saying is the font that we want to use for all of our h1 headers is going to be Verdana, Arial, Helvetica, or sans-serif.

You might be asking if we want the main font to be Verdana, why are we also using Arial, Helvetica, and sans-serif as fonts? The reason for this is not all computers are going to have Verdana font loaded on them. If they don’t, then the default font becomes Arial. The same thing holds true for the Arial font, which then defaults to Helvetica and, finally, to what is called a system font or screen font that all computers have on them, which is sans-serif.

Now for the next line, which is font-size: 22pt. The property is font-size and the value of that is 22pt. 22pt is the easiest to use because we all know about 10 pitch, 12 pitch, 14 pitch fonts when we are using our word processors. There are several other different ways to express the size of the font, one of which is small, medium, and large, and is much more complex than just entering the pitch size.

Next we come to the font-weight which is a real easy way to bold all of the text in your header without using any other code to do it. Following along with what we already know, font-weight is going to be the property and bold is going to be the value of the font weight. If you choose not to bold all the text, all you need to do is change the word “bold” to “normal” and you are all done.

The text-align is just that: by changing the word “center” to “left”, you can align your text to the left margin instead of centering it all. I am sure that you are beginning to get the hang of this by now, but just follow through, “text-align” is the property and “center” is the value.

The color of your font or text is going to be the hex code color #000000, or black. If you want to change the color of the font, find the hex code for the color that you want it to be and replace #000000 with it.

The last one here is the background color, which is behind the header text. This background color is different from the body background color in that this color is going to be directly related just to the text in between the header tags or the h1 tags. In our example, “background-color” is the property and “#ffffff” is the value. You can change the background color to any color you like just by replacing the hex code #ffffff, which is white, with the hex color code of your choosing.

In our next article we begin with the paragraph tags and show just how easy it is to get rid of a ton out dated code.

----------
by Copyright 2006, Larry Lang