Someone asked me recently why I liked Cascading Styles Sheets (CSS) and what makes CSS so great. The answer only makes sense if you know what CSS is.
The Holy Grail of CSS it to separate the content of a web page from the instructions that control what it looks like. This makes it much easier for various devices to display the web page correctly. The same page would display correctly on all standard web browsers (Internet Explorer, FireFox, Opera, Netscape, etc.), and devices used by persons with a handicap, cell phones, other devices, and yet-to-be-developed interfaces.
The web site designer would not have to make separate pages for these devices. However, reality is different and here in the real world CSS does not do all these things. It does have enough positive points to make it worthwhile to learn and incorporate it into your web pages.
There are multiple ways to control how something looks on a web page. The color, size, and font used for a headline or for a paragraph of text can be defined with in-line styles and tags.
The term In-line means that the commands for controlling the color, size, and font are mixed in with the content. This makes the source code for the page cluttered and hard to read and edit when you want to update it or fix something. Also, because you’re repeating the same commands over and over throughout the page, the file size of the page gets larger and hence slower for those browsing your site.
CSS is not repeated throughout the page. CSS can be defined in the head section of the HTML page, or put in a separate file and referenced from the HTML page, or you can even do both. CSS consists of definitions of how a page component should look on the page or device. For example, you can define that a headline should be red, 26 point, right aligned text and that a paragraph should be black, 10 point, left aligned text. Any normal HTML paragraph tags or headline tags would use these definitions when rendered.
You can define pretty much all the normal HTML objects this way; background color, background image, background image position, tables, cells, images, divs, etc. This removes the clutter from your HTML code and makes it much easier to read. But wait, there’s more! If you have a web site with more than one page and you use CSS, and, you put all your CSS definitions in a separate file, you have only one place to go to change the look and feel of all the pages in your site. If you have a 50 page site and you learn that the size of your text is too small or you used the wrong color to maximize sales: instead of having to edit 50 pages and change the definition of each paragraph tag, 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. If 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 is done in the CSS file, you simply add “class=rcol” to the paragraph tag, 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 defination 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.
You can also define sizes and positions in CSS. Not all browsers will respect the size and position commands in the same way. This leads to hacks where you define a position and then use a command that is known to cause one browser, Internet Explorer for example, to stop reading the CSS code, after that line you would use a position command that Netscape, for example, understands. This technique works because CSS uses the last definition of an object.
I don’t recommend doing this for two reasons: it’s messy and ugly and easy to forget why you did whatever hack you found that worked. The other reason is that as browsers are updated and/or new devices come online, they may not respect these same unsupported tricks and you’ll end up with pages that are all messed up. To get around this I use CSS as much as possible and then use tables and in-line definitions to control positioning and sizes. Some developers will go to great lengths to use CSS for everything, even replacing tables, I don’t. Your focus should be on getting the page built, functioning, and in a form that can be rendered reliably on as many platforms as possible.
Not all web page creation software, packages like Microsoft Front Page, or 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, just follow the link at the end of this article.
Take the time to learn and understand CSS. Implement it in your web pages. It will be time well spent.
Tag:
Add to 
Bookmark murdok:
Learn how to make web sites at
www.WebSiteTrainingOnline.com. Created by Fred Black.
