Some useful CSS snippets all developers should know

There is no doubt that CSS is one of the most useful resources that all developers have when creating a website. In fact, along with HTML, it is one of the most important languages ​​for creating web pages. While HTML provides the structure for the page, CSS allows for the styling of the HTML code.

In this post, I will show you some useful CSS snippets that you can use when developing a website.

1. Style links depending on file format

This can be used to show small icons next to the links telling the user if the linked file is a .pdf, an image, a .doc and much more.

/* pdf files */
a[href$=".pdf"]{
     background: url(pdf.gif) no-repeat center left;
     padding-left: 20px;
}

/* doc files */
a[href$=".doc"]{
     background: url(doc.gif) no-repeat center left;
     padding-left: 20px;
}

 

2. Style links depending of their type

This snippet is very similar to the previous one. However, instead of showing the file type, it allows to display the link type (external, email, etc).

/* external links */
a[href^="http://"]{
     background: url(external.png) no-repeat center left;
     padding-left: 20px;
}

/* mail links */
a[href^="mailto:"]{
     background: url(mail.png) no-repeat center left;
     padding-left: 20px;
}

 

3. Cross-browser opacity

Not all browsers support the CSS3 opacity property. However we can make opacity work across browsers by using specific code for each one of them.

.opacity {
     -moz-opacity:.80;
     filter:alpha(opacity=80);
     opacity:.80
}

 

4. Center a website

A very common design tendency is keeping the website centered horizontally in the browser. This can be achieved by using the following lines of code.

.maincontainer{
     margin: 0 auto;
     width: 960px;
}

 

5. CSS sprite button

Currently, during the creation of a website, we have to consider all aspects to improve its usability. One aspect is getting a way to indicate to the user that he has the mouse pointer over a button. We can do this by using a sprite, ie, changing the background position of an image. So, instead of having multiple images, we can have only one (this means that we will need less requests to the server) and simply change its background position using the following code.

a.button{
     background: url(sprite.png) no-repeat;
     display: block;
     height: 20px;
     width: 150px;
}

/* when mouse is over the button */
a.button:hover {
     background-position: 0 -20px;
}

 

6. Preloading images with CSS

On a lot of websites, when we place the mouse pointer over a button, the image background changes. However, on most of these websites, we will notice a small delay when this happens. This is because the browser needs to request the new background from the server. This delay can be eliminated by preloading the required images when the page is loaded.

#imagepreloader {
     background-image: url(path/to/image1.png);
     background-image: url(path/to/image2.png);
     background-image: url(path/to/image3.png);
     background-image: url(path/to/image4.png);
     background-image: url();
     display: inline;
     height: 0px;
     width: 0px;
}

 

7. text-transform property

By using this property, you can make sure that certain blocks of text will be displayed, either on uppercase, lowercase or only the first letter of each word in uppercase, regardless of the manner in which the text was inserted into the website.

/* Transforms the first character of each word to uppercase  */
p.cap{
     text-transform: capitalize;
}

/* Transforms all characters to uppercase  */
p.upper{
     text-transform: uppercase;
}

/* Transforms all characters to lowercase  */
p.lower{
     text-transform: lowercase;
}

 

8. Flip images

Flipping an image instead of loading a new one can be useful in some situations. For example, if you need to place an arrow in different directions in the same page, you can just this trick.

img.flip {
     -moz-transform: scaleX(-1);
     -o-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
     filter: FlipH;
     -ms-filter: "FlipH";
}

 

9. CSS Drop caps

Drop caps can easily be done by using the CSS pseudo-element :first-letter. This should work in all modern browsers.

p:first-letter {
     background: #ddd;
     display: block;
     float: left;
     font-family: Helvetica;
     font-size: 1.4em;
     margin: 5px 5px 0 0;
}

 

10. Target IE7 (and below) and IE6 (specifically)

We all know about this problem. I can’t understand the reason, but we always need to add some fixes and hacks to target the Evil IE6 and its son IE7. The most used technique is to create a different CSS file with specific instructions and add conditional comments on html page. By using the following lines, you will be able to target these two “special browsers”.

.div {
     background: red; /* modern browsers */
     *background: green; /* IE 7 and below */
     _background: blue; /* IE6 exclusively */
}

Do you know other useful techniques? You are invited to share them with me and the world in the comments section.

 

Bonus: How to target mobile devices?

By HTML:

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

By CSS via @media

@media screen { /* rules for computer screens */ }
@media handheld { /* rules for handheld devices */ }

or using @import

@import "screen.css" screen;
@import "handheld.css" handheld;

css, web