09Nov 2015

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:

[code]
.page { background-color:blue !important;   background-color:red;}
[/code]

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

[code]
<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>
[/code]

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.

[code]
a:active, a:focus{ outline:none; }
[/code]

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.

[code] font-variant:small-caps;[/code]

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.

[code]
a {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
[/code]

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

[code]a img{ border:none; }[/code]

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.

[code]</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>[/code]

You may also like some of our html best practice tips. Read it at html best practices.

2 Comments

  1. Peter Siddle

    Hi,

    Great Post! CSS is the well-known and key element that is used to develop unique, attractive & user-friendly websites. Thanks for sharing these useful tips.

  2. Rajesh chaubey

    This is very useful tips for every UI-Developer and Designer .
    Thanks For sharing Valuable Information .

Leave a Comment

Your email address will not be published. Required fields are marked *

What’s new

Brand new website for Anchor By Panasonic, fully designed and developed by team Acodez, is now live.

Working on a brand new website for Axis Bank Forex - right from Information Architecture & UX, UI and Development.

Working on a brand new website for Titan Sonata. Stay tuned to see it in action!

Signed contract with Panasonic Lighting as their digital marketing agency

Brand new website for CavinKare, fully designed and developed by team Acodez, is now live.

Signed Contract for a 5000+hours Web application for an investor firm in Saudi Arabia

Working on the Logo and Brand Identity for Remit Money (by Axis Bank)

Signed contract for managing the Social Media accounts of Anchor Electricals

Working on new E-commerce Portal for Cover Story - by Future Group. Stay Tuned!

Launched new website for Panasonic Powertools

Just Inaugurated - our 4th office in India at UL CyberPark SEZ, Calicut