5 cheap CSS tricks
CSS, or Cascading Style Sheets, is a new web technology that gives web authors enhanced control over the look of elements in a web page. Things once considered unchangeable, such as the underline beneath links, the color of form elements, the spacing between text, and more, can now all be altered, thanks to CSS. In this article I'll show you the source code to 5 of the most common (not to mention cheapest) CSS tricks you can add right now to your site.
1) No-underline links
1) No-underline linksOne 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 thehead 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
With the huge popularity surrounding rollover image effects, its no wonder I get many mails asking how to create this effect- rollover text links. CSS-P (CSS pseudo classes) 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 type="text/css">
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:
3) Background image for block elements
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
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 creating and maintaining a site. Why else would it be packaged with Windows 95? You know that Windows 95 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</span>
As you can see, just warp the text you want to highlight with the part in bold.
5) Fancy table borders
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
