Web Designer's Killer Handbook™
Styling Tips
There are plenty of books and websites that give you detailed instructions on HTML, JavaScript, and Cascading Style Sheets. The Web Designer's Killer Handbook 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.
Web Designer's Killer Handbook™
Change the color of the browser's scroll bars:
This nifty CSS style allows you to change the color of the browser's scroll bars. Play with the various combinations and see what you get!
<style type="text/css">
<!--
body
{
scrollbar-arrow-color: #3F0;
scrollbar-3d-light-color : #3CF;
scrollbar-base-color: #000;
scrollbar-face-color: #099;
scrollbar-dark-shadow-color : #006;
scrollbar-highlight-color: #CCC;
scrollbar-shadow-color: #000;
}
-->
</style>
Create link roll-over effects without images:
Just add this code in between the <head> </head> tags in your HTML page:
<style type="text/css">
<!--
: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 them, 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 post questions to this forum and read my article introducing CSS:
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">
<!--
body {
background-attachment: fixed;
background-image: url(yourImage.gif);
background-repeat: no-repeat;
background-position: right top;
}
-->
</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>
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 'behaviors' 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 effect 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 its 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):
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>
<tr>
<td>Name Last:</td>
<td><input name="Lname" 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 effect 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.
Top