Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing With Code: CSS Tips and Tricks to Speed Your Workflow

Last updated Oct 17, 2003.

By Kris Hadlock

I use CSS every day and, in the process, have come up with several shortcuts and techniques that help me get my work done faster and easier. In this article, I’m passing along a couple of my favorite shortcuts, tips on how to easily center your layout, and techniques for getting your content to look just as you intend it to look, which is sometimes easier said than done.

Mastering CSS Basics

In order to get started and successfully test any of the tips or tricks in this column, you’ll need to understand the basics of how to add and write CSS in your document. To add CSS to the document in this tutorial, we’ll need to link to an external CSS file.

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

Or, we could simply add the CSS to style tags at the top of the document.

<style type="text/css">
</style>

As a best practice, developers should link to an external file because we can then reuse the same CSS file across entire Web sites without having to copy styles from one file to another. In this example, however, I’m not following that best practice because each of the samples uses different CSS.

When we’re ready to add the CSS classes that will define our HTML elements’ appearance, we need to provide the elements with an id or class name. If we use an id to define our elements, we’ll need to start our classes with a #, such as:

#my_classname
{

}

If we use a class to define our elements, we’ll need to use a dot syntax, such as:

.my_classname
{

}

That's it, now we’re ready to move forward to the exciting parts.

100% Height

If you’re familiar with table layouts, getting your content to display at 100% height was as simple as adding a height="100%" to the table element. With CSS this is a bit trickier, but it makes a lot of sense once you understand it. I’ll start by saying that it’s all based on the cascading of the stylesheet. In order to have any HTML elements with 100% height, for example, we must set the height of the HTML and body elements to 100%. Here is an example:

html, body
{
  height: 100%;
  margin: 0px;
}

I’ve also added a 0px margin. This eliminates the space around our document, which appears by default and happens to add scrollbars to our page when we use 100% height. With this code in place we can set nested elements to 100% as well, but they won’t accept the height unless ALL of the parents are set to a height of 100%. Below is a working example of the source code:

<html>
<head>
<title>100% height</title>
<style type="text/css">

html, body
{
	height: 100%;
	margin: 0px;
}

.content
{
	height: 100%;
	border: solid 1px #333;
}

.leftColumn
{
	float: left;
	height: 100%;
	border-right: solid 1px #333;
	background-color: #ccc;
}

.rightColumn
{
	float: left;
	height: 100%;
}

</style>
</head>

<body>

<div class="content">
	<div class="leftColumn">Left Column</div>

	<div class="rightColumn">Right Column</div>
</div>

</body>
</html>

You can take a look at a working example here. I’ve added some borders and a background color so you can see how it affects the layout. Now, if we were to alter the content class by removing the height: 100% code, all of the nested elements within the content div would be unable to achieve 100% page height. On the other hand, if we set the height of the content class to 500px, the nested elements with 100% height would take on 100% height of the content element. You can take a look at a working example here.

Padding Elements With Negative Margins

When you add padding to the left or right side of an element, overlapping elements or columns are stacked as rows rather than sitting next to one another. Thankfully, there is a work-around: When you add padding to one side of an element, subtract the same amount from the margin on the other side of the element. Here is an example of the source code:

<html>
<head>
<title>Negative Margins</title>
<style type="text/css">

.content
{
	width: 500px;
	height: 300px;
	border: solid 1px #333;
}

.leftColumn
{
	float: left;
	width: 200px;
	height: 100%;
	background-color: #333;
	padding: 0px 0px 0px 10px;
	margin: 0px -10px 0px 0px;
}

.rightColumn
{
	float: left;
	width: 300px;
	height: 100%;
	background-color: #ccc;
}

</style>
</head>

<body>

<div class="content">
	<div class="leftColumn">Left Column</div>

	<div class="rightColumn">Right Column</div>
</div>

</body>
</html>

You can take a look at a running sample here. As you can see, I’ve added 10 pixels of padding to the left side of the leftColumn class. If I were to leave it this way, the elements would be stacked as rows, rather than columns. The quick fix? Add a negative right margin of 10 pixels to even out the width of the element.

It makes sense that the width is thrown off by the padding, but wouldn't it be nice if the browser handled the adjustments so we wouldn’t have to resort to trickery to fix the problem? For now, this fixes the issue, so I guess we should just be thankful that a solution exists.

Creating A Centered Layout

In the past, you’d use nesting tables to create a centered layout. CSS, however, requires a different solution. Don't worry—it’s easy to do. It's all based on the margin property of the parent element. Here’s an example of the source code:

<html>
<head>

<title>Centering Content</title>
<style type="text/css">
.content
{
	margin: 0px auto 0px auto;
	width: 500px;
	height: 300px;
	border: solid 1px #333;
}

</style>
</head>

<body>

<div class="content">

	Content
</div>

</body>
</html>

You can see a running example here. If you take a look at the content class, you’ll see the margin property with a value of "auto" for the left and right margins. This is all you need to do to create a centered layout; it's truly that simple.

CSS Shortcuts

I’ll leave you with a few shortcuts that will help speed your development time, especially if you write a lot of CSS. The first shortcut involves colors. If you want to save time, simply abbreviate any hex value if the characters are repeating. If you have black colored text, for example, write #000 instead of #000000.

Another great shortcut involves padding and margins. If you have a margin or padding that has repeating values, such as one of the following:

padding: 10px 0px 10px 0px;

- or -

margin: 0px 5px 0px 5px;

you can simply shortcut these by writing the following:

padding: 10px 0px;

- or -

margin: 0px 5px;

These shortcuts are both simple to use and remember and, believe me, if you write a lot of CSS on a daily basis, you’ll be happy to have them at your disposal.

About Kris Hadlock

Kris Hadlock has been a contract Web developer and designer since 1996. He is the author of Ajax for Web Application Developers and has been a feature writer for InformIT and numerous Web design magazines. He is also the founder of Studio Sedition, a Web application development firm. Along with Robert Hoekman, Kris co-founded 33Inc, the firm responsible for DashboardHQ.com. You can find out more about Kris on his Web site at http://www.krishadlock.com or on his blog, Designing with Code, which focuses on Web application development from a design perspective and often features useful code snippets to help enhance your Web applications.