CSS Gallery

Style sheets, they sound great, but what can I do with them? That's what this page is about. We want to showcase some simple and not so simple examples of the use of style sheets, and let you see what can be done in practical terms. In many of these cases style sheets are the only tool used to achieve the effects we talk about. While most of the sites in the gallery have used a style sheet to do several things, I've arranged a lot of them according to different uses of style sheets which are demonstrated particularly well at the site, so some sites appear a number of times. At the end of each section you'll also find a link to the Style Sheets Cookbook, which shows you how to achieve this particular effect.

If this is your very first contact with style sheets, you might like to have a look at these pages and then work through the first few sections of The House of Style's Hands-on Tutorial to familiarize yourself with what a style sheet is and the basics of how they work. Then you'll be ready to start cooking!

Have you already got a site that uses style sheets? Drop me a line about it and I'll be happy to include it in the collection.

CSS Buttons and Rollovers

What can I say - these buttons and rollovers (note: the rollover effect unfortunately doesn't work on IE 5 Mac) were created by CSS Guru Eric Meyer, so they're standards compliant and also a fantastic, very lightweight technique. Go for your life.

New! Check out our recipe for CSS Buttons in the Cookbook. Rollovers coming soon!

CSS Positioning

We can all breathe a sigh of relief and say goodbye to tables for layout forever. It's time to start usiing the correct tool for the job: CSS positioning.

Bill Evans uses absolute positioning with an embedded style sheet to create this site for Kerry Livgren and his record company.

La Terrazza restaurant's web site is another example of CSS positioning being used in a commercial context - we really don't have to be frightened anymore.

Coming soon: we bite the bullet and do a rework of our own site using CSS relative positioning.

And don't forget you don't have to code it all by hand anymore. Layout Master gives you a WYSIWYG environment in which you can quickly develop HTML4.0 + CSS based page layouts.

Nifty backgrounds

The background-image property allows you to do all sorts of clever things, limited only by your imagination.

The Florida BigFoot Page by Lisa Bradshaw actually uses an animated gif for the background image - careful when you try this at home though - this one works because it is subtle.

Creating a side panel is a clever little "trick" you can do with style sheets to achieve a pleasing effect with what can be a very small gif.

Hans Moll has some "wood-panelling" on the left hand side of all his pages about The Moor, a Swedish band. You'll notice this is also a good way of creating consistency throughout the site, so people know they are still there, that they haven't gone to another site.

Daniel Greene's Style Sheets demo page has a column of ivy down the left hand side of every page. If you view this page with IE 4 or later, you'll see another nice effect that he has achieved using style sheets. Notice what happens when you scroll down the page? The ivy column remains "fixed" while only the text moves. You can see how to do this in the cookbook as well. And don't worry about what happens in Navigator, the column looks fine and it just scrolls with the rest of the page.

Jim Barricks has also used the fixed side bar to create different effects throughout his Recipes pages.

Jan Roland Eriksson has a fixed side bar on his pages.

Learn how to create a side panel in the Style Sheets Cookbook.

Customize how links appear

With style sheets you have a lot more control over how links appear on your pages - no longer the boring underlined colored text that is the default in most browsers. As well as allowing you to make your pages look a little individual, this also means you can make different types of links look different. The most simple example of this is to have links that go to other sites look different rom links which go to other parts of the same site. We do that on this page: links to the pages in the gallery look like this, while links to the Style Sheets Cookbook look like this.

Jack Earl's Giant Harmonica Hymnbook uses a style sheet to create links that look distinctively different when you rollover them, and when they have been visited.

Similarly Jeffrey Zeldman and Brian Platz at A List Apart.

Daniel Greene has a Style Sheets demo page which has used a style sheet to provide a different appearance for all four link states: unvisited, visited, hover and active.

Learn how to customize your links in the Style Sheets Cookbook.

Customize general text appearance

It's easy to do all sorts of things with text using a style sheet. You need only create a single rule for each of the elements on a page (paragraphs, headings, and so on). Then every paragraph on the page will automatically adopt the same appearance, and the same for headings and the other elements you added to your style sheet. And when you want to update the appearance, or your client wants to make some modifications (they always do), all you have to do is change the style sheet and all your pages will change too.

Jim Barricks has created a great style sheet for his Insurance pages that makes his tables and forms look very snazzy indeed.

Jack Earl's Giant Harmonica Hymnbook uses style sheets for the effects they can give. For example the title on the front page will appear in a cursive font where possible. All of the music for the hymns appears in a particular font and color. With HTML alone, each element would need to have <font> tags added. Then if you wanted to change the font and color, you would need to edit each font tag. With style sheets, just edit one rule, and you are done. Think of how much time this could save, and how helpful it is in maintaining consistency.

Nathalie Duplain Michel has used Style Master for a web site about the village of Undervelier. She's used a style sheet to give a distinctive style to lists, headings and links.

Jeffrey Zeldman and Brian Platz use style sheets at A List Apart, their beautifully designed webmaster's resource and general inspiration center. They use CSS to give their own style to links, as well as to text and headings, page backgrounds and so on on a consistent basis. Their site is in fact a particularly good exercise in using style sheets pragmatically, ie, being prepared to use frames and tables when it's absolutely necessary to achieve your design ends, but using style sheets to do so whenever possible.

Brendan Cassida uses style sheets extensively at his Withered Pipedream site. Look out in particular for his text formatting.

Daniel Greene has a Style Sheets demo page that uses a sophisticated style sheet to achieve a lot of different effects. As well as all the standards like paragraphs, headings and links, Daniel has created special styles for pullquotes, inline quotes, footers, and to add emphasis to inline elements as well.

Sid Walker used Style Master to create their web site FNQ Web, a web page design service. Here the style sheet creates a unified page appearance as well as customized styles for headings, links and so on.
One of their projects is a web site for WWOOF, Willing Workers on Organic Farms. This site has a very sophisticated style sheet that gives it a particular appearance for links, headings, text they want to stand out in some way and so on.

Learn a few simple tricks for customizing text appearance in the Style Sheets Cookbook.

Create navigation bars and footers

Amanda Sherwin used Style Master to include style sheets at her site for The Rushlight Club. Style sheets are used amongst other things for the navigation bar at the side of every page, to give the name of the club the same appearance wherever it appears in the site, and to place a consistent footer at the bottom of every page.

Sid Walker's page for WWOOF has a navigation bar at the bottom of every page, styled using a style sheet.

Mauricio Pfieffer has used a style sheet to create the navigation bar at the bottom of all the pages in this record catalog for Universal Music Mexico.

Our Hands-on Style Sheets Tutorial and Handbook both use a style sheet to create the navigation bar which appears on every page.

Learn how to create navigation bar or footer in the Style Sheets Cookbook.

Integrate text with Images

Making text and images flow and work together in the same way as they do in "print-oriented" packages such as PageMaker, Word and so on, for whatever reason is a bit of a web page holy grail. In theory you should be able to achieve very sophisticated layouts using, among other things the CSS properties of float and clear. And indeed IE5 and Mozilla do support these very well. Unfortunately, though, they were not at all well supported in older browsers, and the use of them often resulted in very bizarre effects. The good news is though that as long as you don't want to do anything too sophisticated, you'll probably get what you want without too much risk of rubbishy pages in older browsers.

A common thing that people want to do is to make images "float" to either the left or the right of text, and have the text flow around this image.

Jan Roland Eriksson, on his In Person page gives the inline rose image a property of float right, which makes it float to the right of the paragraph while the text just flows around it. Otherwise, the rose would just appear inline with the text wherever it was inserted.

Learn how to make text flow around images in the Style Sheets Cookbook.

Create a unified page appearance

simon says is a lovely collection of pages using CSS with a very pleasing color scheme. A lesson in simplicity to us all.

Withered Pipedream from Brendan Cassida uses style sheets to create a very "now" appearance. Shows what can be done with CSS, and even very css challenged browsers, such as Navigator 4.

Dr Jeffrey W. Hull's Parents Common Sense Encyclopedia arranges each entry in the encyclopedia on a single page. Obviously, the information on each page must be arranged similarly, and the pages must all look similar to one another. Headings, paragraphs, lists and so on must all look the same on every single page so that users will always know where they are and quickly be able to find what they are looking for. As information is added to the encyclopedia in the future, the author may need to make changes to how the information appears on all the pages. This is the type of project for which you would be mad not to use a style sheet.
In fact, the author strongly recommends the use of style sheets for any web publishing project involving more than a couple of pages.

Jordan Levy's Xonex International site again uses style sheets to maintain a consistent appearance across a large number of pages. The site displays a large catalog of classic die-cast models to home decor all made by Xonex. Consistency of font and so on is achieved with a style sheet.

Mauricio Pfieffer has used Style Master style sheets for a number of sites.
The site for Universal Music Mexico needed a catalog of records that could easily be given a consistent appearance. You can see particularly the use of style sheets on the individual pages for the different records. Likewise Discos Manicomio is another site by Mauricio with a catalog for a record label.