Introduction

The styling of web documents has evolved a great deal from the early days of the Web when font tags, tables, and HTML attributes scattered everywhere were just what you had to do to make pages look good (or get that animated GIF of a flame repeating across your whole page).

The CSS Pocket Guide will teach you the building blocks of styling documents with CSS, give you an arsenal of modern development techniques, and help you navigate the ever-changing landscape of web browsers and specifications, including CSS3.

Who Should Read This Book

Anyone designing or building web pages should understand CSS. This book offers an overview of CSS and the building blocks of the language to get you going and is geared toward novice and intermediate developers.

Before reading this book, it is important to have some exposure to and understand how to read and write HTML—the markup and content that the CSS code in this book is used to style.

What You Will Learn

This book covers CSS including CSS 2.1 and parts of CSS3.

• The beginning of the book covers the building blocks of CSS and how to use those tools to create layouts with CSS.

• The book then goes on to discuss how to use CSS to style the content elements that are often placed into the parts of the layout grid you’ve just learned to build.

• The last part of the book dives deeper into specific topics such as working with different types of media or creating form layouts.

Along the way, there is also discussion of current best practices in web development and information on upcoming changes to CSS included in CSS3 and beyond.

What You Won’t Find in This Book

It is impossible to cover CSS in all its applications and in all the different ways it can be encountered in one book written by one person. Although the language is covered in detail and this book can serve as a great reference for those learning other aspects of web design and development, it does not attempt to cover any of the following in detail:

• It does not attempt to teach you what HTML is or how to write good HTML.

• It does not attempt to teach you anything about JavaScript or scripting things such as animations or Ajax. But it will make a useful reference for the CSS properties you will often manipulate with JavaScript.

• It does not attempt to teach principles of good visual or interactive design. It will, however, give you the tools to implement those designs.

• It also it does not explicitly cover CSS as applied to documents other than HTML (such as SVG).

What You Need to Follow Along

All you need is a text editor to write CSS code or review the example CSS and HTML code, ideally one with syntax highlighting such as Notepad2 for Windows or TextWrangler for Mac OS X (both are free). You’ll also need a web browser to view the results of any code you write. A visual, or WYSIWYG, editor such as Dreamweaver can also be used, provided it offers a “code” or “source” view.

The figures used to demonstrated CSS code throughout this button were all generated with actual CSS code. These full code examples, including the HTML5 documents, can be downloaded from http://www.peachpit.com/csspocketguide so you can follow along, review the examples in different browsers, or edit the examples and experiment with them.

Resources

It goes without saying that a topic at the core of web development will have a large number of great resources on the Web.

• Check out the W3C’s CSS Working Groups Current Work index of the CSS specifications. http://www.w3.org/Style/CSS/current-work

• You can also refer to the detailed browser support charts and other web development articles by Peter-Paul Koch at QuirksMode.org. http://quirksmode.org/

• The WaSP InterAct Curriculum project offers a full and ongoing curriculum for learning and teaching web development and web design including CSS. http://interact.webstandards.org/

• The Mozilla Developer Center offers a complete reference of the CSS language and is great for looking things up in a flash. https://developer.mozilla.org/en/CSS_Reference

• The Opera Developer Network offers articles, tutorials, and references for all areas of web development, including a curriculum you can walk through and teach yourself. http://dev.opera.com/

Writing CSS

Unlike a programming language such as JavaScript, there isn’t that much to the syntax of CSS and the makeup of CSS rules. But the following sections highlight some things you should know before jumping into the complexities of what the simple syntax can do.

Case Sensitivity

CSS is case insensitive. For example, the color property is equivalent to the COLOR property, and a px unit is the same as a PX or Px unit. By convention, properties and values are typically written using lowercase characters, and that is the convention followed in this book.

Parts of the code not under the control of CSS such as file paths to style sheet documents, images, element names, classes, and IDs may be case sensitive and are defined at their source. For example, the file path on one server may be case sensitive, but on another server or your local machine it may not be. For markup, elements in HTML documents are case insensitive; however, elements in XML-based documents are.

To avoid confusion or code bugs, it is best to match the case in your code regardless of whether it will be enforced.

Comments

There is only one way to write a comment in CSS—beginning with the two characters /* and ending with the same two characters reversed, */. Any text, code, or whitespace between those two is ignored.

/* this is a comment */

Whitespace

In CSS, whitespace—including space characters, tabs, and line breaks—has no meaning outside of its use as a descendent selector (Chapter 3) or as a separator for multiple values in a single declaration. Outside of those two cases, it is considered optional. It is up to you to use whitespace (or not) to format your CSS to help with the organization and readability of your code.

Quoting and Escaping Quotes

The single quote (') and double quote (") can be used interchangeably to wrap string values in CSS (though if a string starts with one, it must end with the same one).

The backslash () is the escape character in CSS. It can be used to escape a quote mark that is part of a string (or another backslash that should appear as part of the string). The backslash character can also be used to include characters via their character codes.

For some string-like references, such as with a url() reference, it is also allowable to leave off the quote marks around a string.

Keywords, such as color names, are not strings and must not be quoted.

Tools

Building web pages while wrangling browser bugs takes more than just a text editor and a browser. The following are a few categories of tools that are invaluable additions to your toolbox.

Validation Tools

Validation tools parse your HTML or CSS documents checking for conformance with the designated specification in areas such as syntax errors, missing or improperly nested HTML tags, unknown CSS properties, illegal values, or other coding problems. The W3C validation service (http://jigsaw.w3.org/css-validator/) is one commonly used validator.

As a tool, the errors a validation service can uncover may help identify where visual bugs you’re seeing in browsers could derive from. For example, it is common that a missing closing tag may cause styles to bleed out of the area you would have expected. But be careful and understand validation errors before reacting to them because some code that you want to use, such as vendor extensions for experimental CSS3 implementations, may also be reported as an error based on the validator’s settings.

Web Inspectors

Web inspectors (or DOM inspectors) are tools that allow you to view the document tree, CSS properties, and other information about a web page as it appears in your browser, often with a click on the element itself. These tools are invaluable when writing and debugging CSS code, providing real-time information about style properties and pointing out which style rules contributed to the element’s appearance.

• Internet Explorer: Starting with version 8, Internet Explorer includes Developer Tools, a set of built-in tools including the ability to inspect HTML elements and view CSS information. To launch the tools, press F12 or select Tools > Developer Tools from the menu in IE. For older versions of IE, including 6 and 7, Microsoft offers a downloadable extension called the Internet Explorer Developer Toolbar.

• Firefox: Among its other features, the Firebug extension for Firefox (http://www.getfirebug.org/) allows for viewing and editing of the document tree and style property cascade. Once installed, you can open Firebug directly or by right-clicking an element in the page and choosing Inspect Element.

• Safari: Safari on OS X and Windows comes with a built-in set of developer tools including a web inspector. These tools are disabled by default, but you can enable them from the Advanced panel inside Safari’s preferences. Once enabled, you can open it from the Develop menu or by right-clicking an element in the page and choosing Inspect Element.

• Chrome: Chrome also ships with built-in developer tools with similar features to those already mentioned. To access the tools, select View > Development > Developer Tools from the menu or right-click an element in the page and choose Inspect Element.

• Opera: Opera Dragonfly is another suite of tools for working with web documents including viewing styling information. To activate Dragonfly, select Tools > Advanced > Opera Dragonfly from the menu in Opera, or right-click an element in the page and choose Inspect Element.

Web Developer Toolbar

Chris Pederick created the Web Developer Toolbar extension (http://chrispederick.com/work/web-developer/) for Firefox and Chrome that provides some nifty features not found in standard web inspectors such as the ability to add an overlay above the document that displays the document structure or element attributes, resize your browser window to certain dimensions for testing, or submit the document directly to validation services.

(I take some pride in this tool as it is based on the toolbar I had written for the now long defunct Mozilla Suite, the browser that predated Firefox. That said, Chris deserves all the credit now because he has taken it further and supported it with much more time and energy than I had.)

Yahoo! YSlow and Google Page Speed

Yahoo! YSlow (http://developer.yahoo.com/yslow/) is a Firefox add-on geared toward analyzing and improving the performance of web sites in areas such as caching, download sizes, and speeds, as well as reducing the number of requests made to the server delivering the content and all its types of assets.

Through YSlow and its companion suite of tool, you can learn about tools to compress CSS documents; optimize server calls for CSS files, JavaScript files, and images; and perform lots of other performance tricks not covered directly in this book.

Google Page Speed (http://code.google.com/speed/page-speed/) is another Firebug add-on in a similar vein as YSlow. It can identify which CSS declarations are not being utilized by an HTML document and it can point out which of your CSS selectors are written inefficiently and why.