What is CSS Ooze?

CSS Ooze is a branch of Primeval Press. Its purpose is to provide functional style sheets for free public use. It also serves as a personal playground as I try see what CSS can do.

Since more people are getting online every day now, and many want to have a "web presence," there has been an explosion in the number of personal sites. Most people have no interest in the trickier bits of HTML, XHTML, CSS, and so on. But CSS is by far the best way to give a web page its own unique appearance, not to mention added functionality. Just because you don't know CSS doesn't mean you shouldn't be able to have an attractive looking page! The style sheet provided here can help.

How does it work?

It's simple! On the right is a list of style sheets you can currently download from CSS Ooze. At the top left you'll see a button labeled ‘view test page’. By clicking it you'll be taken to a basic page that features all the common elements used in HTML, like bulleted lists and tables. It begins with a simple style sheet applied to it: at the top of the page will be a control panel with other possible styles listed. By clicking on one of those styles, you'll be able to see it applied to the current page.

When you find a style you like, click on the ‘download’ link to get it. For the simpler styles, you will merely be taken to the .css file itself. Some of the styles involve images however, in which case you'll be pointed to a .zip file containing everything you need.

The sheets should then be fairly easy to use with any existing HTML file. If you don't know how to use style sheets, See Appendix A as well as the notes in whatever style sheets you download. Most of the sheets use basic divisions to organize content, with few other elements besides standard HTML tags. See Appendix B for a list of what tags are affected.

Where can I use these sheet?

You are free to use the style sheets provided here on any web page you want—you don't even have to give credit. Also feel free to open the style sheets up to look at them and change them in any way you see fit. No strings attached.

Will you design a style sheet for me?

Probably not. CSS Ooze is a public service, and a way for me to play around with CSS in my spare time. If you have a specific design in mind that you want, that would take a lot more time and effort, so you would have to pay me for it—but there are far more qualified, professional web page designers out there, and I'd urge you to talk to them about it. On the other hand, if you just saw some cool public sculpture and you think it could inspire a great page design, feel free to tell me about it. If I feel the same way, maybe I'll do something up—but no gaurantees.

Appendix A: How do I use a style sheet in my own page?

Applying a sheet to your page is als simple, particularly for the more basic designs (the first few in the list). After you've downloaded the style sheet you want, place it in the directory with the page you're creating (or upload it to the server directly if you're using an automated page-maker through your web host). Open your HTML file. Underneath the

label, insert the following line:

Change sheet.css to the name of the sheet you downloaded (or rename that file). For the sheets in the top half of the list, find the tag and insert

imediately after it. Then find the tag at the bottom of the document and insert
imediately before it. That's all you need to do for the simpler sheets: after loading your page in a browser it should look completely different. If it doesn't, see Appendix C.

The more complex sheets from the lower level of the list will for the most part work in the same way, but they also offer additional control by providing navigation bars and other features. There's not much more to using these: generally just the insertion of additional

tags. If you look at the CSS file itself, there will be some comments (text enclosed in /** and **/) to tell you how to use them.

Appendix B: HTML Tags Affected by CSS Ooze Sheets

body a hr strong em img
p q big small dd dt
h1 h2 h3 h4 h5 h6
table th td ol ul caption
blockquote

Abbendix C: Problems

If the sheet you downloaded doesn't seem to work, chances are your HTML code doesn't use the standard tags that CSS Ooze sheets change—see the list in Appendix B. This has probably come about because you're used to not using CSS, (or you learned HTML from somewhere that didn't expect you too), and as a result used tags like to control things like text color.

With CSS you don't need to do that—in fact you shouldn't. Instead you should use the more generic tags listed in Appendix B that in plain HTML don't do much, but when linked with CSS can make a very pretty page.

If your problem still isn't fixed, and the sheets don't work, you can try and I may be able to help you out. (Be patient though, I'm often pretty busy.)

Credit

Credit is due to various web sites and individuals: Jeffrey Zeldman for his book Designing with Web Standards and A List Apart, the e-zine he runs; the Web Consortium—particularly for the CSS specs on its site; and Paul Sowden, for his javascript "style switcher," which was featured in his article Alternative Style: Working with Alternate Style Sheets in the Nov. 2001 issue of A List Apart.


Primeval Press

View Test Page
simple download
black & blue download
orange download
vellum download