Using Browser-specific Prefixes for CSS3 Properties

At the time it was introduced, IE 6 was considered an excellent browser, but it had some terrible bugs that continued to frustrate designers more than 10 years after its release. To avoid a similar situation with CSS3, browser makers have decided to prefix the names of new or experimental properties with the browser-specific identifiers listed in Table 1-1.

For example, when creating a CSS gradient, you need to use three browser-specific prefixes in addition to the standard property like this:

div {
   background-image: -moz-linear-gradient(#C24704, #FFEB79);
   background-image: -o-linear-gradient(#C24704, #FFEB79);
   background-image: -webkit-linear-gradient(#C24704, #FFEB79);
   background-image: linear-gradient(#C24704, #FFEB79);
}

This might look like a waste of time and effort because the values for the browser-specific versions are identical to the standard property. However, some browsers implemented CSS3 gradients and flexible box layout before the specifications stabilized, and they used different syntax to define the values. Using prefixes like this ensures that incorrect syntax in one browser doesn’t affect the way your pages look in other browsers. As noted earlier, browsers ignore properties that they don’t recognize. So, Firefox ignores properties prefixed with -ms-, -o-, and -webkit-. The other browsers do likewise, applying only their own prefix. By placing the version without a prefix last, the normal rules of the cascade ensure that all browsers implement the standard property as soon as it’s supported.

The CSS3 support tables at caniuse.com (see Figure 1-2) indicate which properties and browser versions require these browser-specific prefixes.

Formatting CSS for Ease of Maintenance

Browsers don’t care how you format your style rules. As long as you separate each property from its value by a colon, put a semicolon after the value, and surround declaration blocks with curly braces, the browser ignores any whitespace in your style sheet. However, a consistent layout makes your CSS easier to maintain.

Figure 1-4 uses whitespace to make the rule easier to read, but the following is just as valid:

p{margin-left:40px;}

Spreading everything out even more like this is also acceptable:

p {
    margin-left : 40px ;
}

However, the following will not work because spaces are not permitted in property names or values:

p {
    margin - left : 40 px;
}

Adding Comments to Your CSS

Style sheets can run to hundreds of lines, so it’s often a good idea to add comments to your style sheets to remind you what a particular rule or set of rules is for. Anything between /* and */ is treated as a comment in CSS and is ignored by the browser. For example:

/* This is a CSS comment */

Comments can be spread over more than one line like this:

/* This is a CSS comment that is spread over multiple lines.
   The browser ignores everything until the end of this line. */

Comment tags can also be used to disable part of your CSS temporarily. This is a useful technique when experimenting with new ideas or troubleshooting problems. Just put the opening /* and closing */ comment tags around the section that you want to disable. You can disable a single declaration or a whole section at a time. For example, this disables the color and background-color properties in the following rule:

body {
    font-family: Arial, Helvetica, sans-serif;
    /* color: #000;
    background-color: #FFF; */
}

Just remove the comment tags to restore the rules.

Using External Style Sheets

This is the most common and effective way of using CSS. The styles in external style sheets affect all pages to which they’re linked. Typically an external style sheet is used for an entire site or subsection of a site, making it easy to update multiple pages by editing only one file. What’s more, the browser caches the style sheets, so they need to be downloaded only once regardless of how many pages are viewed in your site. This speeds up the display of subsequent pages and reduces bandwidth usage. You can link more than one style sheet to a page.

Create your style rules in a separate file, and save the file with the file name extension .css. An external style sheet can be anywhere within your website, but the normal practice is to put all style sheets in a dedicated folder called styles or css.

You attach an external style sheet in the <head> section of your web page using a <link> tag or a CSS @import rule. A <link> tag looks like this:

<link href="css/basic.css" rel="stylesheet">

In HTML5, the <link> tag requires two attributes:

• href This is the path to the external style sheet.
• rel This tells the browser that the file is a style sheet. Note that the value stylesheet is written as one word. This attribute also accepts the value alternate stylesheet, but it’s of little practical value because browsers give no obvious indication of a choice of styles, and the user needs to select the alternate styles manually on each page.

To validate in HTML 4.01 and XHTML 1.0, you also need to add type="text/css" in a <link> tag. The type attribute was dropped in HTML5 because CSS is the only type of style sheet used in web pages.

If you’re using an HTML editor, such as Dreamweaver or Expression Web, the <link> tag is created automatically when you select the option to attach a style sheet.

The alternative to using a <link> tag is to use a CSS @import rule. This technique was frequently used in the past to hide styles from older browsers that didn’t support @import. All current browsers now support @import, so there’s no real advantage in using it to link a style sheet directly to a web page. However, I have included it here so you know what it’s for if you come across it in an existing site. The @import rule goes inside an HTML <style> block in the <head> of the page like this:

<style>
@import url(css/basic.css);
</style>

The location of the style sheet is specified by putting it between the parentheses of url(). The path to the style sheet can optionally be enclosed in quotes.

The main purpose of @import is to import styles from one style sheet into another. This can be useful when you organize your rules in several style sheets. Instead of linking each style sheet separately to your web pages, you can link just one, which then imports the rules from the other style sheets. If you do this, the @import rule must come before any other style rules in the external style sheet. Also, because it’s in an external style sheet, you don’t wrap it in an HTML <style> block. The following code shows how you might import rules into one external style sheet from another:

@import url(another.css);
/* Other style rules */
body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    background-color: #FFF;
}

Using a <style> Block

Using an HTML <style> block limits the style rules to the current page, so this technique should not be used for styles that will be applied to multiple pages. One exception is when you’re planning your site’s design. Many designers prefer to work in a single page to refine their ideas before moving the styles to an external style sheet. Because they’re embedded in the page, these are known as embedded styles.

To create a <style> block, you write the style rules in exactly the same way as in an external style sheet, and wrap them in a pair of HTML <style> tags. For valid HTML 4.01 and XHTML 1.0, the opening tag must contain type="text/css" like this:

<style type="text/css">
/* Style definitions go here */
</style>

You can omit type="text/css" from the opening tag in HTML5.

In HTML 4.01 and XHTML 1.0, a <style> block can only be in the <head> of the page. HTML5 relaxes this restriction, and introduces the concept of scoped styles in <style> blocks in the body of a page. A scoped <style> block in HTML5 applies highly localized styles to the current element and all the element’s children (other elements nested inside it).

The idea of allowing scoped styles inside the body of the page is controversial because it violates the principle of separating content from presentation. However, one scenario where scoped styles could be useful is with prestyled components or widgets, such as calendars or date-pickers that you want to drop into a page without needing to update the site’s main style sheet.

When using scoped styles, the <style> block must come before everything else inside the HTML element to which the styles apply. The opening <style> tag requires the scoped attribute like this:

<div class="calendar">
<style scoped>
/* These styles apply only to the calendar widget */
table {
    font-size: 11px;
    background-color: teal;
}
</style>
    <table>
        <tr>. . . </tr>
    </table>
</div>

Applying a Style Directly to an HTML Element

This goes in the opening tag of an HTML element, so it applies to that element alone. This is known as creating an inline style and should be avoided because it’s the least efficient way to apply CSS. As with all rules, there is an exception: some email programs, notably Microsoft Outlook, don’t understand style rules unless they’re applied this way.

Inline styles use the same properties and values as CSS rules that you put in an external style sheet or a <style> block. However, you don’t need a selector (the HTML tag itself acts as the selector), and the curly braces are replaced by quotes. For example, you might create the following style rule for <h1> tags:

h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: #900;
}

The equivalent inline style looks like this:

<h1 style="font-family: Arial, Helvetica, sans-serif; color: #900;">Heading with an Inline Style</h1>