Congratulations! As you have worked through this book, you’ve been building a modern Web site with separate content and style using XHTML and CSS. And with the techniques in Chapter 8, you should have been able to customize our simple Alpaca Repo example for your own needs.
Along the way, you’ve seen how CSS works, and you have probably run into a few situations where it didn’t. If you’re anything like us, you made a typo or two while writing CSS, and it took you a little while to figure out why your page wasn’t acting the way you expected. This is completely normal; after all, CSS can be a tricky beast. In this chapter, we’ll focus on tools that you can use to troubleshoot your CSS, and then we’ll point you at some resources where you can learn more about CSS on your own.
One of the easiest ways to track down problems with your CSS is to validate it to check for errors. You validate your CSS by running it through an online tool sponsored by the W3C (the standards body for CSS and XHTML). You can find that tool at http://jigsaw.w3.org/css-validator/. When you go to that page, you have the choice of validating a Web address, uploading a CSS file to the service, or copying and pasting CSS directly into the page.
If you do, consider whether you’re validating against the proper version of CSS. The validation tool defaults to CSS 2.1, but the CSS that we checked here contains CSS3 elements, which is why some errors were reported.
Sometimes you can have valid CSS but you’re still not getting the results you would like on your pages. Oftentimes, this is because you have errors that validation tools can’t catch. For example, a capitalization typo on an ID won’t be caught by the validator—that is, the elements #mainContent and #maincontent are not the same thing but the validator won’t catch this. In cases like this, a debugging tool that runs in the browser can help.
The other is the Web Developer toolbar (not shown), which you can download from http://chrispederick.com/work/web-developer/.
Once you install the extensions into Firefox, each plug-in gives you a large suite of tools for inspecting and editing CSS.
There’s one more debugging tool that we didn’t mention in the last section, because you don’t have to install it. It’s called the Web Inspector, and it comes with recent versions of Safari. You activate it by choosing Safari > Preferences > Advanced, then click “Show Develop menu in menu bar.” Then choose Develop > Show Web Inspector. Alternately, you can right-click on the problem area and choose “Inspect Element” from the contextual menu.
The main thing that you want to do with any of these debugging tools is inspect elements on your page to see what rules affect the element. For example, we’ve selected the Home button of the Alpaca Repo site in Safari’s Web Inspector (opposite, left) and Firebug (right) to show you how each tool shows you the same information, but in slightly different ways.
Some errors you’re likely to run into:
If an element has a numeric value other than zero, the measurement unit must be specified. It also can’t contain any spaces; that is, you have to use 20px not 20 px or 20.
Check to see if you’re missing any semicolons. While they’re optional on the last declaration in a block, you do need it on all others—so it’s good practice to just always use it.
Make sure that all your quotes, parenthesis, and braces are properly closed.
You can’t be too careful about typos! There can be a big difference between body.usualStyle, body usualStyle, and body .usualStyle.
By inspecting elements that aren’t working the way you want, you can usually figure out what’s wrong, and fix the problem. If you’re still having trouble, try simplifying your buggy page. Make a standalone page that showcases the issue—that is, add the CSS to the page itself. Then, try deleting things one by one (both CSS and XHTML) and see if the problem still exists. If the problem goes away, add the bit back in that you just deleted, and try deleting something else. Eventually, you should get to the point where everything on the page either causes the problem, or is needed to demonstrate the problem.
Here are some sites that we think are good places to learn more about CSS.
CSS tutorials, info and help:
WestCiv sells a commercial product, but they also give away a lot of information as well.
Position Is Everything is a site that explains CSS bugs in modern browsers, provides demo examples of CSS behaviors, and shows how to “make it work.”
Resource Lists: These two sites are just lists of links, but they’re well-chosen.
Web Design References: Cascading Style Sheets http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html
CSS Resources from Website Tips http://websitetips.com/css/
Some useful extras:
Browser support for CSS: This tells you which browsers support which CSS features.
http://www.westciv.com/style_master/academy/browser_support/
CSS specificity: For the crazy person who wants to actually understand specificity, here’s a fairly readable description of how it’s calculated.
And lastly, css-d (aka css-discuss):????????????
Wouldn’t it be nice to have a group of knowledgeable CSS experts that you could go to and ask questions? Wouldn’t it be nice if everyone could ask them questions? Wouldn’t it be nice if everything they’d been asked for the last seven years could be searched? And wouldn’t it be nicest of all if their best tips and tricks were added to a wiki? That’s css-d.