Top 10 CSS tips

 

Tip 1: CSS font shorthand rule

Instead of styling fonts with individual statements for font-size, font-family, font-weight, etc., you can use CSS shorthand to condense the font-related properties into a single line. Shorthand can transform the following CSS code:

font-size: 10px;
line-height: 15px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: arial,sans-serif;

into a single line, like so:

font: 10px/15px bold italic small-caps arial,sans-serif 

You must specify both the font-family and font-size attributes in the font shorthand property statement. Other font attributes are optional, but remember that unspecified values revert to their default settings, which may not be the effect you want.

Note: CSS includes other shorthand properties besides the font property, and all of them have the potential to condense your CSS code in a similar manner. Here’s a list of the shorthand properties:

  • Background
  • Border
  • Border-width
  • Border-style
  • Border-color
  • Font
  • List-style
  • Margin
  • Outline
  • Padding

Tip 2: Two classes together

You can assign more than one class attribute to a given markup element. For example, the following div gets its styling from both the content and product style classes:

<div class="content product">...</div> 

Note: A common misconception is that Internet Explorer doesn’t support multiple classes, which is not entirely true. Although IE does have issues with multiclass selectors in the CSS code, it has no problem with multiple class attributes applied to a markup element.

Tip 3: CSS border default value

The border shorthand property enables you to specify a border’s style, color, and width (in any order). The style attribute is required, but you can omit the color and width attributes if you want to use their default values. The default width is medium, and the default color is the same as the text color.

Note: All the shorthand properties work the same way. Any unspecified attributes revert to their default values.

Tip 4: !important (not really) ignored by IE

The tip in the evolt.org article is about appending !important to a rule declaration to allow that rule to take precedence—even if a subsequent rule declaration would normally override the earlier rule. The tip states that IE ignores !important and that Web builders can use that fact to set different style attributes for IE and other browsers by using code such as the following:

margin-top: 3.5em !important; margin-top: 2em 

Note: Tantek Celik’s rebuttal on this point is instructive. Contrary to the assertions in the evolt.org article, IE does support !important. However, the example code succeeds in setting a different margin in IE/Windows because of a problem that IE/Windows has with processing multiple declarations of a given property within the same style.

Tip 5: Image replacement technique

This tip addresses the dilemma of whether to use regular HTML markup for text and live with the limited font selection available on most visitors’ computers, or use an image of the text set in another font that produces the visual effect you desire. The image replacement technique enables you to keep the HTML text in your document (for the benefit of search engines) and replace that text with an image in the normal browser display.

Note: There are actually several variations on the basic technique of hiding a text element (usually a heading) and replacing it with an image. The evolt.org article gives one (extremely brief) example; comments on the article and Celik’s blog mention others. A proper explanation and evaluation of the various image replacement techniques is beyond the scope of a quick tip; however, I plan to write a column on this topic in the future.

Tip 6: CSS Box Model Hack alternative

The evolt.org article suggests an alternative to the Box Model Hack, which is commonly used to fix an IE rendering problem that causes some IE versions to render boxes a different size from other browsers. The tip is to add an extra nested div to your markup and style the inner and outer divs separately to achieve the effect of one box with the desired size and characteristics. The outer div sets the box size (and margin, if needed) and the inner div sets the border and padding.

Note: This is an interesting approach but, as Celik and others point out, it means cluttering the HTML with extra markup that exists solely for presentation purposes. That fact offends some semantic markup purists, but it might be acceptable to more pragmatic Web builders.

Tip 7: Center aligning a block element

This tip shows how to center a fixed-width element in the browser window. Using the auto attribute for the left and right margins will center a div or other element in most modern browsers, including IE6. For example, the following CSS code would center a 700px-wide div horizontally.

#content {
width: 700px;
margin-left:auto;
margin-right:auto;
}

If you must cater to older versions of IE, you’ll need to use another trick. You can style the body tag with the text-align:center rule, which centers any child elements of the body tag, including a content div. The problem is that it also centers all the descendents of the body tag. Fortunately, you can reverse that effect by adding a text-align: left rule to a div surrounding the page content, as shown in the following CSS code:

body {
text-align: center;
}

#content {
text-align: left;
width: 700px;
margin-left:auto;
margin-right:auto;
} 

Note: The evolt.org article used the margin shorthand property (margin: 0 auto) to set the left and right margins. However, Celik notes that the individual margin-left:auto andmargin-right:auto rules are more reliable.

Tip 8: Vertically aligning with CSS

To center a line of text vertically within a box, set the line-height to a value equal to theheight of the box. For example, the following CSS centers the text within a 30×100 box:

#button {
width: 100px;
height: 30px;
font-size: 10px;
line-height: 30px;
text-align: center;
} 

Note: I use this technique all the time. The result isn’t always perfect, but it’s usually within a pixel or two.

Tip 9: CSS positioning within a container

In addition to being able to position elements absolutely anywhere in a document, CSS enables you to position elements within a container element. To use this technique, you assign position: relative to the container element to position any element within the container relative to the container rather than relative to the page. Then, you can use position:absolute and the top, left, bottom, right properties to position an element within the container.

Note: You can often achieve the same effect by omitting the position properties and using margins to position an element within a container. Margins are better tested and supported than position:relative, so you’re probably better off using that alternative when it produces the desired results.

Tip 10: Background color running to the screen bottom

The goal is to create a vertical column with a background color that extends beyond the column content to fill the full height of the screen (or container box). However, styling a div with the appropriate background color won’t do the job because the background color stops at the bottom of the content.

To fill the column with a background color, you can add a background image to the body tag or to a container element. The image must be the correct color and width to create the column background. It’s repeated vertically as needed to fill the space. Then, you position the column content over that background. For example, the following CSS would create a full-height blue column 150-pixels wide (provided the image.gif file is the correct width and color):

body {
background: url(image.gif) 0 0 repeat-y;
}
#column {
width: 150px;
} 

Note: Using an image to create a column background is one technique that effectively works around a limitation of CSS-based page layouts. Another technique is to use a container div to create the column background. Nesting container divs adds to the page markup, but it allows you to specify column widths using relative measurements instead of being restricted to exact pixel measurements.

You may also like...