Dress Up Your Website With Fantastic CSS Tricks
In Part 1 of this series, we discussed the different ways
of implementing style sheets into your site and the basic
layout of tags. Now, let’s move on to some of the fun
ways you can dress up your site with some standard CSS
tags.
Have you ever been to a website and saw text that appeared
to have been highlighted with a yellow highlighter pen?
Many sales-oriented sites use this technique to call
attention to ad copy they want to stand out.
The tag looks like this:
< span style= "background-color:yellow" > Text Here < /span >
Pretty simple, really. How about sites that remove the
underlining from hyperlinks? Think it can’t be done?
Think again. Here’s how to do it:
< style type="text/css" >
< !--
A:link {text-decoration:none}
A:visited {text-decoration:none}
-->
< /style >
or like this -
A:link, A:visited, A:active { text-decoration: none }
How about setting your link colors? And how about
making the links change colors when you hover over them?
This is easy, too, but be aware it only works in Internet
Explorer 5.0 or higher.
< style type="text/css" >
< /style >
Many sites you go to these days have fancy colored scroll
bars instead of boring gray ones. This code only works
in Internet Explorer 5.5 or higher; Netscape users will still
see the standard gray.
< STYLE TYPE="text/css" >
< !--
body {scrollbar-3dlight-color:#ff9909;
scrollbar-arrow-color:#000099;
scrollbar-base-color:#ff9909;
scrollbar-darkshadow-color:#000099;
scrollbar-face-color:#ff9909;
scrollbar-highlight-color:#000099;
scrollbar-shadow-color:#ff9909}
-->
< /STYLE >
If you’d like some free software that will generate the
colored scroll bar tags easily, go to
http://harmonyhollow.net/cws.shtml
You’ll also find an online tool you can use to
generate the code at:
http://www.draac.com/mouseover-scrollbars.html
Page Margins are easy to control with CSS and can be
set in mm,cm,in,points (pt) or pixels (px).
Example: To set a left margin
margin-left: 2.0 in;
To set all 4 margins at once use
Body {margin: 2 in }
To set individual margins at once use
Body {margin: 2% 5% 10% 12% }
Did you know some sites even use CSS to lay out their
tables? This is a pretty advanced topic and not for the
faint of heart:
http://developer.apple.com/internet/CSS/introcsslayout.html
Want to keep a background image from tiling on your pages?
Body {background: #333399 url (filename.gif) no-repeat center}
Think indenting paragraphs online is impossible?
P { text-indent: .50in }
Tables don’t have to be boring. You can give em fancy borders by
inserting this instruction into your table tag:
Style= “border: 4px solid red”
You can change the above color and px size to whatever
you’d like.
Ever notice how almost all submit buttons are all dull
gray? Yours doesn’t have to be. Use the following
tag between the