2) Faster Loading: Your HTML pages will load faster due to cleaner code. All of the extraneous coding will be in a style sheet, leaving less clutter and faster downloading of the site.

So now that you've seen a few of the "benes" to style sheets, let's learn more about them. Let's clarify up front that while both Netscape and Internet Explorer both support CSS from version 4.0 and higher, they don't exactly see eye to eye on CSS and interpret some style properties differently. You'll want to test your pages in both browsers to check and correct any inconsistencies.

So what can you control with CSS? Things like paragraphs < P >, Headings < H1 >< H2 >< H3 >, borders, table layouts, Fonts and font colors, text alignment, pixel size, line height, letter spacing, word spacing, font weights, page margins, and even background images; and the way they work is a big improvement over just plain old HTML. Are you beginning to see the possibilities and just how powerful this can be?

There are three ways to use CSS:

1) Inline: The CSS tags are applied to the web page itself, to any body element you choose. This is not the best method, as you'll have to find each incidence in the web site in order to make changes in the future. Example of this:

(remove the periods before and after the span tag)

.Text Here . In the example above the text would be highlighted yellow.

2) Embedded: The actual CSS code is part of the HTML page placed between the < HEAD > tags on each page. Again, placing the tags inside the pages defeats the convenience of CSS and being able to make global site changes from one document, but some do like to use this method.

Example of embedded:

.< HEAD > < STYLE TYPE= "text/css" > < !--> H2 {font-size:small} < /STYLE > < /HEAD >.

3) Linked: In my opinion, the best method to use. You place a link to the CSS between the tags on your web pages. The link looks like this:

< Link Rel="stylesheet" Type="text/css" Href=style.css >

The style sheet is a separate text document that is saved with a .css extension like this: style.css.

So now that you know your three options for using CSS, how do you write the code? Every style sheet rule starts with a selector followed by braces. A selector is any part of HTML coding like P, Font, Body, etc.

Here's what it looks like in action:

.P {font-size: 12pt}.

The P above is the selector and the font specification between the braces is the property. This code says that all paragraphs will be 12 pt font in size.

A rule can always have multiple properties. Semicolons separate multiple properties, commas are used to separate multiple selectors.

Example:

.P { color: black; background-color:white; font-size=12pt }.

This code says you want all paragraphs black with a white background and a 12 pt font. (Why anyone would want that is beyond me; it's just an example so go with it.)

You can always group more than one selector tag like this if you want them all to look the same.

TD,H2,H1 { color: Red; background-color:pink }

This would make all table cells, and heading 1 and 2 tags red with a pink background. Attractive don't you think? Again, this is an exaggeration to prove a point (even if it is gaudy).

Selectors are not case sensitive, so "P" is the same as "p."

H2 { color: blue } this would make all heading 2 tags blue in color.

As you can see from these examples, CSS is not that hard to pick up and can really give you more control over your website's appearance. For further information, check out some of these informative sites and you'll be a CSS pro in no time at all:

http://www.InternetBrothers.com/CSS_Basics.htm
http://www.users.f2s.com/faq/cssbasic.php3
http://www.freewebmastertips.com/tutorials/css
http://www.builder.cnet.com/webbuilding/pages/authoring/CSSCenter/

There are also software programs you can download that will make the creation of CSS so much easier:

TopStyle http://www.bradsoft.com/topstyle/index.asp
Dutch's CSS http://www.dutchthewiz.com/styles/Default.asp

In Part 2 of our discussion of CSS, we'll discuss some fun things you can do with styles that will dress up your website and have you looking like a pro in no time at all.

Merle

Merle has been "working" the Net for over 8 years and has a Special Gift just for you. Download my FREE E-book "50 Easy Ways to Promote Your Website". Get your copy now at http://www.WebSiteTrafficPlan.com

You have permission to publish this article electronically or in print, free of charge, as long as the bylines are included.

• Finding A Web Designer


• Top 20 Tips to Make your Website Successful


• Six Steps to Get Your Website Working For You


• Professional Web Design Services


• The Small Business Websites Changing Face


• Has Your Site Been Left in the Dust?


• A Business Case For Accessible Website Design


• Business Website Marketing - Dont Make These Ten Mistakes!


• The Two Keys To Web Success


• Sensational Web Design Advice