In this fifth article of a seven-part series, I demonstrate how to use a set of CSS sprites to define the visual style corresponding to the “normal” state of a navigation bar of a fictional blog site. The most complex facet of this process was to create the background image containing the corresponding sprites; the rest of the procedure merely involves manipulating the image’s X and Y coordinates via CSS.
Styling a Blog`s Links Bar with CSS Sprites - Using CSS sprites for styling the normal state of the navigation bar (Page 3 of 4 )
Since the previous div, identified as "navbar," has already been styled with an artistic texture, the look of the navigation bar that I plan to construct here logically must be consistent with this. Therefore, the background image that I'll be using for defining the different states of the bar will be the following one (notice again that the image has been modified to fit in the screen size):
Even though the building elements of the links bar have a neat, sketchy appearance, the principle that will make them work is exactly the same as the one that you learned in earlier examples. Since each state of the bar's sections has been defined within the same background image, creating their "normal" state is as simple as coding the following CSS styles:
As seen above, defining the initial state of this sample links bar is reduced to assigning the appropriate X and Y coordinates to the earlier background image. In addition, you may have noticed that each element of the bar has been positioned absolutely with reference to the parent container. Considering that this process is entirely optional, you may want to use another approach and obtain practically the same results.
Finally, I must point out that the icon set used in this particular example is a creation of Jan Cavan (http://www.tutorial9.net/author/jancavan/) and can be freely downloaded from Tutorial9's website here (http://www.tutorial9.net/resources/sketchy-web-icons-30-hand-drawn-icon-pack/), which has plenty of other cool resources for web designers as well. Also, make sure to read the corresponding license, in case you're interested in using the icons in your own web projects.
Having clarified that point, it's time to attach the previous CSS styles to the markup of the sample blog site, so you can see how all of the pieces fit neatly together. This will be done in the next section, so click on the link below and read the next few lines.
Style Sheets 
HTML5 Boilerplate Introduction
