2. The Tools of the Trade

WHILE I WOULD HAVE PREFERRED TO ATTRIBUTE this saying to Sherlock Holmes, it was Benjamin Franklin who stated, “an ounce of prevention is worth a pound of cure.” That adage is rarely as true as when it comes to troubleshooting CSS.

A STRONG REPERTOIRE OF PROPER TECHNIQUES will put you on a good footing from the start. These tools create the equivalent of a neighborhood watch, discouraging CSS felons and forestalling a significant number of potential future offenses. When the game’s under way, you’ll be ready!

Advanced Selectors and Style Declarations

Selectors pinpoint elements on the page, in order to apply styles to the elements. To build the components of your detective toolkit, we will take a closer look at styling elements with advanced selectors.

Grouping selectors

As you learned in Chapter 1, a selector can be a list of elements:

selector1, selector2, selector3 {property: value; property: value;}

This technique of having multiple selectors for a style declaration is referred to as grouping selectors. Grouping helps decrease the size of your style sheet, because instead of using the same declaration for each element, you can list them together.

For example, you could take code like this:

h1 {font-family: Verdana, sans-serif;}
h2 {font-family: Verdana, sans-serif;}
h3 {font-family: Verdana, sans-serif;}
h4 {font-family: Verdana, sans-serif;}

And condense it down to this:

h1, h2, h3, h4 {font-family: Verdana, sans-serif;}

Isn’t that better? It’s easier to read and find what you may be looking for, and it’s only one line of code instead of four!

Complex relationship selectors

The contextual selectors—pseudo-elements, pseudo-classes, and attributes—are sometimes considered advanced selectors, which I consider complex because they combine selector types. You can create ultraspecific selectors using all of the essential selectors in combination.

For example, with any of the link pseudo-classes, you can have selectors like these:

a.aboutus:link {text-decoration: none;}

#unav a.aboutus:link {

text-decoration: none;
color: #ffcc99;}

#footer ol.firstcollinks > li.highlight {font-weight: bold;}

Once you identify which element to target, you can combine multiple types of selectors to create highly specific contextual selectors that will target any element on the page like a laser.

Multiple classes to one element

Another cool technique is to apply multiple class styles to an element. Although this is not a selector itself, it is an advanced way to use class selectors.

Say you have these two style rulesets:

.leftfloat {float; left;}
.thinborder {border: 1px solid #000000;}

And say you wanted to apply them both to a single element on the page. Easy. All you have to do is refer to both styles like so:

<img src="magnifyingglass.png" class="leftfloat thinborder"
alt="magnifying glass" />

Both styles will be applied to the image.

This technique works best with styles that are fairly straightforward and widely applicable. While you are creating your page and beginning to form your styles, see which ones can be structured as simple styles so that you can stack them up via the class attribute.

Style shorthand

Now it’s time to get tricky. I introduce to you shorthand styles.

Style shorthand was created to act as a way of condensing multiple style declarations into one. Once you understand the rules for each set of shorthand properties, you will find that they are easy to use.

Thankfully, not all properties have a shorthand equivalent—that would be a lot to remember! There are only a limited number of groups of properties that take shorthand. The main ones are border, padding, margin, background, font, and list-style.

There are three points to keep in mind when using style shorthand:

1. You do not have to state all of the values, but there are certain values that you must establish in order for the style to be applied.
2. Any value that you do not provide explicitly will be filled in by the default value for that user agent (aka browser); so if you want a particular value, you absolutely need to make the value explicit—otherwise the browser will use its own value.
3. The order of the values can be important for certain properties. Some values are dependent upon the explicit declaration of other values.

Shorthand properties

Shorthand properties are extremely consistent. Again, it’s all about patterns. Once you understand the pattern for constructing shorthand styles for one set of properties, you will know what to do with the rest of them.

Margin

Have you written margin properties like this?

#localnavigation {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

Shorthand can reduce the above code to this:

#localnavigation {margin: 10px;}

“But no,” you say, “my code is much more complicated than that: I have four different values established, not just one.” As the French would say, pas de quoi!—it’s nothing! All you have to do is follow the logical syntax:

margin: margin-top margin-right margin-bottom margin-left;

In other words:

margin: 10px 5px 20px 15px;

Note the pattern here: it is like clockwork, literally. The positions follow the clockface starting with 12 o’clock, so if you can tell time, you can remember the order of the values. Some people use the mnemonic TRouBLe to remember the order, but I find the clockface image easier. Go with whatever works for you.

If you include one value, all four sides will have the same margin. With two values, the top and bottom with both have the first value, and the left and right will have the second value. If you include three values, the first value defines the top-margin, the second value defines the left- and right-margin values, and the third value defines the bottom-margin.

Padding

The padding shorthand property condenses the padding-top, padding-right, padding-bottom, and padding-left properties into one.

As with the margin shorthand property, you can establish one value for all four positions:

padding: 10px;

Or use two values, for the top/bottom and right/left positions:

padding: 5px 15px;

That’s 5px of padding on top/bottom and 15px for the right/left.

Or three values—one each for the top, the right/left, and the bottom:

padding: 10px 5px 15px;

That’s 10px of padding for the top, 5px for the right/left, and 15px for the bottom.

Or finally, four values, one for each position:

padding: 10px 5px 20px 15px;

You’ll recognize this as 10px top padding, 5px right padding, 20px bottom padding, and 15 left padding.

These order notations work for the margin property as well.

Border

You may have written CSS code that looks like this:

#maincontent {
  border-width: 1px;
  border-style: solid;
  border-color: #eaeaea;
  }

You can condense all of that code into one shorthand border style:

#maincontent {border: 1px solid #eaeaea;}

You probably gleaned the syntax from the example:

border: border-width border-style border-color;

In this case, the order of the values is not important. You could list them in any order and the style would still show up correctly. However, if you keep to this standard order, it will be easier to detect mistakes.

What if you want to establish width, style, and color for multiple borders? It can be done! Other border shorthand properties are as follows: border-top, border-right, border-bottom, border-left.

In the case of the border shorthand properties, it is good to know the default values. If you don’t declare them, the default values are as follows:

border: medium none color;

This means that if you want the width of the border to be medium, then you don’t have to declare it. Similarly, if you want the border to be the same color as the text, you don’t have to declare that. The only required value is border-style. As long as you have that one value, the style will be applied to the element.

Background

The background shorthand property can really pack a wallop, because it condenses a lot of properties into one tidy package. The background property encompasses background-attachment, background-color, background-image, background-position, and background-repeat.

Here is the syntax:

background: background-color background-image background-attachment
background-position background-repeat;

The order is unimportant, and there are no required values.

background: #aaa url(maltesefalcon.jpg) fixed 50% 50% no-repeat;

Here are the default values:

background: transparent none scroll 0 0 repeat;

In terms of the background position, it is important to know that if you declare only one of the background position values but not the second; the declared value will be the horizontal value; and the background image will be vertically centered.

Font

Much like the background property, the font property reduces a lot of information into a little space. The font shorthand property incorporates the font-style, font-family, font-variant, font-size, font-weight, and line-height.

A word to the wise: for this property to work correctly, you do need to declare both the font-size and the font-family.

Here is the syntax:

font: font-style font-variant font-weight font-size/line-height
font-family;

And an example:

p.intro {font: italic normal normal .9em/1 Palatino, serif;}

In the font shorthand property, the one value that is dependent upon another is line-height. You cannot establish the value of line-height unless you have first established the font-size, and it must come directly after font-size, separated by a /.

The default value depends on both the element and the browser, but is generally this:

font: normal normal normal 1em/1.4em serif;

Lists

Finally, we are left with list-style. The list-style shorthand property brings together the longhand list properties of list-style-image, list-style-position, and list-style-type.

Syntax:

list-style: list-style-type list-style-position list–style-image;

Example:

ul {list-style: square inside url("squaretarget.gif");}

Default:

list-style: disc outside none;

Color shorthand

I’m sure you know that you can use either color names such as red or hexadecimal numbers such as #ff0000 for color values in styles. There are additional options.

You can use the RGB number values like so:

.callout {color: rgb(255,0,0);}

Or use RGB color percentage values:

.callout {color: rgb(100%, 0%, 0%)}

However, the true gem in color notation is the three-digit hexadecimal shorthand. With this color shorthand, a color like #ffcc00 becomes #fc0.

Do you see the pattern? You can truncate the number only if the values in each R, G, and B position are the same number. Thus, a color like #fea02c cannot be represented in color shorthand, nor can #fe3399.

Shorthand troubleshooting tips

Shorthand is great, but like any part of CSS, it can lead to trouble. Here are some things to watch out for:

1. Know the default values.
   

   Remember that any value you don’t explicitly establish will take on the default value. You may actually want to use the default value. However, if you do not, be sure to provide the property value that you want applied instead.

2. Know your shorthand syntax.
   

   Use references to double-check and make sure you are using the correct values for the desired result.

3. In some cases, beware of the order of property values.
   

   The order is important when one property’s value relies on the previous establishment of another property’s value. If they are not in the proper order, the browser may ignore the declaration.

4. Establish all the values that are necessary for that particular shorthand property.
   

   Some declarations will be completely ignored if any of the required values are missing.

CSS Reset

If our goal is to start off strong from the beginning, employing a CSS reset may be one of the strongest tools in our arsenal against code gone afoul.

Wherefore art thou, reset?

Or, in modern verbiage, “Why use a CSS reset?”

Much to many a developer’s chagrin, the properties for elements are not consistent across user agents. These differences between the browsers’ default presentation styles wouldn’t be so bad if they only affected minor, infrequently used HTML entities. But the differences are evident with the most major tags and properties, such as the padding and margins for headings and paragraphs; the indentation for headings, lists, and other tags; and line-heights. Although this may not seem like much, you will find that these differences can have a strong effect on the visual rhythm and look-and-feel of a page.

In order to avoid the rendering ills that result from the variations in browsers’ style sheets, many coders explicitly reset the styles for the most common elements in their style sheets. In this way, one no longer has to fall victim to the idiosyncrasies of the various browsers, and can be more in control of how consistently the styles are rendered. In essence, a CSS reset creates a tabula rasa and paves the way for a more consistent cross-browser user experience.

To reset or not to reset, that is the question

There are benefits to employing a CSS reset. Not only can you control the margin and padding of common elements, but you can also establish the font size, weight, family, and style. You can be deliberate about each element’s presentation.

However, some argue that the reset is overkill, and that it makes them spend more time trying to get elements to show up the way they want. Some suggest that using a CSS reset focuses too much on trying to achieve pixel-perfect layouts, and that the errant styles don’t need to be cleared completely, merely overwritten with your own styles.

As a CSS detective, you need to pinpoint what and where your problems are in order to solve them. To that end, starting with a clean slate will make solving your CSS mysteries easier.

As you like it: approaches and recommendations

You’ll decide how you want to structure your CSS reset based on which properties of which elements you want to clear and reestablish.

While you could create your own CSS reset, there are many available already. I recommend finding a nice repository of them online and choosing one that fits your needs.

Here is an example of a basic, minimal CSS reset:

html, body {
  padding: 0;
  margin: 0;
  }
html {font-size: 1em;}
body {font-size: 100%;}
a img {border: 0;}

This CSS reset clears the padding and margins of the HTML and body elements, and forces a reset on the base font-size. It also removes the border from image links.

Please see the Resources section for where to find other great CSS resets.

Building a Solid Foundation

While it is easy to rush into trying to create and complete your website projects as quickly as possible, thorough planning will prevent many coding errors down the line and should be a key practice in your CSS detective approach.

Tailored HTML

You want your HTML to perfectly fit the needs of the layout, reflect the proper page semantics, and create the ideal container for the content. This kind of tailored HTML is easy to achieve if you think it through.

Plan out your page from the outside in and from the top down. Sketch out the page sections and figure out ahead of time what the semantics will be. This process starts your brain thinking right from the start about how to construct the code and what styles you will need to create.

Code your HTML first

While you may think it is more efficient to create your CSS styles while you are coding the page’s HTML, think again. Write the HTML markup first, before you create even one style declaration.

Why? Because by doing so, you’ll thoroughly understand the semantics of the document and document tree: creating styles based on relationship and context will make much more sense.

Create semantic hooks

As you know, your styles will be applied to the ids, classes, and elements you employ as selectors. The ids and classes that tie your styles to the page elements are sometimes referred to as hooks.

Base your id and class names on the semantics of the page, not on the visual aspects of the design. Why? The page semantics are based on the structure and meaning of the information on the page, and thus will stay the same. The visual layout, as well as colors and other design elements, may change with a site redesign or branding effort.

For example, if you name something redrightcolumn, but eventually the colors are changed and the column is no longer on the right, that element will be much more difficult to identify. Instead, focus on what the content is or what the content does. A better name would refer to the content of that page section—for example, favoriteslist.

Practice preventive medicine

Think of it this way: you are working to achieve “CSS Wellness.” As you know, it is better to not catch a cold at all than to try to get over one. So let’s enact some preventive measures to avoid coming down with bad cases of “divitis” and “classitis.”

The <div> tag is intended to create logical sections in the HTML document—such as the header, main body, sidebars, and footer—for both semantic and presentation purposes. One should be able to think correctly of the <div> as a division in the page. However, many developers take a good thing too far, and fall ill with divitis by creating divs that lend nothing to the meaning of the page.

When creating your HTML markup, ask yourself:

• Do I really need this <div>? What do I really want this <div> to do?

• Is this <div> about semantics or is it just for presentation?

• Is there another element already present, one with semantic meaning, to which I can assign an id?

Build your immunity

• Keep in mind the semantic meaning of block-level HTML elements, and use them appropriately when creating markup.

• Leverage block-level HTML elements instead of adding an additional <div>.

This code . . .

<div id="pagehead">
  <div class="strong">Heading</div>
</div>
<div id="subhead">
  <div class="strong">Sub Heading</div>
</div>
<div>This is the content</div>

. . . becomes this code:

<h1>Heading</h1>
<h2>Sub Heading</h2>
<p>This is the content</p>

• Assign multiple classes to one element, instead of targeting the element with an additional <div> with an id and a descendant element with a class.

No-no:

<h2>Who has a clue?</h2>
<div id="cluelist">
<ol>
  <li class="suspects">Colonel Mustard</li>
  <li class="suspects">Miss Scarlet</li>
  <li class="suspects">Professor Plum</li>
</ol>
</div>
#cluelist {font-variant: small-caps;}
li.suspects {font-style: italic;}

Yes, yes:

<h2>Who has a clue?</h2>
<ol class="cluelist suspects">
<li>Colonel Mustard</li>
<li>Miss Scarlet</li>
<li>Professor Plum</li>
</ol>
.cluelist li {font-variant: small-caps;}
.suspects li {font-style: italic;}

• Consider altering some of your design decisions if it means lightening the load of the page by removing unnecessary divs.

Classes fall prey to a similar affliction. Classitis often occurs when coders create classes for every little style instead of working with the rules of the cascade to create only styles are that are well targeted and necessary.

Build your immunity

• Understand the cascade and use it to your advantage.

Make a rule that you will only declare a property once, then be strategic and deliberate about placing that style early enough in the style sheet so that it will be properly inherited.

• Pay attention to default values of elements.

Unless you have done a style reset, there are many properties that you do not have to declare, such as font-weight: bold for any of the header tags or margin: 0; on inline elements.

• Keep selectors that you will use on multiple elements generic by not tying them to a particular tag.

You can establish some basic styles for all the style sheets that you will use all the time, such as these three for applying and clearing floats:

.left {float: left;}
.right {float: right;}
.clear {clear: both;}

Sleek CSS

At this point, your HTML should be expertly constructed to show off the assets of the content. The next step is to create CSS that completes the well-groomed and polished presentation. Challenge yourself to write the most trim and graceful CSS that you can. Some people would argue that well-written code is poetry. You may be no bard, but the tips below can guide you toward creating your own CSS masterpieces.

Know the properties and values

I’m not suggesting that you memorize all of the CSS properties and their corresponding values. However, you should know them well enough to know when something just does not look or feel right and you need to check a reference.

• Know your values, and remember default values (or have a great reference).

• Know the range of applicable units of measurement.

There is a wide range of units of measurements for length, height, and font size in CSS. Be aware of what is possible for the property and value.

• In declaration values there are no quotation marks, except when declaring a string.

The only times you may use quote marks are with strings, and with URLs, like body {background-image: url("images/fingerprintduster.jpg");}, or multiple-word font names, like #comments {font-family: Georgia, "Times New Roman", serif;}. And even in these cases, the quote marks are optional.

Use shorthand

There was a method to my madness in presenting style shorthand rules at the beginning of this chapter: using shorthand is a great way to increase the efficiency of your CSS.

When you employ shorthand, however, keep these tips in mind:

• Remember your shorthand syntax, defaults, and order when necessary.

• Use any longhand properties to override the shorthand—for example, if you want to change only one border out of four. It is easier to write two style declarations than it is to write four.

• Employ color shorthand when possible and avoid using color names.

Go with the flow

Remember, the cascade is your friend. While CSS was designed to separate presentation from content, the cascade was expressly designed to save time and effort. Sure, you could repeat declarations, but why do so when it’s unnecessary? Work with the cascade, not against it:

• Declare the styles that you want inherited at the beginning of the style sheet, and use an appropriate ancestor element.

• Create selectors using the lowest-weighted elements (see the section “Specificity,” in Chapter 1) so you can easily overwrite them later if need be.

The descendant selector, with its higher specificity, is an ideal way to target elements, and it is the most widely supported CSS selector by the popular browsers.

• Place selectors that need to override any inherited styles later in the style sheet. It is a good practice to comment them to indicate what they are overriding.

Standardized style sheets

Now that you have written fantastic HTML and have constructed streamlined CSS styles, the last step to getting all of your CSS in top shape is organizing the style sheet itself.

Why organize?

Keeping your styles organized not only makes it easier for you to scan and hit upon the styles you’re searching for, it also helps anyone else who might be looking at and even working in your code.

Tips for optimized, organized style sheets

1. Order the selectors and declarations.
   

   • Group the selectors.

   By grouping selectors, you use your style declarations only once in the document and thus avoid code bloat.

   #header a, #unav a {text-decoration: none;}

   • Indent the descendant selectors.

   By indenting descendant selectors, not only can you easily identify any given style, but also you can see the document tree hierarchy from the way the styles are listed. From this, you can leverage the cascade, as the descendant styles are listed under their ancestors.

   #unav {
     background-color: #ddd;
     border-top: 1px solid #333;
     border-bottom: 1px solid #333;
     font-weight: bold;
     text-align: right;
     }
   
     #unav ul {
       display: inline;
       }
   
     #unav ul li {
       list-style-type: none;
       display: inline;
       }

   • Alphabetize the style declarations.

   This is by far one of the most useful tips that I know. Alphabetizing the declarations by property name means you don’t have to hunt through a list of styles only to miss the one you are really looking for. If you know they are in alphabetical order, you can quickly zero in on the one you want.

   body {
     background-color: #fff;
     color: #636363;
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
     font-size: .8em;
     margin: 1px 0 0 0;
     text-align: center;
   }

2. Organize the style sheet.
   

   Now that you have your styles indented with the declarations in alphabetical order, organize the style sheet itself. Using the comment tags, create logical visual dividers. There are several ways you can divide your style sheet:

   • By section

   Start with the reset styles, then create sections by element groups, like headers, text and link styles, navigation lists, forms, comments, and additional areas; or create sections according to the way the actual page code is laid out.

   /*****Reset*****/
   /*****Basic Elements*****/
   /*****Generic Classes*****/
   /*****Basic Layout*****/

   Choose the way that makes the most sense to you, and stick with it.

   • Table of contents

   Once you have grouped your styles in your style sheet, make a table of contents at the top of the style sheet so that you or any other developer working on it will know the sequence of the sections.

   /* Table of Contents
     1. CSS Reset Styles
     2. General Styles
     3. Navigation
     4. Main Content
     5. Footer
   */

   Mark your section title so that you can treat it like a flag, and so you can do a quick search for the term and jump right to the section.

   Here are some ideas on how you can do it:

   /* footer styles */
   
   /* =Footer */
   /* ----------> Footer <-----------*/

3. Provide additional information.
   

   • Developer information

   Include the file-created date and file-last-edited date, as well as your name and email address so people can contact you with questions.

   /* stylesheet information
   File created date: 09.15.1890
   File modified date: 01.12.1976
   Developer: Agatha Christie
   Developer contact: ladymallowan(at)iampoirot(dot)com
   */

   • Color-scheme information

   This is a great way to keep track of the colors that you are using in the design when you are using hexadecimal colors. I often start with the relevant section or purpose, followed by the exact hex color number, and then a color description.

   /* styles for orientation nav colors, etc.
   home {background-color:#660099;} purple
   about us {background-color:#330099;} blue
   services {background-color:#006633;} green
   fees {background-color:#660000;} burgundy
   contact us {background-color:#cc3300;} orange
   */

4. Create multiple style sheets.
   

   Once you have your code optimized and your style sheet organized into sections, you may consider breaking your one large style sheet into multiple style sheets, especially if your single style sheet is really long and has many styles per section. Using the @import directive, you could have the first style sheet call the rest in order for the styles to be implemented.

   @import "styles/reset.css"
   @import "styles/comments.css"
   @import "styles/footer.css"

   One advantage of doing this is it makes your style sheets modular and easier to manage. A disadvantage of this practice is that you have to hunt through multiple docs for a particular style, whereas if they are all in one style sheet, you can easily find whatever you are looking for with a text search.

Intermediate CSS Troubleshooting Tips

Spelling errors will still account for a huge share of CSS coding misdemeanors, but here are some additional troubleshooting tips:

Play by the rules

1. Avoid default styles and make your selectors as specific as possible.
   

   Instead of this:

   a {text-decoration: overline;}

   Target and focus like this:

   #sponsorlinks a.topsponsor:link {text-decoration: overline;}

2. Watch for competing rules.
   

   • Rules declared multiple times in the style sheet

   Nope:

     dt {padding: 0;}

   and then at the bottom of the style sheet

     dt {padding: 10px 20px;}

   Yep:

     dt {padding: 0}

   Use the rule just once in the stylesheet, and that’s it.

   • Rules that compete by mistake

   Nah:

     <q id="hammett" class="hammett">I haven't any sort of plans for the future, but I reckon things will work out in some manner. </q>
   
     .hammett {font-family: Century; }

   and later in the style sheet

     #hammett {font: italic 12px Tahoma, sans-serif;}

   Yah-sure, you betcha:

     <q class="hammett">Thanks for the information about what we call business. </q>
   
     .hammett {font: italic 12px Tahoma, sans-serif;}

   Use it just once in the stylesheet, and that’s it.

3. Remember to close comments.
   

   This is straightforward. You will know this is the problem if a ton of styles are not being rendered on the page, and you know that you created them and they are definitely in the style sheet.

4. If using !important, make sure it always goes inside the semicolon of the declaration.
   

   Oops:

     h1, h2, h3,h4, h5, h6 {font-family: Garamond, Georgia, "Times New Roman", serif; !important}

   There ya go:

     h1, h2, h3,h4, h5, h6 {font-family: Garamond, Georgia, "Times New Roman", serif !important;}

5. Remember the naming rules for selectors.
   

   Don’t start with a number or any character other than a letter.

   Not so much:

     #23horsepower.engine {margin: 0;}

   Better:

     #commentblock {border: 1px solid #999;}

Curb your creativity

1. Watch for mismatching ids and classes.
   

   Wrong:

     <div id="gallery">
     <img src="watson.jpg" alt="Watson" class="galleryitem" />
     </div>
   
     .gallery {padding: 5px 10px;}
     #galleryitem {float: left; border: 2px dotted #ddd;}

   Right:

     <div id="gallery">
     <img src="watson.jpg" alt="Watson" class="galleryitem" />
     </div>
   
     #gallery {padding: 5px 10px;}
     .galleryitem {float: left; border: 2px dotted #ddd;}

2. Beware of using a nonexistent property.
   

   Take one:

     p.copyright {horizontal-align: center;}

   Take two:

     p.copyright {text-align: center;}

3. Steer clear of nonexistent values.
   

   Nice try, but . . . :

     img.bio {float: yes;}

   Much improved:

     img.bio {float: right;}

4. Watch out for using the incorrect value for a property.
   

   Problem:

     li.last {font-variant: italic;}

   Corrected:

     li.last {font-style: italic;}

More is not always best

1. Check for extra commas, colons, or semicolons within the style declaration, and semicolons at the end of the style declaration, after the brace.
   

   Not good:

     #booklist ol.whodunit, ol.felons, {list-style-type:: upper-roman;};

   Better:

     #booklist ol.whodunit, ol.felons {list-style-type: upper-roman;}

2. Check for extra white space, especially between a period [.] and class name or between a value number and its unit of measurement; or forgetting white space between shorthand properties.
   

   Wrong:

     . murdermystery {color: #dec;}
     #suspects {padding: 5 px 10px 15px 20px;}
     #suspects.murdermystery ol li {font: .9emHelvetica,"Trebuchet MS",sans-serif;}
     ol .murderlist {}

   Right:

     .murdermystery {color: #dec;}
     #suspects {padding: 5px 10px 15px 20px;}
     #suspects.murdermystery ol li {font: .9emHelvetica,"Trebuchet MS",sans-serif;}
     ol.murderlist {}

3. Check for multiple units of measure for one value number.
   

   Bad:

     #famousdetectives {width: 90%px;}

   Good:

     #famousdetectives {width: 90%;}