CSS Primer: The Keys To Lookin' Good

Recently, we went over a brief tutorial on how to use CSS and DIV tags for layout on our sites. This week, we'll spend a little time talking about how to get that layout some flavor to bring it to live.

Backgrounds

Last week, you actually got a sneak peek at how to set background colors. Let's look at that code again:

#main {
 width: 770px;
 margin: 0 auto;
}
#header {
 border: 1px solid #ccc;
 height: 70px;
 background-color: #66CC66;
}
#leftcolumn { 
 width: 170px;
 float: left;
 border: 1px solid #ccc;
 background-color: #6666CC;
}

#centercolumn {
 border: 1px solid #ccc;
 width: 596px;
 float: left;
}

This code created a green header, a blue sidebar, and a white content area. All you have to do is provide the hexidecimal color code. Simple enough...

However, what if you'd like to use an image for your background? That's not too difficult either. For example, instead of using this line

background-color: #6666CC;

we could instead use this line

background: url("back.jpg") repeat;

The url parameter allows us to specify the location of the image (as a relative link or an absolute link), and the repeat parameter tells the browser to repeat the image across the width and height of the DIV area.

Furthermore, we can control how an image will repeat. If we instead use repeat-x, we can have the backround image only repeated horizontally. Or we can use repeat-y to have the image only repeated vertically. Lastly, we can set the backround image so that it will not repeat by using no-repeat. Each of these has it's different uses in design, so if you're looking for a different look, you should try working with them.

That's about the extent I'll be covering backgrounds, but if you'd like to learn even more about specific background settings, please check out this page for a full list of background options.

Borders

In the example from the last CSS Primer article, you'll also see the settings for a basic border for a DIV.

border: 1px solid #ccc;

This creates a solid gray border that is 1 pixel thick around the DIV. The color and width properties should be pretty self explanitory, but we want to look closer at the style of the border, as well as separate border controls.

The solid border style will give us a solid line every time, but we also have some other options to choose from. Solid is the most commonly used style, but the others can be using for creating DIVs that are not so separated from what's around them, or to hilight them in a stronger way.

We can also control our borders separately. We do this by calling more specific properties. For example, I could use the following CSS on one of my DIVs.

border-top: 1px dotted #000;

border-left: 2px dash #F00;

border-bottom: 3px double #0F0;

border-right: 4px solid #00F;

This will give me a DIV with a dotted black line on top, a dashed red line on the left, a green double-lined border on the bottom, and a blue solid border on the right, with each border getting wider going counter-clockwise. Granted, you probably wouldn't actually create a DIV with crazy borders like this, but it should show you the simple power and flexibility of the property.

We'll go ahead and take a break there, but we've just started to scratch the surface of the power of CSS when it comes to site appearance. Next time, we'll cover fonts and simple effects, so be on the lookout for that later in the week.