27Oct 2017

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.

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!
Rajeesh PK

Rajeesh PK

Rajeesh P.K. is the Director and Creative Head at Acodez . With an experience of 10+ years in UX Design & User Interface Design, when coupled with his expert coding skills in HTML5, CSS3 and Javascript, makes him one of the top UX Architects in India, with more than 15 international awards to his credit.

Get a free quote!

Brief us your requirements below, and let's connect

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 *