1) No-underline links
(Compatible: IE 4+, NS 4+, Opera 5+, Mozilla)
Cheap example on the net: Desktoppublishing
One of the very first indicators that CSS had arrived was when people
browsing the web started reporting a strange phenomena among some sites they surfed to-
The text links on those sites did not have an underline! We now know that this is caused
by CSS, and below is the code you can use to achieve the same effect. Add it to the head
section of your page:
<style type="text/css">
a {
text-decoration:none;
}
</style>
For better or for worse, all the text links on your page are now not
underlined anymore.
2) Rollover text links
(Compatible: IE 4+)
Cheap example on the net: Microsoft homepage
With the huge popularity surrounding rollover image effects, its no wonder
I get many mails asking how to create this effect- rollover text links. IE 4 supports
CSS-P, a modified version of CSS that allows you to easily give your text links a rollover
personality. The link changes color when the mouse rolls over it. Here's the source code
for this effect:
<style>
a:hover{
color:red;
}
</style>
Like the first code, the above should be inserted in the header section of
your page. You can change the keyword "red" to your liking. Here's an example of
a rollover link:
Roll
your mouse over this link
3) Background image for
block elements (Compatible: IE 4+, NS 4+)
Cheap example on the net: Too cheap. Couldn't find any!
Do you enjoy giving your tables a background image? If so, you'll love
what CSS did with this concept. Using CSS, you can now give any block element a background
image. A block element simply refers to elements that define a rectangular area, such as a
paragraph <p>, a header <h>, or div <div>. Elements such as <font>
and <span> are NOT block elements. To give block elements a
background image, simply insert the below CSS code into the element's tag:
<div style="background-image:url('yourimage.gif')">.....</div>
Lets see a couple of examples:
This header has a brownish background
This paragraph has a great looking, skyish background.
This paragraph has a great looking, skyish background.
This paragraph has a great looking, skyish background
4) Highlight text
(Compatible: IE 4+, NS 4)
Cheap example on the net: Below example
I like to call this effect highlight text, but many simply call it
"text with a background color" (how artistic). It allows you to draw attention
to specific text by giving it a background color. Take a look at the following paragraph:
Hay webmasters, looking for the perfect tool to
create and manage a web site? Allow me to introduce you to NotePad. Its the simplest, fastest, and don't forget, cheapest way
to create and maintain a site. Why else would it be packaged with Windows? You
know that Windows is the best operating system available, so whatever comes with it
must also be the, eh, best, right?. Don't hesitate, use NotePad today!
Since I want to emphasize the words "simplest, fastest, and
cheapest", I use CSS to give that portion of the text a background color of yellow.
Here's the source code I used:
<span
style="background-color:yellow">simplest, fastest, and don't forget,
cheapest way</span>
As you can see, just warp the text you want to highlight with the part in
bold.
5) Fancy table borders (Compatible: IE 4+)
Cheap example on the net:
Too cheap. Couldn't find any!
Finally, let me wrap things up by showing you a CSS trick for quickly
"fancying" up those optional borders of a table. Take a look at the below
tables:
Table with green, thin border |
Table with thick, red table |
The above effect is achieved through the following code, inserted inside the <table> tag:
style="border: 2px solid green"
You can change "2px" and "green" to different values to alter the thickness and color of the border, respectively.
That brings us to an end. Now run along and add some CSS to your web page!
|