CSS stands for Cascading Style Sheets, and understanding the cascade is essential when building a modern website. Although modern browsers will still render hand-coded font and table tags, this practice is now frowned upon from an accessibility and speed point of view. Because HTML and XHTML enable you to attach multiple style sheets to a web page, which may also have embedded style sheets and inline styles, multiple rules can affect the same element, which potentially leads to conflicts. The cascade order is a set of rules that resolves such conflicts.
In this masterclass, we will build a website using style sheets to define the layout, as well as the styling of the text and images themselves. However, because some of our content will be positioned inside a shaded box, while the rest will be on the plain white background of the standard page, not all of our default stylings will work. We will therefore tweak our style sheets to recognise not only the content, but also where it is positioned, so that it can apply a different set of styles to content inside the box from the content on the plain page.
You could, of course, define entirely new styles for each element of your page that takes into account its positioning, so set up one style for text on the plain background, and another for text that has been shifted to the right and positioned within a box. But this would mean manually applying the style to each element.
Putting in additional styling definitions to each of our style sheet entries that are determined by the container in which they are held, as we do in Steps 9 and 10, means we can re-use the basic elements of each one, and they will be inherited by the reworked styles in our navigation box.
W3C site validationAlthough print designers do not think twice about using various pieces of software to ensure their work is fine before it is sent to the printers, web designers rarely do the same before uploading it. As soon as someone mentions validating web pages, some designers get all snooty, stating that they prefer to stick to the important stuff - the visual design - and ignore the elements they consider geeky. However, validation is an essential part of creating a website. If pages validate, they are more likely to work accurately across a range of browsers. What's more, proprietary elements will not be included, and they are more likely to be future proof, thereby breaking the build/break/rebuild cycle when new browsers are released.
The W3C website at www.w3.org provides a number of useful tools for checking your web pages. The CSS validator (jigsaw.w3.org/css-validator) enables you to test online or offline files, and it flags errors (which must be fixed to create a valid document) and lists warnings (suggestions that tend to improve your CSS). The mark-up validation service (validator.w3.org) works in a similar way, often flagging errors in the code that would lead to your site not working in the way you intended. The W3C suite also contains a link checker, which checks whether links are intact and that they are accessible to those with disabilities.
Some web design applications have similar tools, but we recommend you use the W3C services for your style sheets and main web page templates, as applications rapidly age and the online services are kept up to date in terms of the latest standards.
Styling linksMany designers aren't clear on the difference between the a and a:link selectors when styling links. The former styles all anchor elements (links and fragment identifiers), while the latter styles unvisited links only. As such, if you omit the a selector in your style sheet, you must define a:link, a:visted, a:hover and a:active, or they'll display in their default states, such as purple for visited links.
Author: Craig Gannell
Smarter sites with style sheets