Good online CSS resources?

npgraphicdesign's picture

I finally dove into CSS. The learning process is slow, but I am keeping on. My question is this: any good online CSS resources that you use on a regular basis? I already use the W3C website religiously, and a few others.

Also the following question: Is there a CSS website that specifically deals with hacks/workarounds for different browsers, or deals with common CSS problems?

And after learning CSS for the last few months, all I have to say can be expressed with the graphic below.

Dan Gayle's picture

http://www.htmldog.com is my quickest basic reference that I keep in my bookmarks bar.

Dan Gayle's picture

The Opera dev site is a great basic resource. I've been meaning to go through it thoroughly to see if it is detailed enough to use it for training materials at work.

Chad Kent's picture

Here's a huge and useful list from Smashing Magazine:

http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/

While not so much a CSS resource, this is one of the best CSS "hacks" I've found:

http://code.google.com/p/ie7-js/

Here's the description from the source on what it does:

"IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6."

I've only used this on one site, but it was effective. The most amazing thing about it is that it forces IE5/IE6 to display true transparency with .png's! Very useful and easy to implement, since there is only a link to the actual script as opposed to a bunch of embedded code.

victor ivanov's picture

i'm very surprised no one mentioned www.alistapart.com
definitely a very useful web resource

ramelton's picture

I'll second smashingmagazine.com great resource.
I love the pie chart by the way.
regards
ramelton

Dan Gayle's picture

A List Apart and Smashing magazine, although great must-reads for any web designer, are too general to be specific CSS resources.

Here's a more specific list that every designer should have in their bookmarks bar:
Filters/hacks => http://www.webdevout.net/css-hacks
Selector browser support => http://kimblim.dk/css-tests/selectors/
CSS3 information => http://css3.info
Overall Style => Style

Ess.P9's picture

Theres a great site called http://www.csszengarden.com/ good for inspiration.
There is also a resorce link to http://www.mezzoblue.com/zengarden/resources/ can't vouch for it as resorce but shud be at least useful.

I remember getting some help from dreamweaver cafe not shure if its this though:- http://www.dreamweavercafe.com/

Hope that helps
Stef

Dan Gayle's picture

>> There is also a resorce link to http://www.mezzoblue.com/zengarden/resources/ can’t vouch for it as resorce but shud be at least useful.

Umm... Mezzoblue IS the CSS Zen Garden. Owned, operated, created, etc. So I'd say its a reliable resource for the CSS Zen Garden.

And yes, the Zen Garden is awesome. Some great typography in there too.

Ess.P9's picture

Glad that I'm not the only one that likes zen gaardens. Havn't visited the site in a while but I remember some impressive designs!!! just a little bit of support for Fantomas: don't give up with CSS its hard to get the head arround; but once your there it's easy. And honestly, it dose make sense!!!! I found that learning HTML was longer than CSS. Good luck!!!!

bowerbird's picture

i don't have any trouble at all dissing the c.s.s. zen garden.

to me, it shows us exactly how fragile a creation c.s.s. is...

bump up the font-size -- even just one notch -- and
_many_ of the designs break. bump it up two or three
and almost all of them break, some quite spectacularly.

this illustrates that most designers -- even web types --
still haven't yet absorbed the first lesson, which is that
the designer no longer controls the size of the canvas.

if c.s.s. was dirt-simple, it might be ok that it's also so
feeble. but when it's feeble _and_ it's complex? _crap_.

add in the way its progress has been stalled completely
by the "standards" process, and it's a full-on _tragedy_.

just another example of how technocrats are failing us.

-bowerbird

p.s. and please, before you get all upset and flame me,
just take the simple step to check that what i have said
about fragility of those designs is completely correct,
meaning i can post one screenshot after another here
-- one thousand screenshots after another thousand --
to "prove" the point. don't get into a fight you can't win.

mk2's picture

@bowerbird
Since the beginning of world wide web, the designer had NEVER controls the size of the canvas. :)

bowerbird's picture

they keep trying, though. :+)

look at this very page, as as example.

3-column setup, with the first column
being 200 pixels, used for information
on the commenter and timestamping...

a 600-pixel center column for the post.

and another 200-pixel column at right,
just at the top, for account information
and a few ads and assorted other stuff.

so the aim is a 1024-pixel-width screen.

making the viewport any wider than that
give you miles and miles of whitespace...

(my screen is 1920-pixels wide, and it's
just a 23-incher, so i'm sure that many
of you out there have much bigger ones.)

likewise, narrowing the window to _less_
than the 1024-pixel designed width will
produce a horizontal scrollbar, which is
_not_ what the web is "supposed" to do...

further, narrowing to less than the 600
pixels, constituting the "content column"
in the middle, simply breaks the design.

so the only sense in which this "reflows"
is when a user changes their font-size.
and, if we really believe that a measure
is "optimum" with a certain number of
_characters_, then that type of "reflow"
is one that breaks optimum readability.

none of this is a dig at the design here.
(because i think the design is quite fine.)

it _is_ a dig at the generally-understood
notion of what we _are_ doing on the web,
versus what we _say_ that we are doing, and
versus what we _should_actually_ be doing
(which i'm not sure any of us really knows)...

but we all just trudge along pretending everything
is peachy-keen, including the emperor's clothes,
which we have previewed on the c.s.s. zen garden.

-bowerbird

paragraph's picture

but we all just trudge along pretending everything
is peachy-keen, including the emperor’s clothes

I for one dislike the vertical scrollbar as well. And you, of all people, require its use constantly, not only because of your verbosity but also because of your contrived mannerisms.

bowerbird's picture

paragraph said:
> I for one dislike the vertical scrollbar as well.

i've quite taken to the scroll-wheel. i didn't realize,
for a long time, just how handy it is, and it took me
a while to realize how many situations i could use it,
but i find now that i'm using it all the time. it's nice!

so if anyone out there is not in the habit of using it,
i would highly recommend that you try to pick it up.

-bowerbird

Markus45's picture

There are a lot of resources with tutorials. I prefer php tutorial. However it's your choice.

Arno Enslin's picture

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

And although it isn’t an online resource I recommend O’Reilly’s Cascading Style Sheets – The Definitive Guide. That’s the only CSS book, that I really liked. (The website of the author: http://meyerweb.com/eric/)

There I found a few hacks: http://www.stormdetector.com/index.html

Syndicate content Syndicate content