Sep 29 2013

Useful CSS Tips And Tricks

September 29, 2013 in Web Design Tips & Tools | 2 Comments

css tips and tricks, css tips, css ideas, css for beginners

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>

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.


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.

<form method="post" action="#" >
<p><label for="username" >Username</label>
<input type="text" id="username" name="username" />
<p><label for="password" >Username</label>
<input type="password" id="password" name="pass" />
<p><input type="submit" value="Submit" /></p>

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

2 thoughts on “Useful CSS Tips And Tricks

Leave a Reply

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