20 Very Useful CSS Stylesheet Tips & Tricks

by · November 6, 2009

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

Code language: CSS (css)
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;
}

Code language: CSS (css)
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]-->

Code language: HTML, XML (xml)
IE 7 Only
<!--[if IE 7]>
	<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

Code language: HTML, XML (xml)
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;
}

Code language: CSS (css)
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">

Code language: HTML, XML (xml)
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" );
} 

Code language: CSS (css)
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;  
}  

Code language: CSS (css)

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

Code language: CSS (css)

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);
}

Code language: CSS (css)

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" /> 

Code language: CSS (css)

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

Code language: CSS (css)

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

Code language: CSS (css)

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>

Code language: HTML, XML (xml)
#page-wrap {
     width: 800px;
     margin: 0 auto;
}

Code language: CSS (css)

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

Code language: CSS (css)

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

Code language: CSS (css)

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

Code language: CSS (css)
  • 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; }

Code language: CSS (css)
Multiple shadows:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

Code language: CSS (css)
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; }  

Code language: CSS (css)

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

Code language: CSS (css)

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

Code language: CSS (css)

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%; }  

Code language: CSS (css)

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

Code language: CSS (css)
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.

Tags:

You may also like...

28 Comments

  1. designfollow says:
    7 November, 2009, 16:02  

    thanks for this great tips

    Reply
    • Viral Patel says:
      7 November, 2009, 16:27  

      @designfollow: You welcome :)

      Reply
  2. Resources Mix says:
    9 November, 2009, 13:39  

    Great css tips, thanks for sharing!

    Reply
  3. umaimath says:
    8 December, 2009, 15:36  

    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.

    Reply
  4. Sven says:
    22 January, 2010, 3:22  

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

    Reply
  5. Sanjeev says:
    14 May, 2010, 9:52  

    Nice Tips. Its very help full for freshers.

    Reply
  6. Vaibhav says:
    24 June, 2010, 22:38  

    Nice Tips,Some are new to me.Thanks

    Reply
  7. Ekendra says:
    25 July, 2010, 10:13  

    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.

    Reply
  8. Anil Kumar Panigrahi says:
    26 July, 2010, 17:51  

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

    Reply
  9. Janzell says:
    25 November, 2010, 7:41  

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

    Thanks,

    Reply
  10. suresh says:
    1 February, 2011, 22:23  

    nice its very useful, thnks

    Reply
  11. vara says:
    7 March, 2011, 12:25  

    Amazing! 20 useful tricks at one location

    Reply
  12. Ameeto says:
    21 June, 2011, 7:48  

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

    Reply
  13. Mahendra Yadav says:
    15 July, 2012, 23:20  

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

    Reply
  14. ananta says:
    5 November, 2012, 14:33  

    Nice Tips…Thanks……

    Reply
  15. Vaan says:
    16 November, 2012, 12:03  

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

    Reply
  16. Zainal says:
    9 December, 2012, 6:01  

    nice tips, many things can do…thanks

    Reply
  17. tarun says:
    18 May, 2013, 16:28  

    p:first-letter

    thats not work proper in chrome.

    Reply
  18. André Ortais says:
    2 July, 2013, 1:58  

    Very useful tips. Thank you !

    Reply
  19. Valli Pandy says:
    26 February, 2014, 23:50  

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

    Reply
  20. Maunish Shah says:
    19 May, 2014, 19:45  

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

    Reply
  21. Rahmat says:
    31 December, 2014, 8:27  

    Very helpful. thanks..

    Reply
  22. Rahmat says:
    31 December, 2014, 8:27  

    Very helpful. thanks..

    Reply
  23. Rahmat says:
    31 December, 2014, 8:29  

    Thanks. It seems that this tutorial will help me

    Reply
  24. antoine9298 says:
    31 December, 2014, 16:00  

    #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;
}

    Reply
  25. Bhumi says:
    11 February, 2015, 14:32  

    very useful tricks. Thanks

    Reply
  26. ayat al kursi says:
    13 February, 2015, 16:34  

    Very useful tricks… This tuto help me..

    Reply

Leave a Reply

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

Follow: