Empty Cache

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.

Everything you should know about CSS3 - CSS3.info

Let’s take a look at the CSS for EmptyCache.com. As you can see this is a rather simple site, so this should be a rather simple intro to people learning CSS.

First, we’re going to take a look at the file secondary.css. When designing most of our sites we create several CSS files. The first named “primary.css” contains the basic styles for headers, links, fonts, forms, and table. Creating a standard primary CSS file is useful because you don’t need to start from scratch everytime you create a new website. You can compare this primary CSS file to the Normal document template in Word. So it’s a good starting place for any new website.

The secondary CSS file is where we hold most of the site specific styles for handling layout and images.

We layout our divs as such:

Container
Header
Middle
Footer

First up…Container

#container {
width:760px;
margin:100px auto 0 auto;
padding:0;
background:transparent url(../images/css_middle.gif) top left repeat-y;
}

Line 1: We are setting the width to 760px (which is a good width that works for resolutions of 800 x600 or higher)
Line 2: 100px sets the container 100px from the top. Auto for the left and right margins, causes the container to be centered horizontally, and 0 sets the bottom margin to 0.
Line 3: Padding is the space we leave within the container box. This is set to 0 because we don’t want any padding since the container is only used for positioning of the other objects.
Line 4: Finally we have the background. First we set the background color to transparent so that the background color set for the body shows through. Next we set a background image that repeats on the y-axis and is aligned to the top left of the container. If you take a look at the image you’ll notice that it is just a thin sliver of the background. Because this repeats, we only have to load a small image, thus keeping the page size small. Why are we using an image and not a color? Because the image includes the shadowing that appears along the edges of the container. (This is done using “outer glow” in Photoshop)

Next…Header

The header DIV is placed inside of Container:

 #header {
height:145px;
background:transparent url(../images/css_header.gif) top left no-repeat;
}  

Ok, the header applies the “cityscape” image to our page.
First we need to set the height of the header to the same height as out image, otherwise the header will collapse because there is no text in the header to keep it open. This would prevent our image from being displayed.

Next we set the image file, but this time we don’t want it to repeat.

Middle…

#middle {
margin:3px 8px 0 9px;
overflow:hidden;
width:743px;
border-bottom: 1px solid #ccc;
}

Because the container background image is 760px wide and includes shadows along the edges, I want the middle content to stay within the boundaries of the container image. So I set the left and right margins to 9px and 8px respectively. Because of this the width needs to be smaller by the same amount (17px total). We need to include the width because we’ve included the line:

overflow:hidden;

#footer {
clear:both;
padding:5px 0 15px 14px;
text-align:center;
background:transparent url(../images/css_footer.gif) bottom left no-repeat;
font-size:.75em; }