Useful CSS Tips And Tricks

Cascading Style Sheets (CSS) is the style sheet used to define the HTML elements. This can be also applied to any kind of XML document, including plain XML, SVG and XUL. These styles are normally saved in external .css files. These external style sheets can save lot of your time while editing the layouts of all the pages in a website.

Here are some important and useful CSS tips and tricks that can be helpful for developers.

1. Usage of !important

Most beginners miss the !important CSS rule, This CSS rule is applied to increase its rank over other subsequent rules. For the example below, the blue color is made more important than the red color:

.page { background-color:blue !important;   background-color:red;}

2. Centering a Fixed-Sized Element
This is one method to center a fixed-height/fixed-width div at the center of its container. This can be also used for centering text, images etc. Please note that parent container must have a position: relative property for this work
<pre>div {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px; <strong>/* 1/2 of your element height*/</strong>
margin-left: -200px; <strong>/* 1/2 of your element width */</strong>
}</pre>

3. Removing Active Link Borders
You might have noticed, browsers like Internet Explorer and Firefox adds a dotted line border over the link user clicked before. It is useful user accessibility feature but if you want to get rid of it, here is the small code that can help you.
a:active, a:focus{ outline:none; }

4. Small Caps Text
Small caps text property can make all the letters to capital. This also makes all other letters other than the first, to be a little smaller.
 font-variant:small-caps;
5. CSS transform for Hover Effects
Mouse hover effect is always a better choice for better user experience. This CSS transform trick enables you to create interesting hover effects. You can also enhance this feature by using transform property. This is supported by many browsers which have CSS3 support.
a {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}

6. Removing Image Border
What is your opinion about image hyperlinks? Most of the times they look ugly right ? For the people who wants to remove border on hyperlinked images, here is the CSS code
a img{ border:none; }
7. Creating Forms Using Labels w/o Tables
You don’t need tables to layout forms, those were old days. Now CSS is capable to make forms using label tags. Label tags makes your forms more accessible.
</pre>
<form method="post" action="#" >
<p><label for="username" >Username</label>
<input type="text" id="username" name="username" />
</p>
<p><label for="password" >Username</label>
<input type="password" id="password" name="pass" />
</p>
<p><input type="submit" value="Submit" /></p>
</form>
<pre>
You may also like some of our html best practice tips. Read it at html best practices.
      

        
Looking for a good team 

        for  your next project?
        
        
Contact us and we'll give you a preliminary free consultation 
 on the web & mobile strategy that'd suit your needs best.
      
        Contact Us Now!