What is CSS and why should you use it?
CSS stands for Cascading Style Sheets. It is a markup language used to format the “look” of web pages. This includes overall layout, text size, style, and formatting, table formatting, link properties, and more. When used correctly, CSS allows one to define the look of an entire site in one single document. If you’re a Web person who doesn’t already utilize CSS, you should be very excited right now, as it can quickly become your new best friend. Some of you, however, may be wondering…
Why would I want to use CSS? I get along so well with my <font> and <table> tags…
There are plenty of reasons to learn and use CSS. The most important reasons to use CSS, in my experience, are:
- Flexiblity – Make site-wide layout and formatting changes with a single edit.
- Reduce code bloat – Streamline the file size of your Web documents.
- Accessibility – Produce Web pages that can be used by any user, including the visually impaired.
CSS gives you flexibility for Web design and layout changes
If you ever need to modify the width of a table column or any other aspect of Web site that uses <table> and <font> tags, you can kiss your week goodbye. You’d have to go into each individual page and make the same edits over and over again until you finished the entire site. If you have software like Macromedia Dreamweaver, you might be able to lessen this headache by using templates or find/replace functions. Still, it’s not nearly as easy as using CSS. Need to change the size of your header tags or link text? No problem. Make the change once in your external CSS file and you’re free to do other things with your time.
CSS increases download speeds by decreasing code bloat
The method of using <table> tags to design Web pages is still prevalent (and necessary in certain cases), but most Web designs can be replicated in CSS without a hitch. When tables are not coded “cleanly,” or with as little code as possible, it causes a large amount of code bloat, needlessly increasing the file size of your document and increasing download time for users. I’ve seen enough HTML tables to know most people avoid properly coded colspans and rowspans like the plague, so very few tables are coded as efficiently as possible. The other primary offender here is the <font> tag. There’s nothing like a nightmarish GoLive or Dreamweaver-created Web page littered with <font> tags to drive you crazy. By using a CSS class or other declaration, you’ll be able to modify all attributes of your Web page text in a single location.
CSS is a standards-based technology built for accessibility
HTML tables cause accessibility issues for visually impaired users. I’ve had personal experience with this, as I had a visually impaired professor who was a very active (and adept) Web user. The situation goes like this. Using software like JAWS, the browser reads the text on the page to the user. On a poorly coded Web page, this sounds something like an incoherent drunk idiot when the party’s winding down. Words are all over the place, and it’s not pretty. In a CSS-based layout, the text is read top to bottom, left to right as it should be.
If you’re still not convinced that you need CSS…
CSS gives you functionality that HTML simply does not offer, such as text hover effects and customized spacing for elements like headers, paragraphs, and more. For those of you swayed by trends, Cascading Style Sheets is the future of Web design. Take a look at some of the links in the “Further Reading” section to see some amazing examples of Web sites built using CSS. Then figure out how long it would take to replicate those designs using tables, transparent pixels, and font tags. Lastly, because of the reduced code bloat, there is plenty of evidence that suggests search engines like Google, Yahoo!, and MSN prefer cleanly coded CSS documents when indexing and ranking Web pages for search engine results.
About a year ago, I only used CSS for text formatting. Now, I prefer to do entire sites using it. Even if you only use CSS for changing font sizes and colors, you’ll be far better off as a Web designer than you were when you used deprecated HTML tags.