What is CSS?

What is CSS?
CSS is shorthand for Cascading Style Sheets. It is meant to eliminate or reduce inline style modifications and allows the overall look of multiple HTML pages to be altered by changing one file. This can be referred to as the theory of localization. Using a style sheet can greatly increase the efficiency with which a web site can be updated. So what is CSS? It is a method for controlling the look of a web page, including text, images, backgrounds or any element of a site, in an efficient manner.

Localization

There are three different ways to style your HTML; inline, being the most local, embedded, being the second most local, and external, being the least local. Using localization is the key to having a good layout with CSS. For example you can use an external style sheet to set the background color, font family, font size, etc. You can then use an embedded style sheet (written in top of HTML document) to change the background color of a specific page that you want to stand out more, or whatever the reason may be. You can then use inline style to go one step further and change say the font, or weight of a font for just one line by writing it in the correct area of the HTML.

Linking your HTML page to your external CSS

In order for your CSS to affect your HTML it must be properly referenced. If your style sheet is titled format.css than in the head of your html you will need to add:
<link rel="stylesheet" type="text/css" href="format.css" />
assuming the style sheet file is in the same directory as the file linking to it. The reference to the style sheet should be placed within the head tag.

The CSS document should look something along the lines of:

body {
background: #FFFFFF;
color: #80c0c0;
}

a:link { color: #ff8080; }
a:hover { color: #FF00CC;}
a:visited { color: #ff0000; }
a:active { color: #a05050; }

The part that says "body" is called a selector. The parts within the "{}" are the defining styles. In this example, the selectors that follow the body are all of the styles that are used to edit links. Leaving them how they are in the example would make every link in the entire web site look how they are described in the class. An easy way to make it so that you can change anything within a specific area is to use selectors in combination with class and ID signatures. This is how CSS is used to eliminate inline styles.

ID and Class Signatures

IDs and Classes are code written within the HTML that are written much like inline style, such as:

<div id="edit"> sample text </div>
<div class="edit"> sample text </div>

An ID should be used once in a HTML document (though many browsers are relaxed on this rule) and a class can be used multiple times. An ID would be used to reference the style of a single specific element on a page and will override the class of that object. To define an ID in your CSS you would use the following code:

#edit
a:link { color: #ff8080; }
a:hover { color: #FF00CC;}
a:visited { color: #ff0000; }
a:active { color: #a05050; }

To use a class instead of an ID you would just use a "." instead of a "#". Within the Class or ID you would write in whatever code you would use as in an inline style reference. An example of an inline style sheet follows:

<P style="font-size: 14pt; color: red">An example of inline style sheet formatting.</p>

and this is what it would look like:

An example of inline style sheet formatting.

This is only a simple fairly simple answer to the question "What is CSS?" Entire sites can be constructed with CSS instead of using tables. Other fun things can be accomplished using CSS as well, including rollover buttons, image placement, padding or borders around text or images and more. CSS is an efficient way to manage the look of your web site. If you are not using CSS already, now that you know what CSS is, it's time to start.

Posted 10.09.06
BusinessCreatorPro.com

Business Creator Pro offers easy to use web management tools. Our friendly staff can set you up with an easy to update site with a style sheet manager that allows you to create and manipulate style sheets by checking boxes and selecting from pull downs. No experience with Style sheets or HTML is needed!

Click Here to Try Business Creator Pro for free.

<< More articles in our Business Development Center