Main Menu

XHTML
CSS Basics
CSS Properties
CSS Layouts
Finally
XHTML Articles
CSS Articles

Getting things done with CSS.


Now let us put all we have learnt to practice.

Making rollover links.
Rollover links are designed so that when you move your mouse over the link they chane their looks. This gives the user a feedback. Before CSS was prevalent rollover menus required a lot of javascript. Now CSS rollover effects are very easy to create. Lets take a look how.
Step one: You want to change look of a link. So the CSS selector you will be using is <a>. We want the link to be blue and when mouse is moved, the link must become white and the background blue. This will require the :hover, pseudo class.
Step 2: Your complete CSS will look like,
a {
color:blue;
background:white;
text-decoration:none;
}
a:hover{
color:white;
background:blue;

font-weight:bold;
}
Step three: Add the CSS to HTML file. To keep all in one place let us add it using the <style> tag. Your complete file must look something like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Links rollover</title>
<style type="text/css">
<!--
a{
color:blue;
background:white;
text-decoration:none;
}
a:hover{
color:white;
background:blue;

font-weight:bold;
}
-->
</style>

</head>
<body>
<a href="#">Move mouse over me</a>
</body>
</html>

Creating a two column layout without tables. 
With CSS you can create well laid out pages without using tables. Let us see how we can create a two column layout with header and footer without tables
Step one: Write the XHTML. To create layout without tables we need a marked up page with specific areas to which we can apply our styles. So let us write a XHTML page with separate footer, header and two columns. This is the XHTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Two Columns</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>

<div id="header">
You could have put a header here.
</div>
<div id="content">
<div id="naviagtion">
<a href="#">Home</a>
<a href="#">Links</a>
<a href="#">Contact</a>
</div>
<div id="text">
Loren ipsum.
</div>
</div>
<div id="footer">
You could have put copyright information here.
</div>
</body>
</html>
Now lets create the style sheet which we refered to.
#header{
            width: 700px;
            border: 1px red dotted;
}
#content{
            width:700px;
            border: 1px red dotted;
}
#navigation{
            width:200px;
            float: left;
            border: 1px red dotted;
}
#text{
            width:490px;
            float: left;
            border: 1px red dotted;
}
#footer{
            width:700px;
            border: 1px red dotted;
            clear:both;
}
#navigation a{
            display:block;
            color: Fuchsia;
}
Here we defined the width of all the parts. Header and footer must of same size, so they were set to 700 pixels. The sum of navigation and text must be less than 700 pixels and so widths were set accordingly. As we wanted the navigation and text area to appear alongside each other we gave a float property to them. This should have created the perfect layout we wanted, but Firefox needs an additional hint to not overlap footer. This was done by giving a clear: both directive with footer.

Summary.
You learnt creating real world designs with CSS. This concludes our tutorial. As with any real world language, the more you practice with CSS, the more you will learn. So create web pages. Get inspiration from other designs.
The free nature of web allows you to view source of others. So view how the masters code and learn from them. But at the same time have respect for copyright laws.
Do not be afraid to experiment with XHTML/ CSS you cannot damage anything.
Keep Experimenting. Keep Learning