10 Very Helpful CSS Stylesheet Tips & Tricks

CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers.Following are some Very Helpful CSS Tips and Tricks that I think every web developer should be aware of. You may already know many of these tricks.Here is 10 Very Helpful CSS Stylesheet Tips & Tricks.

1. CSS Tips & Trick-Round Corners of DIV without using images

This is a simple CSS trick of rounding off the corners of the DIV using some css attributes.This will work on all CSS3-compatible browser. This technique will not work in Internet Explorer.

div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

To round a specific corner (top-left or bottom-right) use below stylesheet.

div {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}

2. CSS Tips & Trick-Create an IE Specific Stylesheet

Create an ie specific stylesheet and include it in the webpage whenever the client is using Internet Explorer.The below code show you how to

include an IE Specific Stylesheet on webpage.

For IE use this

For IE7 use this 

3-CSS Tips & Trick - Add Background Image of Textbox

you can use the following stylesheet to add background image to any input box.

input#yourtextbox {
background-image:url('backgroudimage.gif');
background-repeat:no-repeat;
padding-left:20px;
}

4- CSS Tips & Trick -Rotate Text using CSS

This example rotates text 90 degrees counterclockwise.

.rotate-style {
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

5- CSS Tips & Trick -Change Text Selection Color

By default, browsers uses blue color as the text selection. You can change this color to match your website theme.

/* Mozilla based browsers */
::-moz-selection {
background-color: #FFA;
color: #000;
}

/* Works in Safari */
::selection {
background-color: #FFA;
color: #000;
}

6- CSS Tips & Trick-Center elements

It's easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.

body {
text-align:center; /* for ie */
}


#container {
width:800px;
margin:0 auto;
text-align:left;
}

7. CSS Tips & Trick - CSS Positioning

Set the abolute position within a container. #myitem will appear inside the #mycontainer exactly 200px from the left and 50px from the top.

#mycontainer {
position: relative;
width:500; height:300;
}



#myitem {
position: absolute;
left: 200px;
top: 50px;
}

8-CSS Tips & Trick -Prevent line break

This is a simple css tips, but some of us might not know about it. It forces the text display in one line.

h1
{
white-space:nowrap;
}

9-CSS Tips & Trick-Force page breaks when printing your document

Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements.