O'Reilly    
 Published on O'Reilly (http://oreilly.com/)
 See this if you're having trouble printing code examples


Resources: Appendix A - CSS Cookbook, Third Edition

by Christopher Schmitt
CSS Cookbook, Third Edition book cover

This excerpt is from CSS Cookbook, Third Edition.

Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.

buy button

 

 

When working with CSS, keep these two tips in mind: simplify and verify.

After you’ve crafted your CSS rules, simplify them by using only the selectors and properties you believe you need; any extras could cause some confusion down the road. Then verify the HTML, XHTML, and CSS with the help of validators as you code. Those two steps solve most problems developers encounter when working with CSS.

However, if you still run into trouble, this appendix contains some of the top references, discussion groups, and tools on the Internet to help in your CSS development.

General HTML and CSS Instruction

“A Roadmap to Standards” (http://www.mezzoblue.com/archives/2004/04/30/a_roadmap_to/index.php)

This essay by David Shea is a good introduction and pep talk for web designers who want to learn about web standards–based development.

“CSS from the Ground Up” (http://www.wpdfd.com/editorial/basics/index.html)

Web developers new to CSS will benefit from this well-paced tutorial available from Web Page Design for Designers.

“Basics of CSS Positioning” (http://www.communitymx.com/content/article.cfm?cid=3B56F&print=true)

For more information about positioning with CSS, try this tutorial by Community MX.

Floatutorial (http://css.maxdesign.com.au/floatutorial/index.htm)

Learn about floating elements with CSS in various practice coding examples provided by Max Design.

Selectutorial (http://css.maxdesign.com.au/selectutorial/index.htm)

Gain a better understanding of CSS selectors with this tutorial, also by Max Design, which also demonstrates how to use selectors to construct a three-column layout.

Design Resources

A List Apart’s “CSS Topics” (http://www.alistapart.com/topics/code/css/)

At this website, most of the articles published on the topic of CSS come in from web designers sharing their thoughts and breakthroughs with CSS-enabled design.

Layout Reservoir (http://www.bluerobot.com/web/layouts/)

This small but valuable resource from BlueRobot.com covers two- and three-column layouts.

CSS/Edge (http://www.meyerweb.com/eric/css/edge/)

Eric A. Meyer’s workshop displays some of his more advanced CSS experiments.

CSS Zen Garden (http://www.csszengarden.com/)

CSS Zen Garden showcases how web developers from all over the world restyle the same content. Surfing through several designs is great inspiration, but it’s also a fantastic way to better understand the concept of separating presentation from content.

“CSS Layout Techniques” (http://www.glish.com/css/)

This web page from Glish.com presents one of the first collections of multicolumn layouts created in CSS without the use of HTML tables.

Microformats blog (http://www.microformats.org/)

This blog defines and promotes standards for coding unique pieces of content. Check the microformats listing for methods you can use to code common data such as calendar events, contact information, or even the abbr element.

SimpleQuiz Archives (http://www.simplebits.com/bits/simplequiz/)

Web designer and author Dan Cederholm conducted a series of quizzes trying to determine the best methods for marking and styling common web development scenarios. In addition to reading the conclusion to each quiz, you can read each quiz’s comments by web designers to get a more informed opinion on coding practices.

Smashing Magazine’s CSS articles (http://www.smashingmagazine.com/category/css/)

This online magazine aggregates blog posts and online articles from web developers and designers on the Internet, and publishes summaries of their findings.

Typetester (http://typetester.maratz.com/)

This is a flexible tool that allows web developers to customize three sets of type and then generates the basic CSS for easy copying and pasting. Available features include setting the values for fonts, size, tracking, leading, letter spacing, alignments, and more.

Discussion Groups

Babble List (http://www.babblelist.com/)

This is a web design and development mailing list which I moderate. Targeting advanced web design issues, the site offers a lively exchange of information, resources, theories, and practices of designers and developers.

css-discuss.org (http://www.css-discuss.org/)

This mailing list, which is chaperoned by CSS expert Eric Meyer, author of O’Reilly’s CSS: The Definitive Guide, aims to provide practical discussion about the application of CSS.

WebDesign-L.com (http://www.webdesign-l.com/)

This mailing list has been around since 1997 and caters to almost all aspects of website building, including (but not limited to) CSS. Earnest questions are met with sage advice.

Usenet Stylesheets Newsgroup (http://news:comp.infosystems.www.authoring.stylesheets)

Founded in 1997, this unmoderated newsgroup covers the theory and application of CSS. Topics for the group can include practical applications, questions about the specification, the benefits of CSS, implementation bugs in browsers, and more.

www-style@w3.org Mail Archives (http://lists.w3.org/Archives/Public/www-style/)

Maintained by the World Wide Web Consortium (W3C), this mailing list provides a venue for discussing the theories and future of CSS. Questions about the specification or about CSS proposals are welcomed; however, discussions regarding practical applications of the technology are discouraged.

References

CSS Browser Support charts (http://westciv.com/wiki/CSS_Compatibility_Guide/)

If you run into problems developing with CSS, check the CSS support charts to determine whether there is a problem with the browser(s) you are using.

CSS filters (http://centricle.com/ref/css/filters/)

Use browser inconsistencies to your advantage. If you want to target CSS rules to a specific browser or set of browsers, refer to this comprehensive list of hacks and filters. It will tell you which CSS rules and declarations work in which browsers—or won’t work, as the case may be.

W3C’s recommended DTDs (http://www.w3.org/QA/2002/04/valid-dtd-list.html)

Assigning the right DOCTYPE to a web page helps to establish the correct manner in which browsers will render your web page and validators will check your code. On this web page is a listing of the most commonly used DOCTYPEs.

W3C’s CSS home page (http://www.w3.org/Style/CSS/)

This is the official site for CSS. At this site you can learn about the history of CSS, investigate resources and authoring tools, and read current CSS news.

CSS 2.1 specification (http://www.w3.org/TR/CSS21/)

Browser implementations of the CSS specification are sometimes a confusing mess. When tracking down how to achieve a certain look or an implementation bug, check the specification (as well as the CSS support charts).

CSS3 specification (http://www.w3.org/Style/CSS/current-work)

The forthcoming CSS3 specification is still being written. Due to the complex nature of the specification, the working draft was split into separate modules; the idea being that work that could proceed in one module could work independently of another without causing a drag on other modules. The result is that there are various aspects of CSS3 at various levels of completion, with most in Working Draft status at the time of this writing.

HTML 4.01 specification (http://www.w3.org/TR/html4/)

To make the most out of using CSS for web design, you need to create your web documents with structured markup instead of using workarounds and hacks. Furthermore, you need to mark up your documents with elements to imply an inherent presentational meaning. For example, you need to highlight important words using the em element and not the b element. If you need to change your production methods, dig into the HTML specification and get to know the elements all over again.

HTML5 specification (http://dev.w3.org/html5/spec/Overview.html)

Addressing the needs of web application development and the shortcomings of HTML4, the work of HTML5 is ongoing and does not have a timetable for being eligible for candidate recommendation anytime soon. Even with an incomplete specification, web developers can leverage some of HTML5 where applicable in modern browsers.

XHTML 1.0 specification (http://www.w3.org/TR/xhtml1/)

eXtensible HyperText Markup Language (XHTML) is a restructuring of HTML4 in XML 1.0. Although XHTML markup is stricter than that of HTML4, the benefits are simple: more logical markup, increased interoperability, and enhanced accessibility.

Tools

BrowserCam (http://www.browsercam.com/)

BrowserCam is an affordable web-based service that tests a web design in multiple browsers on numerous operating systems. At the time of this writing, a free 24-hour evaluation period is available for web developers who register on the site.

CleanCSS (http://www.cleancss.com/)

An online formatter and compression tool for long, complicated stylesheets, this free tool provides several options and allows you to export compressed CSS files, which eliminates potential character problems when copy and pasting from web browsers to code editors.

Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843)

This free tool for web developers allows quick editing, coding, and debugging of HTML, CSS, and JavaScript of the web page currently being viewed, and it is an excellent tool for debugging Ajax-based web applications. In addition, you can install a plug-in called CodeBurner (see http://tools.sitepoint.com/codeburner/) that provides HTML and CSS reference materials inside Firebug’s development environment.

IE NetRenderer (http://ipinfo.info/netrenderer/index.php)

This is a free tool that allows web developers to preview web pages as viewed in Internet Explorer. It’s also a great site for Macintosh users who don’t own a Windows machine but want to test or use virtual machine software to run Windows OS along with OS X.

SelectORacle (http://gallery.theopalgroup.com/selectoracle/)

This free service is designed to help people learn more about complex CSS selectors by translating their meaning into plain English. CSS selectors can be submitted in one of two ways. The first method is to copy and paste a CSS selector into the form. The second method is to enter either a URL of a web page with an embedded stylesheet, or a URL to an external stylesheet. The service then renders the CSS selector into easy-to-understand language.

W3C CSS Validator (http://jigsaw.w3.org/css-validator/)

This free service, provided on the W3C server, checks CSS for proper structure. You can test your markup by uploading files, entering a web address in the form, and then copying and pasting the CSS into a form field. And if you are so inclined, you can download and install the validator on your own server.

W3C HTML Validator (http://validator.w3.org/)

The W3C HTML validator is another free service from the W3C. Similar to the CSS validator, the HTML validator checks to see whether your markup conforms to web standards.

Web Developer browser extension (https://addons.mozilla.org/en-US/firefox/addon/60)

Chris Pedrick has created an indispensable extension for the popular Firefox and Mozilla browsers. Features include the ability to edit a web page’s CSS through the browser, send a web page’s code directly to a W3C validator, place an outline on block-level elements, as well as many, many other functions with a simple click of the mouse.

xScope (http://iconfactory.com/software/xscope)

xScope is a set of Mac tools designed to save you time when fine-tuning web development. Included in the set is my favorite tool, Dimensions, which determines the distances between objects immediately; the days of taking a screenshot of your browser and opening Photoshop to measure the distance of columns or text leading are over. For Windows users, there are several, separately developed third-party Firefox extensions that replicate some of the tools featured in this package. One example is MeasureIt, an extension for displaying rulers within the browser (see https://addons.mozilla.org/en-US/firefox/addon/539).

If you enjoyed this excerpt, buy a copy of CSS Cookbook, Third Edition.

Copyright © 2009 O'Reilly Media, Inc.