Learning CSS Makes for Better Web Sites.

The other day I was asked why I like Cascading Styles Sheets (CSS) and what makes CSS so great. Here's my answer to those questions.

The Holy Grail of CSS it to completely separate web page content from the instructions that control its look and feel. If this is achieved then it's much easier for various devices to display the web page correctly. For example the same page would display correctly on a standard web browser (Internet Explorer, FireFox, Opera, Netscape, etc.), devices used by persons with a handicap, cell phones, and yet-to-be-developed interfaces. Nor would the web site designer have to make separate web pages for some of these devices. Reality is quite different though and here in the real world, CSS does not yet do all these things. But it does have enough positive benefits to learn how it works and to incorporate it into your web pages.

There are a different ways to control how things look on a web page. For example, the color, size, and font used for a headline or the color, size, and font for a paragraph of text can be defined with in-line styles and tags. In-line means that the formatting commands for controlling the color, size, and font are mixed in with the content. This makes the source code for the page much harder to read and modify when you want to change it or fix a problem. In addition, because you're repeating the same commands over and over down the page, it makes the file size of the page get larger and larger and less efficient (slower) for those browsing your site.

As opposed to in-line styles, CSS is not repeated throughout the page. CSS can be defined in the head section, or put in a separate file and referenced from the main HTML file, or both. CSS consists of definitions of how a page component should render itself on the page. For example, you can define that a headline should be blue, 24 point, centered text and that a paragraph should be black, 12 point, justified text. Once that is defined, any normal HTML paragraph tags or headline tags would use these definitions when rendered. You can define almost all the normal HTML objects this way; background color, background image, background image position, tables, cells, images, divs, etc. This leaves your HTML code clean and much easier to read.

But Wait! Just like those Ronco TV commercials, there's more! If you have a multi-page web site and you use CSS and all your CSS definitions are in a separate file, you have one place to go to change the look and feel of all the pages in your site. Imagine if you have a 50 page site and you learn that the size of your text in all your paragraphs is too small or the wrong color to maximize sales: instead of having to edit 50 pages and change the definition of each paragraph, you simply edit the CSS file and you're done!

With CSS what do you do if you want one headline, or table, or a set of paragraphs to look different from the default? You define a class and assign that class to the object. Suppose you have a right column where you display ads; in your CSS you would define a class and give it a name such as ".rcol". You would then define the necessary items that you need: for example, ".rcol p" would be used to control how a paragraph tag was rendered. Once that class is added to the CSS file, you simply add "class=rcol" to the paragraph tag in the HTML file, or the table tag if it's in a table, or div tag if it's in a div, etc.

This is also where the cascading part of CSS happens: the default definitions cascade down into a class definition as long as the class does not contain something that overrides the default. This means that in our example, text in a paragraph tag looks different for the rcol class, but because it's the only thing we've defined for rcol, everything else would use the same styles as the rest of the page. In fact, even the default paragraph definitions for parameters other than that which we've defined in our ".rcol p" class will be used. In other words if we don't specify a font color in our ".rcol p" class and but we do define a font color in our default paragraph style, or in a container that ".rcol" is in, then ".rcol p" will be rendered with that font color.

You can also define size and positioning for objects in CSS. This is one place where we hit the real world of CSS pretty hard. Not all browsers support the size and position commands the same way. This leads to hacks that define a position and then use a command that is known, for example, to cause Internet Explorer to bail out of the CSS, after that line you use a position command that Netscape for example understands. This works because CSS uses the last definition of an object, so this technique can be used to "trick" or "hack" CSS into working across more browsers than it normally would. I don't recommend doing this. One reason is that it's messy and easy to forget why you did something. The other reason is because as browsers are updated, or new devices come online, they may not follow these unwritten and unsupported hacks and your pages are apt to be all messed up. To get around this I usually use CSS as much as I possibly can and then use tables and in-line definitions to control positioning and size. Some people will go to great lengths to use CSS for everything, even replacing all tables, but here in the real world, when your Internet business relies on your web site, your focus and objective should get the page built, functioning, and in a form that can be used reliably on as many platforms as possible, as quickly as possible.

Not all web page creation software, packages like Microsoft Front Page, Dreamweaver, or Adobe GoLive support CSS fully. You'll have to do some coding by hand. Don't get nervous, it's not all that hard. I have a course that can teach you how to get started with CSS, step by step: www.WebSiteTrainingOnline.com.

Taking the time to learn CSS and implement it in your web pages is a smart thing to do. It will be time well spent. If you have an Internet business or a business that depends on a web site, knowing how the core technologies function just makes good sense!

Until Next Time,
Fred

Get Free Updates! Enter your name and e-mail address to receive a short notice each time I make a new post. First Name: Last Name: E-Mail Address: E-Mail again: NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.

Tip Jar: Leave a Donation

Comments: 1,   TrackBacks: 1.

Posted by Fred on September 26, 2006 | Printer-Friendly

TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/7

Assigned Categories: Internet Business | Technology | Web Site Design, HTML, CSS

Related Entries:

• Can a Single Static Web Page Rank High in Google?
• 10 On-Page SEO Ranking Factors
• When Good CSS Goes Bad
• Bypassing Cross Browser Scripting Security
• Don't give a Hoot about Google Page Rank.
• Aweber Split Test JavaScript Opt In Box Formatting Fix
• Debugging JavaScript Errors