Web Designers Killer Handbook - www.killersites.com

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!

Create link roll-over affects without images:

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

:link { color: rgb(0, 0, 153) } /* for unvisited links */
:visited { color: rgb(153, 0, 153) } /* for visited links */
:hover { color: rgb(0, 96, 255) } /* when mouse is over link */
:active { color: rgb(255, 0, 102) } /* when link is clicked */

--> </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.

To learn more about CSS you should visit CSSTutorial.net

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:

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>

Comment:

Div tags are a fundamental tag in HTML today and people should become familiar with them. (Learn about the DIV tag.) 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.

Click here to see example

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):

KillerSites webmasters

Name First:
Name Last:

Code:

<fieldset style="width:400px; height:100px; padding: 0.5em; margin:10px">
<legend>KillerSites webmasters</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>

Comment:

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>

</table>

Comment:

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>

Comment:

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 it 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.

MISCELLANEOUS