20 Very Useful CSS Stylesheet Tips & Tricks

css-example-pic
Following are few CSS Tips and Tricks that I think every web developer should be aware of. You may already know many of these tricks.
Disclaimer: Not all from the below CSS tricks are written by me. Some of them are taken from different sources on internet.

1. Round Corners without images

Here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other 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;
}

Further Reading: Rounded Corner Stylesheet without images

2. Create an IE Specific Stylesheet

Create a separate stylesheet altogether and include it in the webpage whenever the client is using Internet Explorer.
IE Only

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

IE 7 Only

<!--[if IE 7]>
	<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

Further Reading: IE Specific Stylesheet

3. Background Image of Textbox

Have you seen textboxes with background images like Search magnify glass or other images? Simply use following stylesheet to add background image to any input box.

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

Further Reading: Background Image for Textbox

4. Setting Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

<body>
<div id="container">

Next we create our CSS commands, so as to create a minimum width of 600px:

#container {
	min-width: 600px;
	width:expression(document.body.clientWidth < 600? "600px": "auto" );
} 

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.

5. Cross Browser Opacity

Use following stylesheet to make an element transperant by setting the opacity level.

.transparent_class {
	filter:alpha(opacity=50);  
	-moz-opacity:0.5;  
	-khtml-opacity: 0.5;  
	opacity: 0.5;  
}  

6. Prevent Firefox Scrollbar Jump

Firefox does not display scroll bar if the content of page is fitting with browser height. But if the content grows, Firefox display a scroll bar their by making a scroll jump. The content of screen will be pushed left. To avoid this we can tell firefox to add scroll bar by default.

html		{ overflow-y:scroll; }

7. Rotate Text using CSS

This example rotates text 90 degrees counterclockwise.

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

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

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

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

8. CSS for Handheld/Mobile devices

A separate CSS document can be created for PDAs and mobile phones, and only activated when one of these devices is being used to access your site. More and more websites are creating separate CSS documents for printing, so web pages automatically become print-friendly when users choose to print them. You can also do the same for handheld devices.
The following command is used to call up the CSS document for handhelds:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" /> 

9. 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;
}

10. Remove Dotted Link Borders

Dotted borders around links are an accessibility feature most browsers have by default. It’s for users who must or choose to navigate by keyboard, there is a visual style applied to those links when “tabbed” to. These borders also show up when the link is clicked (in it’s “active” state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:

a:active {
	outline: none;
}

11. Centering a Website

Most of website uses this technique to center the content.

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>
#page-wrap {
     width: 800px;
     margin: 0 auto;
}

12. CSS Drop Caps

This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap.

p:first-letter {
       font-size : 300%;
       font-weight : bold;
       float : left;
       width : 1em;
}

13. Attribute-Specific Icons

CSS Attribute selectors are very powerful giving you many options to control styles of different elements e.g. you can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

a[href$='.doc'] {  
        padding:0 20px 0 0;  
        background:transparent url(/graphics/icons/doc.gif) no-repeat center rightright;  
    }  

14. Capitalize Text

This trick is especially useful for displaying title of an article on a web page with all its words starting with capital letter.

text-transform: capitalize;  

text-transform: lowercase

text-transform: uppercase
  • none: No capitalization. The text renders as it is. This is default
  • capitalize: Transforms the first character of each word to uppercase
  • uppercase: Transforms all characters to uppercase
  • lowercase: Transforms all characters to lowercase
  • inherit: Specifies that the value of the text-transform property should be inherited from the parent element

15. CSS Text Shadow

Regular text shadow:

p { text-shadow: 1px 1px 1px #000; }

Multiple shadows:

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:

1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

16. Using !important

Experienced CSS programmers are usually aware of this but beginners do miss out on this !important CSS rule. By adding !important to your CSS rule, you can increase its precedence over other subsequent rules. e.g. in below code, background-color will be blue and not red due to !important.

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

17. Print Page Breaks

While most of the internet users prefer to read content online but some of your users might like to print your article. With CSS you can control the page breaks within content just add this CSS class to your stylesheet and add this class to any tag which you would like to print on next page.

.page-break        { page-break-before:always; }  

18. CSS Pointer Cursors

This trend has caught up lately. All user interface elements on a web page that can be clicked by user have their cursor similar to that of hyperlink. Here’s the CSS trick to do that.

input[type=submit],label,select,.pointer { cursor:pointer; }  

19. Set a Consistent Base Font Size

Setting the font-size property to 62.5% in body tag makes 1em equal to 10px. This lets you use em easily as you can find out the font-size in pixels from em values.

body{ font-size:62.5%; }  

20. Perfect Page-Printing with CSS

An overlooked feature on the website is the “print this article” link. There are many people who use the Internet who still like to print out useful articles and store them in paper form. In order to pull this off, you need to use CSS/XHTML page breaks.

@media all  
    {  
           .page-break    { display:none; }  
    }  
      
    @media print  
    {  
           .page-break    { display:block; page-break-before:always; }  
    }  

Further Reading:
20 Top jQuery tips & tricks for jQuery programmers
20 very useful Java code snippets for Java Developers
15 very useful PHP code snippets for PHP developers

Get our Articles via Email. Enter your email address.

You may also like...

28 Comments

  1. designfollow says:

    thanks for this great tips

    • Viral Patel says:

      @designfollow: You welcome :)

  2. Great css tips, thanks for sharing!

  3. umaimath says:

    Hi Viral, i have one doubt, i have devided my page into two divisions , one for left menu and main content. I have given same length for both in home page, but in other pages main contents will be more than left menu, i want left ‘s background image to be expanded with respect to the right content. I tired relative parameter, but not working. Please help.
    Thank you,
    Umaimath.

  4. Sven says:

    Thanks. Great tips. Some of them I already knew, but others are quite useful.

  5. Sanjeev says:

    Nice Tips. Its very help full for freshers.

  6. Vaibhav says:

    Nice Tips,Some are new to me.Thanks

  7. Ekendra says:

    Really great styled tips. I have been looking around some of them, while I don’t understand the others.
    Thank you for such a nice article.

  8. Very Nice tips , thank you for sharing to all ….. :)

  9. Janzell says:

    very Nice tips, I love the rounded corner tips..

    Thanks,

  10. suresh says:

    nice its very useful, thnks

  11. vara says:

    Amazing! 20 useful tricks at one location

  12. Ameeto says:

    Great work some of them are good really good..!!

  13. Mahendra Yadav says:

    Very Nice Tips , Thank You………………………!

  14. ananta says:

    Nice Tips…Thanks……

  15. Vaan says:

    As a CSS noob. This is very helpful. Thank you!

  16. Zainal says:

    nice tips, many things can do…thanks

  17. tarun says:

    thats not work proper in chrome.

  18. Very useful tips. Thank you !

  19. Valli Pandy says:

    Nice summing up of CSS tips, especially the IE workaround. Thank you.

  20. Maunish Shah says:

    Nice place for CSS beginners to start thier tasks with. Thanks.

  21. Rahmat says:

    Very helpful. thanks..

  22. Rahmat says:

    Very helpful. thanks..

  23. Rahmat says:

    Thanks. It seems that this tutorial will help me

  24. antoine9298 says:
    #container {
    width:expression(document.body.clientWidth &lt; 600? &quot;600px&quot;: &quot;auto&quot; );
    }
    

    is now

    #container{
        width: 600px;
    }
    @media (min-width: 600px){
        #container{
            width: auto;
        }
    }
    

    or even

    #containe{
        min-width: 600px;
    }
    
  25. Bhumi says:

    very useful tricks. Thanks

  26. Very useful tricks… This tuto help me..

Leave a Reply

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