How do I create CSS sprites?

How do I create CSS sprites for my website?

Creating CSS sprites involves combining multiple images into a single image file. This reduces the number of HTTP requests.

What are the steps to create a CSS sprite?

1. Combine images into one file using an image editor. 2. Use CSS to define the background position for each image.

Can you show me an example of the CSS code?

Sure! Here's a simple example:

.sprite {
  background-image: url('sprite.png');
  display: inline-block;
}
.icon1 {
  width: 50px;
  height: 50px;
  background-position: 0 0;
}
.icon2 {
  width: 50px;
  height: 50px;
  background-position: -50px 0;
}

This code defines two icons from the sprite.

What tools can I use to create CSS sprites?

You can use tools like SpriteSmith, CSS Sprite Generator, or even graphic design software like Photoshop to create CSS sprites.