As good as tables and frames are for improving the look of your Web pages, Cascading Style Sheets (CSS) are equally as important. A simple definition is that CSS is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. CSS gives you, the creator more control over the appearance of your Web page. CSS is an excellent addition to plain HTML. With plain HTML you manually define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will have to work your way through the entire document and change it whenever necessary.
With CSS you define the colors and sizes in “styles.” Then, as you write your documents, you refer to the styles. Therefore if you change a certain style it will change the look of your entire site. Another advantage is that CSS offers much more detailed attributes than plain HTML for defi ning the look and feel of your site. Finally, CSS can be written so you will only need to download it once – in the external style sheet document. When surfing the rest of your site, the CSS will be cached on the users computer, and therefore speed up the loading time.
But CSS is not just a method for controlling the look your Web site or just a tool for stylizing text. CSS is the “gold standard” tool for the design and structure of a Web site. Let’s get a bird’s eye view of the power CSS can provide through a properly built HTML site.
CSS Fundamentals
To start, let’s strip all design away from a Web site and look at raw site as a Web search engine (Web crawler) does: no graphics, no color, no java, and absolutely no Flash. The problem with many sites is that the most crucial information is most commonly conveyed as graphics (i.e. Logos, product names, etc.). What’s the reason for this? Plain HTML text just doesn’t look that sexy. Type looks far better stylized in a graphic, and yet even more fun in Flash! But this is all in vain if you don’t have enough scannable information, which Web crawlers can read. Lynx is a great tool for viewing a site via an Internet search engine (Google, Yahoo, etc.). If you don’t see what you want to with Lynx, then a Web crawler certainly won’t either. But this issue also extends beyond just catering to Web crawlers.
Many users viewing sites with their PDA, or dial-up users who are frustrated with loading graphics may opt to set their browser preferences to not load graphics in order to speed page load times. If your site doesn’t properly describe all of the necessary and important information using text and standard HTML tags, the end user may not “get the message.” Secondly, your information should be properly described and organized using HTML tags. The HTML code should be setup to allow the common tags (i.e. H1, H2, etc) to properly categorize what is the most important information on the page. A Web crawler will give more importance to information contained in tags versus tags. So imagine if all of your page’s information contains tags.
What is the most important info? It is impossible to tell! I’m sure you’re asking what all of this has to do with CSS. The answer is: A properly built and structured HTML page is necessary for creating an efficient and powerful style sheet. This doesn’t mean that additional HTML methods for page content organization aren’t allowed. With CSS, tags are your best friend, and a very necessary tool for setting up your content to be manipulated with CSS in order to achieve your desired look. Specific Examples This does not mean, however, that every bit of content that you want designed needs to be enclosed in tags. Visit: www.westciv.com – a site entirely stylized using CSS. For starters, notice the navigation buttons; examine the page source code. You will discover that these navigation buttons are simply built using and structure.
However, those navigation buttons don’t look anything like an unorganized list. They are specifically placed buttons with active rollover attributes, and best of all, perfectly readable by any Web crawler or user not loading images. Delve through the HTML code of this site to see how it is built and especially explore the CSS file that is referenced from the page (www.westciv.com/screen.css ). Take note how each of the different areas of the page are organized (the navigation, content, etc). Within the CSS, using IDs and CLASSes, the placement and look can be completely controlled using the CSS. Now try viewing the site using a text browser, such as Lynx. Notice that all of the information is still there, and still very well organized…just not as visually appealing.
But for all that westciv.com has going for it, they actually failed to address one issue. CSS standardizes how the page content looks between different browsers. The very unfortunate reality is Microsoft’s non-adherence to W3’s standards for application and execution of the defi ned rules that most other browsers (such as Mozilla, Safari, and even Netscape) neatly adhere to. To circumvent these differences between browsers and achieve consistency involves a little bit of trickery and exploring bugs with Microsoft Internet Explorer. A great source for the specifics on what to setup and how to apply can be found in Bulletproof Web Design by Dan Cedarholm, published by New Riders Press.
This is an excellent book that very thoroughly covers CSS for design along with addressing the issues discussed in this article. It goes in great detail on how to design sites that achieve the same look as many highly regarded and very attractive sites utilizing CSS, greatly simplifying the coding required and making site expansion or modifi cation incredibly easy.
For a good example of how CSS can improve your Web site, go to the Riverside County Law Library at: www.lawlibrary.co.riverside.ca.us/. Cascading Style Sheets (CSS) have the ability and power to do the same thing as complicated HTML or javascripts, but with much less coding and hassle. Also, where normal HTML coding is not cross compatible between different browsers (i.e. IE, Netscape, Opera, Firefox), CSS is recognized by all browsers. Recently, their Web master, Bret Christensen, discovered a CSS that acts as a mouseover but changes the color of the links. Instead of creating different images, he just inserted the 8-line CSS code for a nifty addition that is compatible with
all browsers.
On a personal note, CSS quite literally saves one’s life and sanity. When Bret finished the coding for all his pages, he did a quick check and noted that when he changed the font size, his Web pages just freaked out. By adding a simple CSS in the , he was able to avoid time consuming modifications to ensure cross compatibility between browsers. The only reason not to use CSS in your design is not knowing how! For excellent online tutorials to better understand CSS and its capabilities, go to: www.htmlgoodies.com/beyond/css/index.php, www.w3schools.com/css/ and www3.org/Style/CSS/learning. For more background on CSS style sheets, go to: www.w3.org/Style/ and www.sitepoint.com/books/css1/.
CSS Summary
To review, here are some advantages and reasons to learn CSS:
-
Write faster-loading, dramatically smaller pages
-
Speed up site maintenance by separating the content from the layout
-
Write device-independent pages that will work on everything froma PC to an Internet-enabled refrigerator
-
Write search-engine friendly pages that can actually be understood by search-engine crawlers.
-
Write more accessible code, which is now a legal requirement in some countries
Again, if you are a novice with CSS,I strongly recommend Bulletproof Web Design by Dan Cedarholm as a logical place to get started as well as giving you good ideas and background on CSS.
