CSS Layout Basics - Part 1

Thursday, April 17th, 2008

In the event you’ve figured out that you want to ditch table-based layouts and build CSS-based layouts, but you just don’t know where to start, I’m here to help. I won’t go too indepth, but I’ll cover the basics.

You will need to have two files. An HTML file, and a CSS file. Both of these can be blank, but try to make sure they have the right extension in the filename. You can link the CSS file with the following code in your HTML <head> tag:

<link rel=”stylesheet” type=”text/css” href=”myStylesheet.css”>

Okay, now that we’ve got two files, let’s get started.

Your basic element HTML markup consists of a DIV tag: <div></div> . A DIV container is a square. By default, it’s as tall as the content within it, and fits to the width of whatever element it’s in.

This DIV tag is modifiable in almost every way imaginable in CSS. What you need to do is establish the link between your HTML markup and your CSS element. You would do so using an ID, or a CLASS. The only difference is that ID’s are only used once on a single page. Let’s say you want to display the text within the div at a 12 pixel font size.

Using an ID

HTML Markup
<div id=”myCSS”>12 Pixel Font</div>
CSS
#myCSS {font-size:12px;}

Using a CLASS

HTML Markup
<div class=”myCSS”>12 Pixel Font</div>
CSS
.myCSS {font-size:12px;}

Notice how I had to use a pound sign (#) when defining an ID in the CSS and a period (.) when defining a CLASS. In your CSS file, you can add as many attributes as you like within the curly brackets and it will affect the respective DIV container. If we wanted our myCSS class to appear bold, we would do the following:

.myCSS {font-size:12px;font-weight:bold;}

Like HTML, CSS has little importance on how you space your markup. The above CSS will perform exactly the same as:

.myCSS {
font-size:12px;
font-weight:bold;
}

Other HTML Elements

All elements can be styled using CSS as long as they are references properly. Technically, the only difference between a DIV tag and a SPAN tag (or P tag, LI tag, etc.) is that they each have preset attributes to make coding easier. A DIV container, as mentioned earlier, will, by default, fill the width. A SPAN container will, by default, display inline with other elements. You can just as easily use one for the other like so:

HTML
<div id=”actsLikeASpanTag”>I’m a span tag.</div>
CSS
#actsLikeASpanTag {display:inline;}

That’s all for now, hope that gets you started.