HTML Utopia: Designing Without Tables Using CSS, Chapter 3: Digging Below The Surface

This chapter completes our look at the “mechanics” of CSS: the background you need to have to work with the technology. It covers six major topics:

1. quick review of the three methods for assigning CSS properties to HTML documents

2. use of shorthand properties to group values for a related set of properties in a single statement

3. workings of the inheritance mechanism in style sheets

4. structure of a style, including variations on the use of selectors for determining with great precision exactly what is affected by a style

5. units and values that can appear in styles to express sizes, locations, and other properties, and how they are used

6. CSS comments, which can be used to place human-readable notes in your CSS code

Applying CSS to HTML Documents

In Chapter 1, I introduced the three methods for applying style sheet properties to HTML documents. I will briefly review them here to jog your memory.

Inline styles: We can use the style attribute, which is available for the vast majority of HTML elements, to directly assign CSS properties to HTML elements.

<h1 style="font-family: 'Comic Sans'; color: blue;">
Welcome</h1>

This method is best reserved for when you want to try out quickly one or more CSS properties to see how they affect an element. You should never use this method in a practical Web site, as it misses almost every advantage that CSS has to offer.

Embedded styles: We can use the <style> tag in the head portion of any HTML document to declare CSS rules that apply to the elements of the page.

<style type="text/css">
<!--
h1, h2 {
color: green;
}
h3 {
color: blue;
}
-->
</style>

This form of CSS offers many advantages over inline styles, but is still not as flexible or powerful as external styles see below). I recommend you only use embedded styles when you are certain the styles you are creating will only be useful in the current page. Even then, the separation of code offered by external styles can make them a preferable option, but embedded styles can often be more convenient for quick-and-dirty, single-page work.

External styles: We can use a <link> tag in the head portion of any HTML document to apply a set of CSS rules in an external file to the elements of the page.

<link rel="stylesheet" type="text/css" href="mystyles.css" />

The recommended method for applying CSS to HTML, external styles offer the full range of performance and productivity advantages that CSS can provide.

Using Shorthand Properties

Most property names take a single item as a value. When you define a property with a collection of related values (e.g. a list of fonts for the font-family property), the values are separated from one another by commas and, if any of the values include embedded white space or reserved characters such as colons, they may need to be enclosed in quotation marks.

In addition, there is a special set of properties called shorthand properties. Such properties let you use a single property declaration to assign values to a number of related properties. This sounds more complicated than it is.

The best-known shorthand property is font. CSS beginners are usually accustomed to defining font properties one by one:

h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
}

But CSS provides a shorthand property, font, that allows this same rule to be defined much more succinctly:

h1 {
font: bold 12pt/14pt Helvetica;
}

All shorthand properties are identified as such in Appendix C.