Step 1: prepare your images

Your image must be an horizontally repeating background. Of course, you can choose to use no image at all and only a solid color. Too lazy to make a background? I've prepared two for you:

Step 2: the HTML code

This is very simple, we use two divs, one to make the border, it will have a fixed width, and one inside, to display the progress. To change the progress, change its width! :)

<div class="prog-border">
<div class="prog-bar" style="width: x%;">
</div>
</div>

Step 3: styling all this

Now, the most important, the CSS! In your stylesheet, add this:

.prog-border {
width: 200px;
height: 20px;
background: #FFF;
padding: 3px;
border: 1px solid #DDD;
}
.prog-bar {
height: 20px;
background: url(progress_bar_background.gif) repeat-x; /* use the color or the background you want! */
}

We're done! You should have this:

Share This

<a href="http://domain.com" class="rollover"><var>Rollover</var></a>

Do not forget to add a class and to insert the link text between <var> and </var> ! Then, the css:

var {
visibility: hidden; /* this will hide the text link */
}
a.rollover {
display: block; /* needed to set link dimensions */
width: 180px; /* width of your image */
height: 50px; /* height of your image, divided by two, we need to hide the second image */
background: url(IMAGE.JPG) no-repeat; /* image url */
text-decoration: none; /* to hide the link underline */
}
a:hover.rollover {
background: url(IMAGE.jpg) no-repeat 0px -50px; /* On mouseover, we show the second image, by adjusting background position! */
}

As you can see, I've added some values to a:hover.rollover: 0px -50px this is the background-position property. It's like the image "coordinates". The image dimension is 180px*100px but it is equally divided in two parts. When the mouse is not over, we need to show the top image, we do not set the background position because default values are 0px 0px, which is the top image "coordinates". When the mouse is over, we need to show the second image and as you can see on the grid, its "coordinates" are 0px -50px ! :) Okay, I suck at explaining. XD

Let's do something more complex, like an entire menu. This is the HTML code of our menu, I've put the links in a div:

<div id="menu">
<a href="linkone.html" class="one"><var>one</var></a>
<a href="linktwo.html" class="two"><var>two</var></a>
<a href="linkthree.html" class="three"><var>three</var></a>
<a href="linkfour.html" class="four"><var>four</var></a>
</div>

Note that the links classes are all different, this is necessary! This is the image we'll use:

Let's see it in a grid so that we can set the background-position easily for each link:

Alright, CSS time! First, let's style our menu div. Set its dimension to 400*50px:

#menu {
width: 400px;
height: 50px;
}

Now, hide the text link:

var {
visibility: hidden;
}

And for all links, hide the underline, set their height to 50px, and we'll need to add the float property, to align them correctly (because we "transformed them into blocks" to set their dimensions with display:block;):

#menu a {
text-decoration: none;
display: block;
float: left;
height: 50px;
}

Now, let's add styles for each link using classes:

a.one {
width: 100px;
background: url(image.jpg) no-repeat 0px 0px;
}
a.two {
width: 100px;
background: url(image.jpg) no-repeat -100px 0px;
}
a.three {
width: 100px;
background: url(image.jpg) no-repeat -200px 0px;
}
a.four {
width: 100px;
background: url(image.jpg) no-repeat -300px 0px;
}

Note that background position is different for each class, since we need to display different parts of the image. See the grid. For example, link four image starts at 300px from the left, but in the CSS, we need to add minus 300px.

Now let's set the background-position when someone mouse over the links. We'll keep the "x" position but change the "y" ones, by adding -50px to display the second image (green).

a:hover.one {
background: url(image.jpg) no-repeat 0px -50px;
}
a:hover.two {
background: url(image.jpg) no-repeat -100px -50px;
}
a:hover.three {
background: url(image.jpg) no-repeat -200px -50px;
}
a:hover.four {
background: url(image.jpg) no-repeat -300px -50px;
}

We're done! You can see the rollover in action on this page.

Note: There is a file embedded within this post, please visit this post to download the file.

Share This

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Well, now, you need to make another stylesheet, the printer-friendly one. You must make it so your design won't show up. For example, here is your body:

<body>
<div id="header"><!–Here goes your header layout –></div>
<div id="sidebar"><!–Here goes your sidebar –></div>
<div id="content"><!–Here goes your content –></div>
</body>

Then, you printer-friendly should look like this:

#header, #sidebar {
display: none;
}
#content {
font: 12pt Georgia, Arial, Helvetica, sans-serif;
text-align: justify;
}

It's recommended to use a font like Georgia or Times New Roman for printers and use points instead of pixels. Now, save your printer-friendly stylesheet. I'll name it print.css. In your document, insert:

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

Don't worry, it won't appear when you go to your site. Now, try to print your site… Your layout is hidden, only content is shown! :) Try to print this site to see an example! If you're using tables, don't worry, you can do it too. Just add id="content" in the cell with your content. Don't put anything in the others (sidebar, layout images). Then, in your printer-friendly stylesheet, do it like that:

td {
visibility: hidden;
}
#content {
visibility: visible;
}

It should do it.

Share This

In the picture, I've represented the div layers needed to realize this.

As you can see, 5 elements (header, sidebars, footer, text) but 6 layers! The extra layer will contain all the elements and set the width of the layout. We will also use it to center our layout.

Here is our index.htm source so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftside"></div>
<div id="text"></div>
<div id="rightside"></div>
<div id="footer"></div>
</div>
</body>
</html>

Don't forget the doctype (underlined) for validation, as well as the link to the stylesheet. I have put IDs in the div layers so that we can control their looks and position with CSS. Remember that an ID can be used once in a page only, contrary to classes which can be used as much as you want.

Now, let's take a look at stylesheet.css : (ignore the backgrounds color, I've put them so that you can see the different divs on the final layout.)

body {
margin: 0px;
padding: 0px;
background: #FFFFFF;
}
#container {
/* margins at top and bottom are 0px but on the sides, "auto" will center the layout */
margin: 0px auto;
padding: 0px;
/* sets the layout width */
width: 700px;
}
#header {
width: 100%;
height: 150px;
background: #EEE;
}
#leftside {
width: 150px;
/* float it to the left of the text */
float: left;
background: #DDD;
}
#rightside {
width: 150px;
/* float it to the right of the text */
float: right;
background: #CCC;
}
#text {
width: 400px;
background: #BBB;
/* float it to the left of the right sidebar */
float: left;
}
#footer {
width: 100%;
height: 50px;
/* clear: both so that it remains at the bottom of the 3 columns */
clear: both;
background: #AAA;
}


The # before each layer's ID in the stylesheet is needed! It's similar to the . in front of classes in stylesheets. The structure of the page is now ready, it looks like this. All that's left is to add style. Let's start adding space between the layers' borders and the text. Add this to your stylesheet:

p {
/* margins on the sides are 10px now */
margin: auto 10px;
/* font size is 11px and line-height is 15px */
font: 11px/15px Arial, Verdana, sans-serif;
}

It's starting to look like something! We now have this. Notice how the sidebars are smaller than the text layer height? We're going to fix this with a little trick. We're going to make an image background for the container layer. The background image. This trick is called faux columns. Now in your stylesheet, find #container and add this in the properties:

/* add the background to make faux columns */
background: url(background.jpg) repeat-y;Click here to see the finished page! You can customize it as you want with CSS, make beautiful css menus, etc. Use the CSS background properties to define your header image and graphics. Why? So that without changing your HTML code, you can change your layout easily!

Note: There is a file embedded within this post, please visit this post to download the file.

Share This

First, open your graphics editor, make a custom line, I recommend you to not use one bigger than 3px in height. I've made a few for you to use, you can find them at the end of the tutorial, you can always replace the colors, of course.

link example, another example, here we go, again, and finally, the last one.

Well, that's nice, but what's the code?

a {
text-decoration: none;
background: url(underline.gif) repeat-x left bottom;
padding-bottom: 2px;
}

Set your underline as background, make it repeat horizontally only (repeat-x) and set its position to left horizontally and bottom vertically. This is nice, but how do I do animated rollovers? It's simple, make an animated underline, and put it as background using this code:

a:hover {
text-decoration: none;
background: url(underline_over.gif) repeat-x left bottom;
}

Same as previously, make it repeat horizontally only, etc.

Note: There is a file embedded within this post, please visit this post to download the file.

Share This

<style type="text/css">
p {
font-size:11px;
line-height:VALUEpx;
}
</style>

Here is line height 5px. Impossible to read. Ut at urna a sem semper vestibulum. Vestibulum pellentesque. Duis interdum. Praesent pellentesque tincidunt magna. Curabitur faucibus. Aenean imperdiet scelerisque libero. Nullam nulla sem, rhoncus ac, rhoncus nec, tempor sit amet, dui. Cras felis nunc, tincidunt et, euismod sed, pretium non, dolor. Donec leo risus, euismod eget, fringilla quis, consectetuer nec, libero. Praesent imperdiet.

Here is line height 25px. Ah, space! Cras leo lectus, semper lobortis, luctus eget, placerat at, tellus. Aenean eget erat sed massa aliquam tincidunt. Praesent vestibulum. Aliquam ligula. Aliquam convallis pede sit amet odio. Vivamus non justo vitae urna volutpat pharetra. Vivamus ac sapien. Aliquam in nibh quis pede porta malesuada. Nullam convallis. Vestibulum purus. Mauris felis justo, ullamcorper vitae, lacinia et, tristique nec, wisi. Morbi nonummy.

When using shorthand property, you can set the line-height like this:

<style type="text/css">
p {
font: 11px/20px Arial, sans-serif;
}
</style>

Here I've set the line-height to 20px and the font-size to 11px :)

Share This

img {
border: STYLE;
}

Of course, you can replace img by whatever you want.

1px dotted #000000

1px dashed #000000

1px solid #000000

3px double #000000

3px groove #000000

3px ridge #000000

1px inset #000000

1px outset #000000

If you want only a border at the bottom, use this:

a {
border-bottom: STYLE;
}

Share This

<style type="text/css">
body {
cursor: STYLE;
}
</style>


crosshair
default
hand
help
move
text
wait
auto
e-resize
ne-resize
n-resize
nw-resize
w-resize
sw-resize
s-resize
se-resize

You can also put it like that:

<a href="url" style="cursor:STYLE">link link</a>


(note) It's better not to use this too much… :)

Share This

This CSS code change the color of text selection on your page.

::-moz-selection{
background:#EDCCCC;
color:#FF3399;
}
::selection {
background:#EDCCCC;
color:#FF3399;
}

Share This

If you have the same style for two or more selectors, you can group them!

p, h1, h2 {
font: 12px Arial, sans-serif;
}

Shorthand properties

I always use shorthand properties to have a lighter stylesheet. For example, if you have background properties set like this:

body {
background-color: #FFF;
background-image: url(image.jpg);
background-repeat: no-repeat;
}

The code can be shortened to one line:

body {
background: #FFF url(image.jpg) no-repeat;
}

Share This