CSS Cascading Style Sheets

There are plenty of books and websites that give you detailed instructions on HTML, JavaScript and Cascading Style Sheets. This page is not intended to teach total beginners how to use each of these key technologies; rather the goal is to filter out some of the more useful techniques and code that I have found throughout the years when creating websites and web applications.

Change the color of the browsers scroll bars:

This nifty CSS style allows you to change the color of the browsers scroll bars. Play with the various combinations and see what you get!

<style type="text/css">

Create link roll-over affects without images:

Just add this code in between the <head> </head> tags in your HTML page:

<style type="text/css">
 </style>

The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One note with the above code is that it is important that the style declarations be in the right order: "link-visited-hover-active", otherwise it may break it in some browsers.

CSS floating background image:

This is one of the first things that I discovered in CSS that made me say: 'CSS is cool!'.

Add a background image style property to the body tag:

<style type="text/css">

</style>

This CSS will place the image in the top right hand corner of your page and you will get the 'cool' affect where when the page is scrolled the image will stay put.

CSS relative positioning:

Divs (or any other element) can be positioned to an exact pixel screen position. You can position the DIV either 'relative' to whatever element the DIV happens to be sitting in or 'absolute' - which is explained in the next tip.

The words: 'relative' and 'absolute' are special keywords in CSS that are used to tell the browser how to position elements. Elements can be DIVs or <p> tags or any other tag in HTML.

Code:

<div id="Layer1" style="position:relative; background: rgb(204,204,255); left:10px; top:34px; width:380px; height:27px; z-index:1">
Sample text.
</div>

Div tags are a fundamental tag in HTML today and people should become familiar with them. The first two examples show the two basic positioning' behaviours' of CSS: absolute and relative. I encourage people to play with them and see how they can be used within your own HTML layouts. One major point to consider is the affect of absolute positioned items when mixed in with HTML elements not positioned with CSS - things can get messy.

CSS absolute positioning:

Since this DIV uses absolute positioning it's position is set relative to the top left hand corner of the browser window. The background color is set using hexadecimal values instead of RGB.

Code:

<div id="Layer1" style="position:absolute; background: #999966; left:65px; top:1199px; width:380px; height:27px; z-index:1"> Absolute postioning</div>

Fieldset element with CSS styling affecting margin (outside) and padding (inside):

Webmaster

Name First:

Name Last:

Code:

<fieldset style="width:400px; height:100px; padding: 0.5em; margin:10px">
<legend>Webmaster</legend>
<br>
<table width="75%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td>Name First:</td>
<td><input name="name" type="text"></td>
</tr>
<tr>
<td>Name Last:</td>
<td><input name="Lname" type="text"></td>
</tr>
</table>
<br>
</fieldset>

The fieldset tag allows you to group things in a nice looking container. And the sub-tag '<legend>' sets the nice looking title in the border. The problem is that this tag does not render in Netscape (at least in earlier versions ) and renders differently on the MAC. But since about 97% of the browsers in use today (depending on your traffic type) are IE5+ of the PC, we should be ok.

CSS Border style (inline) applied to a table:

Code:

<table width="75%" border="0" cellspacing="1" cellpadding="1" style="background: rgb(204,204,255); border:1px solid #000000">
<tr>
<td>Name First:</td>
<td><input name="name" type="text"></td>
</tr>
<tr>
<td>Name Last:</td>
<td><input name="Lname" type="text"></td>
</tr>

</table>

The' traditional' way to give your tables a thin border was to use nested tables - as in the next example. CSS styling allows you to have the same affect with much less code. You may need to use the nested tables trick on occasion if for instance you had to make your pages work with older browsers.

Thin outline on table created with nested tables.

This is your text ...

Code:

    <table width="90%" border="0" cellpadding="1" 
         
    cellspacing="0" bgcolor="#999966">
         
    <tr>
         
    <td>
         
    <table width="100%" border="0" bgcolor="#FFFFFF">
         
    <tr>
         
    <td>&nbsp;</td>
         
    <td>&nbsp;</td>
         
    <td>&nbsp;</td>
         
    </tr>
         
    <tr>
         
    <td>&nbsp;</td>
         
    <td>This is your text ...</td>
         
    <td>&nbsp;</td>
         
    </tr>
         
    <tr>
         
    <td>&nbsp;</td>
         
    <td>&nbsp;</td>
         
    <td>&nbsp;</td>
         
    </tr>
         
    </table>
         
    </td>
         
    </tr>
         
    </table>

Before the days of CSS people used to use all kinds of tricks with tables to get the look they wanted. One of those tricks was nesting tables in order to create a thin outline around a table. You are much better off using CSS as in the example on this page because it is much less work and you end up with much less code. I include this trick here so that if you ever run into it in your work you know why people used this technique.

If you arrived at this page from a search engine, please visit our MAIN PAGE