Image Sprites in Cascading Stylesheet

An Image Sprite is a collection of two or more images created in a single file that is put into a single image.

For the demo we will be using this image.



In the image above we have three different images, each with different colors. But all of these images are created in a single file.

Currently in my Index.html, I have the following code inside the body section.



If we open this page in a web browser, it will look like this.



The next step is to write some CSS code that will hide the links.

And since we are using an external CSS file, it is important to specify the external file address.

<link rel="stylesheet" type="text/css" href="style.css"/>

Create a new rule in your CSS file that will hide the links as in the following:



The preceding rule states, look for a class with a name designIcon. Inside this class look for all the links and change the display from inline to block and set the indent to -9999px to hide the hyperlink.



The next step is to create a rule that will add a home icon in white color.



The preceding rule states, search for an id Home and in that look for hyperlinks, if hyperlinks are found then set the width to 170px, height to 160px, set a background image, background position and set the background repeat to no repeat because we don't want the image to be repeated again.



Now we will create another CSS rule that will change the color of the home icon to Yellow when the cursor is hovered over it.



In the preceding rule, we have used the background-position property. We want the position 0px horizontally and an offset of 158px because if you look at the image that we are using here, the yellow home icon is below the white icon. So, to shift the yellow icon up we need to set the offset vertically.

Save and refresh the page.

Hover your mouse, you will see it's working.



We will create another rule for when the home link is active, in other words when we click the home icon, the color should be changed to Red.





So, we have created an Image Sprite for the home link. Now let's create the same for the message link.



In the preceding rule, we have written the same thing except we have added an offset to -180px that will hide the home icon present in the image.

Save and refresh the page.



Now when we hover the mouse, we want the message icon color to be changed to Yellow.



We are setting an offset both horizontally and vertically that will shift the Yellow colored image to the top.

Hover the mouse.



When this message link icon is active, we want to change the color from Yellow to Red. So, let's create a rule for that.



In the rule above, we are setting the offset of 180px horizontally that shifts the home icon to the left and we are setting the offset of 322px vertically that will shift the Red colored image to the top.



Advantage of Image Sprite

A web page with many images can take a long time to load but using an Image Sprite, the page loads faster.