Avoiding copying CSS styles that stay the same for different divs

Question

#world1 {
                            background: url(/images/home/1.jpg) 0 0 no-repeat;
                            float: left;
                            width: 2%;
                            height: 4%;
                            position: absolute;
                            top: 0%;
                            left: 0%;
                            z-index: -1;
                            margin-top: -20px;
                            margin-left: -20px;
                        }

                        #world1:hover {
                            background-position: 0 -40px;
                            cursor: pointer;

I have many (about 100) of these #world(number) divs on a single page. The only thing that changes are the top and left values and the background jpg source. Everything else is the same so clearly it is a huge amount of code. Is there some way I can avoid copying the content that remains the same between all divs and only change the absolute position and background source of each individual div?

Thanks

Answer 1

Also give the div a class, for example: class="worlds".

And put all the generic styling in that class

.world {  generic styling }

#wordl1 { custom styling }