Cascade Style Sheet Basics

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:

Selector
Property
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:

< body> your web page content goes here< /body>: or, < h1> Your headline text goes here< /h1> ; or, < p> 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.

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...
The Low Down on Cascading Style Sheets
CSS has been around for more than 10 years already beginning in its development in 1997 but it seems it has been in the public consciousness for only a relatively short time. The reason for this is because it wasnt until the year 2000 that many web browsers began...
How to Use Tip Sheets to Promote Your Business
The goal of marketing is to make your prospect comfortable enough to say yes to working with you. But while one prospect may need a fancy brochure, another may not be comfortable unless he meets with you. Underneath it all, your prospects just want to trust you. Use tips to gain that trust. Don....
Visual Hierarchy
Hierarchy. Creating website navigation, dear friends, is all about establishing hierarchy. This tutorial will teach you how it
Aligning Elements
Alignment is another way of creating associations between visual elements, which help users quickly understand the relationships of objects on a page. Alignment works by visually associating a number of elements...
CSS Link Specificity
Love Hate is how I taught myself to remember the order. The acronym for the order (LVHA) just wasnt terribly easy to remember on its own. It didnt spell anything, or really give a sensical meaning to me. But Love Hate works. So what is LVHA?
How to create a structured and easy to modify website using CSS
Let us suppose a scenario where your website, having 10 html pages, requires the modification in the way the text looks... color, font or size...
How To Design Your Web Site With CSS
Cascading Style Sheets (CSS) allows you to create fast loading pages, increase your search engine rankings, and modify your whole site with one style sheet. So why don?t more people use them? This is because they got so used to html design and are afraid or too lazy to upgrade their skills...
Containment Explained
Containment is the effect where one or more elements is shown as part of a group or category, through a visual mechanism. There are two variations of mechanism: strict encapsulation, where the element is totally contained within a box; and softer containment...
Catalog Printing Methods
We cannot deny the fact that catalog printing is now a soaring industry. Nowadays, catalogs are considered one of the useful tools in advertising and marketing. It can be used to give information to customers and to show pictures of products that can be purchased...