October 4, 2006 - 10:18am
5 comments

CSS is amazing

Categories:

One of the things I am working on is creating websites for nonprofits. In the past, I used CSS a little for changing background colors, fonts, etc because I saw it somewhere but I had no idea what it was capable of. (For anyone who hasn't heard of it, CSS can be used to create designs for HTML pages. It allows one design file to be used for multiple pages in a website so that changing the font all across a site, for example, does not require changing each page in the site.)

The CSS Zen Garden project provides a webpage for designers to create CSS designs for, which are then posted online. Each of the designs use the same HTML code (so they have the same content) - the only difference is the CSS (including images) design. Of the hundreds of designs posted online, here are a few examples that I liked and think show a good variety of designs: Museum, Pretty in Pink, Obsequience, contemporary nouveau, and Garden Party. Isn't this cool?

PS The reason I am using HTML+CSS for a site vs. one of the CMSs is that some sites don't need to have user logins and have rather static content. But I imagine the CMSs can be customized with CSS...how is that done? I will probably be using the Plone CMS in the future.

Comment from lauren bratslavsky on October 5, 2006 - 3:50pm

lauren bratslavsky's picture

Here are some more resources for CSS learning ( css and basic html can be the way to go for simple nonprofits).

Good site to learn the basics, easy to follow: http://www.cssbasics.com/

Also, Open Source Web Design - oswd.org is a great website to get free templates that are purely css based and then you can modify them anyway you want. I used this to learn css also, but in a backwards sort of way. And zen garden.

When you're looking at pages, like on zen garden and you're like - uhhh, how the hell did they do that.... - Firefox has an extension called Aardvark that when you turn it on, you can see the different divs and ids and classes and so on. http://karmatics.com/aardvark/

And for menus - if you're too lazy or time constrained for a fancy menu but want one:

http://www.cssplay.co.uk/menus/index.html

http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

Comment from John Miller on October 6, 2006 - 8:00pm

John Miller's picture

I know that Drupal uses stylesheets quite liberally (for example, our blogging pages use a file called drupal.css for the main part of the page and another small bit of CSS for the editor portion). It'd be fun to dig into it a bit more, and I know that Ben, Danielle, and Aliya could probably use some CSS help on the site.

Glad to hear that you're doing a page using just HTML+CSS. A site I'm working on does the same thing, and I was feeling self-conscious about it.... 8-)

--John

Comment from cheryl jerozal on October 11, 2006 - 11:40am

cheryl jerozal's picture

thanks for all the great info Lauren!

Comment from cheryl jerozal on October 11, 2006 - 11:44am

cheryl jerozal's picture

simple site ...creators?... unite. silly simple site sophisticates unite? simple site supporters solidify? ...

Comment from Aliya Abbasi on October 12, 2006 - 3:44pm

Aliya Abbasi's picture

Morgan (a VISTA with our project last year) recommended this

"It cuts A LOT of the work out of generating menus, buttons, navigation and fancy 'bells and whistles' for creating webpages

http://www.xtort.net/scripts/scripts.php

 morgan sully"