CSS From the Ground Up

jsin writes "Web Page Design for Designers is a great source for anyone who is looking for a non-programmer-centric view on web page design and development. Starting in his most recent issue, Joe Gillespie describes CSS from an absolute beginners perspective. Even though I've been building commercial sites for years, the article is an excellent way to review the basics in the context of endless changes in standards and practices."

Comments

I have the opposite problem.

[Dr. Bent]

I'm a Java developer with no artistic talent whatsoever. I tried to draw something once....the result caused dizziness, blindness, and violent nausea in all who saw it. It was eventually banned by the FDA and shot into space. Whenever I'm forced to make choices about color, font, and layout in web pages I inevitably choose a combination that looks like an elephant came along and crapped on a computer screen.

What sources are out there for people like me? Technical people who need a little help making artistic choices. I'm not expecting a website to turn me into Rembrant or anything, but just a few simple rules and some examples that demonstrate those rules would go a long way.

Re:I have the opposite problem.

[elmegil]

Maybe The Non-Designer's Design Book? 'Course, it doesn't deal with color.... You might also try Don't Make Me Think.

Re:I have the opposite problem.

[aWalrus]

Regarding color: Try a little Color Theory and when you want to make a color scheme that works, go to the Color scheme generator.

Apart from that, anything on the "Resources" section of my links page will help you out.

Re:I have the opposite problem.

[Dr. Bent]

Maybe The Non-Designer's Design Book

Wow, this book looks perfect! Thanks. The author even lays out the four basic principles of good design:

Contrast
Repetition
Alignment
Proximity

That should fit right in with my design skills.

P.S. I'm not even kidding....

Re:I have the opposite problem.

[christopherfinke]

What sources are out there for people like me? Technical people who need a little help making artistic choices.

I had always been horrible at picking out color schemes for sites until I discovered this site. That's right, a fabric/thread/crafts site.

What I have found works quite well is to find a color you want to theme your site around (pine green, for example) and go to that thread's color family page. Voila! A group of colors that complement your color, and the hex codes for the colors are in the source code.

Also, another great tool is the color schemer. There used to be an online version, but I can't find it anymore.

Re:I have the opposite problem.

[Feztaa]

So if the four basic principles of good design are CRAP, does that mean that a well-designed page is crappy?

I'm not impressed

[El]

His bar graphs don't display properly in Mozilla -- what browser do his pages actually display properly in? He appears fairly IE-centric.

Re:I'm not impressed

[Anonytroll]

That might be a problem with Mozilla, though. No browser at the moment is fully standards compliant. It might be one of Mozilla's quirks.

Re:I've found

[dwoolridge]

Have you seen this?

Example of CSS design

[fredrikj]

For an example of how powerful CSS can be when used correctly, check out CSS Zen Garden.

Re:Example of CSS design

[GigsVT]

I feel the power!

Half of those CSS's render with tiny unreadable fonts on Mozilla at my resolution.

Nice!

And once you are done with that....

[Anonytroll]

At http://www.alistapart.com/ you can find more detailed, praxis-oriented tutorials/examples using CSS and XHTML if you like this way of doing sites. It's especially interesting, because they have quite a lot of things about pure CSS layouts without tables.

Good example

[stjobe]

Budding webbdesigners, take warning from that page: Dark grey on a pale grey background is _not_ easy on the eyes, and should be avoided, no matter how 'artistical' you think it might be.

If my eyes hurt from looking at your webpage, you're doing something wrong...

Beware of web designers...

[InsaneCreator]

Designers and web don't always mix well. I once got called "a vandal" by a web designer who has just heard about possibility of using your own stylesheets in Mozilla. Apparently, doing so would be defacing his artistic work and he wanted such features banned.

Explaining how that feature worked didn't help a bit. For some reason he was sure random visitors would be setting their styles to green text on purple background with large blinking headlines & then post screenshots all over the net - just to mock his "masterpieces".

Well, at least I learned one thing from that event: don't argue with retards over the internet. :)

Re:Beware of web designers...

[Brandybuck]

So point me to some sites done by this "designer", so I can post screen shots of them in green text on purple background...

I am extremely opposed to mocking masterpieces, but always heartily encourage the mocking of assholes.

Re:Beware of web designers...

[Crypto Gnome]

I learned one thing from that event: don't argue with retards over the internet

And still you post on slashdot?

Don't reinvent the wheel!

[driptray]

There's literally millions of web sites out there. Find one with a colour scheme you like, view the source, and copy the colours!

helpful CSS intro

[hankaholic]

One site that I've found useful as an introduction is Mulder's Stylesheets Tutorial. It's presented quite well, and covers enough to give you a good idea of what can be done easily with CSS.

I'd go on more about it, but if you're looking for a good tutorial, you'll probably try every link you see in this story's comments. If you're not looking for a tutorial, there's no point in me wasting my time describing it.

That and it's time to poop. Bye!