7 CSS tricks for website

It is very essential to remember when using CSS to website that you need to maintain some types of tricks which is very helpful.

CSS tricks:

1) Don’t fix the font size:
You do not know in what resolution people are using your website so let auto fix the font size depends on ratio.

Avoid p {font-size: 16px;}

2) Class combine:
Suppose you want one paragraph is red then another paragraph in blus. So in this case you can combine the classes.

<p class=”para red”>…</p>
<p class=”para blue”>…</p>
<p class=”para green”>…</p>

In that case you can use style like this:

<style>
.para {
border: solid 1px #0000FF;
margin: 6px;
}
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
</style>

So you do not need to write separate class. You just use combine class for both styles.

3) Graphics paths:
For any graphics file try to use same location for all graphics so that it can be maintain easily and you do not have to specify different path.

4) Use own bullet rathan than default bullet:
You can design your custom bullets in graphics and use them easily in list items.

<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>

<style>
ul { list-style-image: url(“bull.jpg”); }
</style>

5) Use effects:
Use visual effects for more styling display. This will attracts users.

6) Color can be clashed:
Suppose you specify a text color but forgot to mention background color then somewhere it may be fault or nor proper for color combination.
For example a brown backround color with a black text will show the format out of control. You need to match perfect color combination.

7) Show border properly:
You mentioned the border but forgot the style. As the default style is none then sometimes no border shows around the element.

Use: div {border: solid 8px;}