Hey…are you using CSS for designing your website? Let me tell you few tips and tricks, which you can use them.

1) Fancy table borders: It is very easy to create table borders that are fancy using CSS. Take a look at the below table:

You can easily achieve this by inserting the following code inside the <table> tag

style=”border: 2px blue”

You can change “2px” and “blue” to anything depending upon your choice.

2) Font shorthand rule: In general, when you are trying to style the fonts, you do the following:

font-weight: bold;

font-variant: all-caps;

font-size: 2em;

line-height: 1.57em;

font-family: Arial

However, using the shorthand rule, you can write as follows:

font: bold all-caps 2em/1.57em Arial

This looks nice, am I right? To ensure that this version works, it is mandatory to mention both font-size and the font-family. The format is font-weight, font-style, font-variant, font-size, font-height and finally the font-family.

3) Printing a CSS document: Have you noticed that many websites have a print-friendly version link for easy printing? This is not required if you are using CSS. Simply set up a second CSS document and use this for printing. How do you do this?

<link type="text/css" rel="stylesheet" href="stylesheet.css" mce_href="stylesheet.css" media=”screen” />
<link type="text/css" rel="stylesheet" href="printstyle.css" mce_href="printstyle.css" media=”print” />

You can call up the first line when viewing on screen and the second line for printing purposes. Just open a blank document, save it as printstyle.css. Now, type the following:

<link type=”text/css” rel=”stylesheet” href=”printstyle.css” mce_href=”printstyle.css” media=”screen” />.

Do this till the on screen display matches the user-friendly printer version.

4) Text rollovers: Many now-a-days like rollover texts. So, how do you do them using CSS? Insert the following text:

<style type=”text/css”>a:hover{color:blue;}</style>

When the cursor rolls over the particular link, color would change to blue. You just have to insert this code in the header section. For an example, I have taken blue color. You may change the color of your choice.

5) Width and height issues relating to Internet Explorer: If you are a web developer, I’m sure you know the fact that Internet Explorer doesn’t understand min-width and min-height. There’s a way to resolve this issue.

Take for example; the background image is 100px wide and 15px high. How do you represent this?

Use the following code for a box with class=”box”:

.box

{

width: 100px;

height: 15px;

}

html>body .box

{

width: auto;

height: auto;

min-width: 100px;

min-height: 15px;

}

Other browsers except Internet Explorer will read both the codes. When other browsers read the second code, they simply override the values given in the first code. However, Internet Explorer will only read the first code.

Quite interesting, nah… Ok…try these simple tricks in your website and make it look beautiful and attractive.

Happy web designing guys!!!

Tags: CSS, Tips, tricks