Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Image Sprites

10 minutes

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

CSS Image Sprites

Image Sprites

An image sprite consolidates multiple images into a single image file, which helps optimize loading times and reduce server requests for web pages with numerous images, ultimately conserving bandwidth.

Image Sprites – Simple Example

Instead of employing three distinct images, we utilize a single image named “img_navsprites.gif”.

navigation images

Through CSS, we can selectively display only the required portion of the image.

In the forthcoming example, the CSS specifies the segment of the “img_navsprites.gif” image to display.

Example

#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

Example explained:

<img id=”home” src=”img_trans.gif”> – Represents a small transparent image placeholder since the src attribute cannot be empty. The actual image displayed will be determined by the background image specified in CSS.
width: 46px; height: 44px; – Specifies the dimensions of the portion of the image we intend to utilize.
background: url(img_navsprites.gif) 0 0; – Indicates the background image and its position (left 0px, top 0px).

This method provides a straightforward approach to utilize image sprites, and now we aim to enhance it by incorporating links and hover effects.

Image Sprites – Create a Navigation List

We aim to utilize the sprite image (“img_navsprites.gif”) to construct a navigation list.

Utilizing an HTML list is preferred as it supports both links and background images.

Example

#navlist {
  position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {
height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
  background: url(‘img_navsprites.gif’) 0 0;
}

#prev {
left: 63px;
width: 43px;
  background: url(‘img_navsprites.gif’) -47px 0;
}

#next {
left: 129px;
  width: 43px;
  background: url(‘img_navsprites.gif’) -91px 0;
}

Example explained:

#navlist {position:relative;} – The position is set to relative to enable absolute positioning within it.
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} – Margin and padding are reset to 0, list-style is removed, and all list items are absolutely positioned.
#navlist li, #navlist a {height:44px;display:block;} – The height of all images is standardized to 44px, ensuring consistent display.

Let’s now proceed to position and style each specific component accordingly.

#home {left:0px;width:46px;} – Positioned completely to the left, with a width of 46px.
#home {background:url(img_navsprites.gif) 0 0;} – Specifies the background image and its position (left 0px, top 0px).
#prev {left:63px;width:43px;} – Positioned 63px to the right of #home (considering #home width 46px plus additional spacing between items), with a width of 43px.
#prev {background:url(‘img_navsprites.gif’) -47px 0;} – Sets the background image 47px to the right of #home (accounting for #home width 46px and a 1px line divider).
#next {left:129px;width:43px;} – Positioned 129px to the right (taking into account the start of #prev at 63px, plus #prev width 43px, and additional spacing), with a width of 43px.
#next {background:url(‘img_navsprites.gif’) -91px 0;} – Specifies the background image 91px to the right of #home (considering #home width 46px, 1px line divider, #prev width 43px, and another 1px line divider).

Image Sprites – Hover Effect

Next, we aim to implement a hover effect for our navigation list.

Tip: The :hover selector is applicable to all elements, not just links.

Our updated image (“img_navsprites_hover.gif”) comprises three navigation images and three images designated for hover effects.

navigation images

As this is a single image file rather than six distinct files, there will be no loading delay when a user hovers over the image.

We only need to include three lines of code to implement the hover effect.

Example

#home a:hover {
background: url(‘img_navsprites_hover.gif’) 0 -45px;
}

#prev a:hover {
background: url(‘img_navsprites_hover.gif’) -47px -45px;
}

#next a:hover {
background: url(‘img_navsprites_hover.gif’) -91px -45px;
}

Example explained:

#home a:hover {background: url(‘img_navsprites_hover.gif’) 0 -45px;} – All three hover images are assigned the same background position, but 45px lower.