20 Very Useful CSS Stylesheet Tips & Tricks
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

Experienced CSS programmers are usually aware of this but beginners do miss out on this CSS rule. By adding 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 . 
.page { background-color:blue ;   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

View Comments

Leave a Comment
Share
Published by
Viral Patel
Tags: CSS tips & tricks
14 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago