STYLE SHEETS

Creating an Artistic Blog Header with CSS Sprites

In this fourth part of a seven-part series, I build the header section of a sample blog site. It will use another set of CSS sprites -- or, in other words, a different background image -- to decorate the sections comprising its navigation bar.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

March 04, 2010

TABLE OF CONTENTS:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As you can see, the bare bones structure of this web page looks nearly the same as the one that I coded in previous parts of the series, with some subtle differences. The unordered list that the corresponding navigation bar will be seated upon has fewer items arranged in distinct categories. This is not unexpected, right?

Having already created the basic skeleton for this fictional blog site, the next logical step is to add some visual presentation to the web page sections defined so far. In the following section I’ll be defining the set of CSS styles that will accomplish this in a simple manner.

Please read the upcoming segment. It’s only one click away.

Next: Spicing up the web page >>