Oftentimes, when we as web designers are working with CSS, we have a look in mind and we are looking for ways to accomplish that work.  It can be easy to load up a page with a large number of different <div> tags in order to achieve the "perfect" layout.  It can also be easy to find or purchase a design and then apply it to your site with little need to know exactly how it is achieving that design. 

However, when we take these approaches we can often run into problems if we want to make simple style changes.  Therefore, we want to follow these four rules to keep our CSS manageable throughout our sites:

1. Use CSS Conventions - Use ids and classes appropriately so the elements can be easily identified and managed.
2. Build From A Standard Layout - Try starting from a base template (i.e. 2-column fluid, 3-column fixed), and build from there.  This will help with both cross-browser compatibility and ease of CSS changes (because many distinct looks can be achieved from these basic layouts).
3. Organize Your CSS Files - Try to keep your CSS files organized, with related items close together.  For example, try keeping ids and classes separated, and group sub-elements with their base element.
4. Separate Your CSS From Your Pages - If you don't already, keep them apart.  They're not like peanut butter and chocolate in your Reese's Peanut Butter Cups.  Keeping your CSS in a separate file will reduce the amount of maintenance needed when changes are made.

If you can follow these simple rules, then you will definitely help your cause when it comes to maintaining the look or your website.

For the last entry in our CSS Primer, I want to highlight ways in which CSS can be extended to create even more advanced effects. As a refresher, we've already covered the basics, like why CSS should be used, the basic elements used for CSS layout, placing DIV elements and styling them with backgrounds and borders, and manipulating fonts via CSS. So today, we'll focus on "what's next"...

The next step in extending the HTML and CSS design structure is called Dynamic HTML (DHTML). In addition to using HTML and CSS, DHTML also incorporates the use of JavaScript to create events for elements. For example, if you wanted to create a multi-leveled menu in an expandable tree structure, you could accomplish this through DHTML, whereas this would not be possible with HTML and CSS alone.

The addition of the Javascript allows you to respond to certain events (clicks, hovering, etc.) by manipulating the properties of an HTML element on the fly. An image gallery is a great example of this. We could create an image gallery with one big image on top and all the thumbnails below. Then on each thumbnail, we could place code that would change the image being displayed in the big image area when the thumbnail was hovered over.

DHTML is also extremely flexible, so I can't possibly even begin to scratch the surface of everything it can do. It's only limitations are your coding ability and the capabilities of JavaScript. However, that can also make it difficult to learn.

However, there are a number of sites that offer collections scripts that can be used to accomplish almost anything you'd like to do. Some I'd recommend are:

• Dynamic Drive
• DHTML Goodies
  

Instead of trying to go into any more details, I'm going to put a cap on our CSS Primer right there. There is a lot of power in the use of CSS and HTML (which grows exponentially with the addition of JavaScript) that I encourage you to explore if you haven't already. Heck, there's even a lot of powerful options that were too much for me to even cover here. Even if you're a seasoned web design vet, there's something more that can be learned. But isn't that always the case?

Now that we've mastered the art of borders and background colors (ok, maybe not mastered, but at least are familiar with them), we can look at how to style the fonts to do as we wish.

This was actually the area of CSS I had initially dealt with because I was trying to have different font colors in different areas of the page. I had a light background for the majority of my main content, but I wanted to use a dark background for my side menu bar. I quickly learned that I either had to have FONT tags everywhere, or I could learn a little CSS to achieve my desired look.

If we start with our continuing code from previous examples, and add following to the #header section of the CSS:

font-color: #FFFF66;

This will give us a header with a green background and yellow font.

However, if you put a link in that section of the HTML code, you will see that the link color has not changed. This is because font styles can be applied to almost any HTML element that can have data within it. Therefore, we'll be looking at much more than just DIV tags.

I know what you're thinking: But Greg, aren't the styles supposed to be cascading?

In this case, the link color is not a decendant of the font. Instead, it is a seperate entity. In order to change the color of the link, you'll need to include the following code in your CSS file:

a { color: #66FFFF }

This will give you cyan links throughout your page. But what if you only wanted them that color in your in your #leftcolumn DIV. Well, we can do that too!

#leftcolumn a { color: #66FFFF }

What this code is saying is that you want all link elements within an element with an ID of #leftcolumn to be cyan. If this is the only link style definition in your CSS, the rest of your links should keep their default blue color.

Link elements are also fun because they have four different statuses as well. You can define a different style for unvisited, visited, and active links, as well as for links you are hovering over. Instead of making this article any longer than it has to be, I'll refer you to the following CSS Link Tutorial to give you more details.

Now, what if you wanted to have a title on your page that was in a different font from the rest of your text to make it stick out? Well, we can do that too!

Let's assume that we want to use the H1 tag to indicate any titles on our page. We can then add the following code to make them stick out. In this case, we use the font-family style to change the font type:

h1 { font-family: courier, serif }

Now, you'll notice that I have listed more than one kind of font. This is because not all browsers support the same set of fonts. Therefore, we want to make sure we use web-safe fonts. You can always use any kind of font, but don't expect it to show up the same on everyone's computer. If the first font you specify isn't supported by their browser, then it will try the next one on the list. You can list as many fonts as you like, but should always list one of the web-safe fonts last, or your content will be displayed in the browser's default font.

Fonts are a very powerful way to accent your site and give it it's own flavor. And using CSS, you can truly customize them to your heart's desire. No longer are you restricted to the font styles in the BODY tag and FONT tags. Be free and let your letters run wild!

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.

Last week we covered the main idea behind the DIV tag and some background about what it's meant for and some of the advantages of using it. Now, it's time to start putting the tag to work.

Let's start with the following code:

<html>

<head>

<title>IJHAW Layout Demo - One Column</title>

<link rel="stylesheet" type="text/css" xhref="main.css" />

</head>

<body>

<div id="main">

  <div id="centercolumn">

      <p>Main Content</p>

  </div>

</div>

</body>

</html>

If you're not familiar with the LINK tag above, this is the code that allows us to access the CSS information stored in a separate document.  We can then just edit that document instead of changing all of our code.

You'll also notice that both the DIVs on this page are using the ID attribute, because they'll only appear on the page once. 

We'll then pair this with the main.css file containing the following:

 #main {
 width: 770px;
 margin: 0 auto;
}
#centercolumn {
 border: 1px solid #ccc;
 width: 770px;
 float: left;
}

The combination of these two pieces of code will then create a page with a single column that is 770 pixels wide (like this).  The margin setting on the main DIV also centers the column on the page.

Ok, so that makes for a good warmup, but I'm sure you would like more sections to work with.  So lets put together a 2-column layout with a header (like this).  We'll start with the following html page.

<html>
<head>
<title>IJHAW Layout Demo - Two Columns With Header</title>
<link rel="stylesheet" type="text/css" xhref="main.css" />

</head>
<body>
<div id="main">

   <div id="header">
      This is my Header
   </div>
   
   <div id="leftcolumn"> Left Column</div>
   
   <div id="centercolumn">
      <p>Main Content</p>
   </div>
</div>
   
</body>
</html>

You'll notice that I now have added two other DIV sections in my main DIV section.  Now, without any style applied to them, each DIV would appear one on top of the other in a single column.  In most cases, this is not what we'd like to see, so let's take a look at the CSS that will allow us to arrange them as we'd like to see them. 

 #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;
}

When we combine these two, we get an easy layout that many people are familiar with.  Notice that the centercolumn has been set with a width of 596 pixels.  This is because there is a 1 pixel border on both itself and the leftcolumn DIV (4 pixels of width total), and the sum of the width columns should be equal or less than the width of the DIV they are contained in.  If they are add up to more than that, then there is a good chance they will get reshuffled in a way that you did not intend.

So those are the basics of site layout using DIV and CSS.  Things can get much more complex, but the basics still apply in each case.  Next time, I'll be discussing how to make your DIVs appear the way you'd like.  This will include colors, background images, fonts, and some basic effects.  Until then, have fun playing with your layouts.

Now that we've touched on why CSS is well suited for website design and layout, I'd like to start to talk about how it gets pieced together by looking at a few of the elements that go into using CSS.

The DIV tag is the core building block of using CSS within your HTML code. While some people familiar with using tables for layout relate it to a table cell, it can more accurately be referenced as a box. Just like a cardboard box, they can come in all kinds of sizes, and can be arranged to be inside one another or besides one another.

To continue the analogy, filling in your web page with DIV tags becomes a lot like packing a moving van with boxes. You have to find places for the big stuff and the little stuff. You also need to tie off some things so they stay where you want them. And here's where the CSS becomes involved.

What CSS then allows us to do is to give different attributes to our DIV boxes. Using CSS, we can specify the style of our box (size, location, appearance, alignment, etc.). This is done in one of three ways in a DIV Tag:

1. Through The Class Attribute - The Class attribute is used to apply a style to multiple DIVs. For example, in a blog you probably want all the postings to be displayed similarly in distinct boxes. Using the Class attribute allows you to apply the same style to each of them.
2. Through The ID Attribute - The ID attribute is used to apply a style to a single object. For example, if you wanted two distinct columns on your page, you can make one with an ID="right" and one with an ID="left", and set their styles to make them appear as you wish. This styles would then not be reused on a given page.
3. Through The Style Attribute - The Style attribute allows you to modify the style on a single DIV object. Using the Style attribute is not recommended in general "best practices", but there are cases when it may be needed.

If you haven't worked much with DIVs, at this point you may still be wondering what the benefit of using the tags are. Next time we'll start to talk about all the fun style changes we can make to DIVs using CSS, and the big picture should really begin to develop. See you then!

After writing about my experiences in changing my site from table-based to CSS-and-DIV-based for the layout, I've found it to be one of the most-read articles and have frequently discussed it with readers. Therefore, I decided to start a little series that will make up a CSS Primer.

First, I want to talk a little about what CSS is. CSS is short for Cascading Style Sheet, and what they do is allow you to assign specific styles to different HTML elements, such as borders, backgrounds, and fonts styles. They've been around for nearly a decade now, and every major web browser supports them.

Take note of the cascading portion of the CSS name. What this means is that all elements within the one specified will get the same style properties. For example, without getting too technical yet, if I set a background color for the body of my document, that background will be applied to all elements within the body of the page, unless a different style is explicitly defined for that element.

Second, I'd like to look at why we want to use CSS for site design and layout. The major intent of CSS is to separate the content of a page from the design of a page. If we combine the content and design into a single entity, this means that we need to maintain them together. Separating the two allows us to worry about them individually. This is very useful for site redesigns, because we can keep the same page content, and simply change the the CSS to give the site a different appearance.

Using CSS also allows us to apply the same style to several pages more easily. Because the CSS can be kept in an entirely separate document, we can then refer to this document from several different web pages. Without this ability, this means we would have to update the appearance of each of our pages individually (which is a major pain for large sites).

One other advantage of using CSS is that it makes our web pages easier to read because they are no longer littered with style information (or extraneous table information, for that matter). Anyone who's spent a significant amount of time programming or editing code can appreciate the appeal of clean and easy-to-read code.

Now that we've discussed some of the basic advantages of using CSS for you site design and layout, next time I'll cover the basics of implementing CSS, and continue building from there.