good CSS sites?

#1

So I've been using CSS for a year now pretty much only as a
replacement for FONT tags. I know you can do a LOT more with them,
though. Like, eliminate the use for tables.

Are there any good Web sites for the newbie to semi-beginner on using
CSS beyond just font attributes?

Thanks for any suggestions!!
Liam
druid-at-celticbear-dot-com

#2

LRW wrote:

Quote:

Are there any good Web sites for the newbie to semi-beginner on using
CSS beyond just font attributes?

Google for "CSS". Good relevant sites show up.
http://www.google.com/search?q=css

#3

"LRW" <deja (AT) celticbear (DOT) com> wrote

Quote:

So I've been using CSS for a year now pretty much only as a
replacement for FONT tags. I know you can do a LOT more with them,
though. Like, eliminate the use for tables.

Are there any good Web sites for the newbie to semi-beginner on using
CSS beyond just font attributes?

Check out www.csszengarden.com. They use a base HTML file and then people
submit various CSS files that totally change the appearance of the site. At
the very least, it's pretty cool to see what the potential is.

Regards,
Peter Foti

#4

LRW wrote:

Quote:

So I've been using CSS for a year now pretty much only as a
replacement for FONT tags. I know you can do a LOT more with them,
though. Like, eliminate the use for tables.

Are there any good Web sites for the newbie to semi-beginner on using
CSS beyond just font attributes?

Thanks for any suggestions!!

If you are interested in looking at examples (rather than just tutorials, etc)
the following is worth examining. It is one of a very small percentage of news
sites in the world to use tableless layout, and also one of the minority of
news sites that uses "hierarchic" mark-up (<h1> for the article heading, etc).
It is worth looking at the extra information revealed if you switch off CSS,
such as extra navigation.

http://www.wired.com/

(Unfortunately, they appear to use browser hacks in the CSS that stop it
validating. That is quite common with CSS used to avoid table-layout with
complicated designs. You may find yourself learning more than you wanted to
about the immaturity of CSS support!)

ps: If tables are appropriate, use tables! They are not deprecated - they are
not about to disappear. But control them with CSS, not deprecated attributes
in the tags such as width="..", bgcolor="..", etc. (That is an example of "do
as I say"! I haven't got rid of all my "width"s yet).

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

#5

"Barry Pearson" <news (AT) childsupportanalysis (DOT) co.uk> wrote

Quote:

LRW wrote:
So I've been using CSS for a year now pretty much only as a
replacement for FONT tags. I know you can do a LOT more with them,
though. Like, eliminate the use for tables.

Are there any good Web sites for the newbie to semi-beginner on using
CSS beyond just font attributes?

Thanks for any suggestions!!

If you are interested in looking at examples (rather than just tutorials,
etc)
the following is worth examining. It is one of a very small percentage of
news
sites in the world to use tableless layout, and also one of the minority
of
news sites that uses "hierarchic" mark-up (<h1> for the article heading,
etc).
It is worth looking at the extra information revealed if you switch off
CSS,
such as extra navigation.

http://www.wired.com/

They sure aren't doing it as well as www.w3.org. Narrow the browser and a
horizontal scrollbar appears. The columns don't narrow enough, and they
don't wrap, each below the one before it. In fact, the second column slides
underneath the first one (and I don't mean in the Y direction here, I mean
in the Z direction).

#6

Harlan Messinger wrote:

Quote:

"Barry Pearson" <news (AT) childsupportanalysis (DOT) co.uk> wrote in message
news:%7wpb.458$Hn6.524404 (AT) newsfep1-win (DOT) server.ntli.net...
[snip]
If you are interested in looking at examples (rather than just
tutorials, etc) the following is worth examining. It is one of a
very small percentage of news sites in the world to use tableless
layout, and also one of the minority of news sites that uses
"hierarchic" mark-up (<h1> for the article heading, etc). It is
worth looking at the extra information revealed if you switch off
CSS, such as extra navigation.

http://www.wired.com/

They sure aren't doing it as well as www.w3.org. Narrow the browser
and a horizontal scrollbar appears. The columns don't narrow enough,
and they don't wrap, each below the one before it. In fact, the
second column slides underneath the first one (and I don't mean in
the Y direction here, I mean in the Z direction).

Fair comment. Many news sites across the world that I have looked at assume a
viewport close to 800 wide. Wired is no exception: about 770 for the front
page, nearly 800 for an article. (I have no problem with that. My 2.5 year old
laptop has a 1400 x 1050 screen, and it is good to use it sometimes!)

The W3C site needs a bit less. In this case, about 555 before a horizontal
scroll-bar appears. It even looks OK on a VGA-sized screen, although it gets a
bit irritating when reading the centre column, because of the amount of
scrolling needed at normal reading speed.

But these sizes are themselves browser-dependent. You can view both sites (and
most other sites in the world, probably) using the Opera 7.2 "small screen"
mode, which is 240 wide. Although I design pages on the assumption that my
viewers can devote to up to 800 to read them (eg. I have 700-pixel-wide
photographs on them), I always check them against Opera 7.2 "small screen",
and they typically work OK. (Often not perfect, just OK). But it is a good
idea to avoid pop-ups!

I'm confident that if we design to fit onto 800 x 600, most people will be
able to view without problem, because that will be a subset of their screen
size. And if they DO have a problem, there are browsers that they can use to
help them. As authors & publishers, we don't have to solve all the problems
that may occur at the receiving end. UAs, if necessary in conjunction with
the users themselves, will be able to adapt if they choose to. Note that Opera
redefines all the standard table rendering - it says "we don't have to assume
that tables are rigid horizontal things, they can be fluid if we want them to
be". For anyone who hasn't seen this effect, I strongly recommend getting
Opera and using it to browse at "small screen" size.

I've just read about the next range of PDAs having 320 wide screens, and also
being able to be used rotated 90-degrees, so providing a 480 x 320 screen. The
future will increasingly have decent-sized screens, and future UAs will be
able to do clever things to put pages intended for larger screens onto smaller
ones. I don't think we need to be too obsessed about viewport sizes. There are
more important things to worry about, such as supplying decent content.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

#7

In article <3a1d1813.0311030845.74e9bda1 (AT) posting (DOT) google.com> in
comp.infosystems.www.authoring.html, LRW <deja (AT) celticbear (DOT) com>
wrote:

Quote:

Are there any good Web sites for the newbie to semi-beginner on using
CSS beyond just font attributes?

http://oakroadsystems.com/tech/webauthr.htm

has my recommendations for HTML and CSS.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

#8

In article <bo60pi$1875b5$1 (AT) ID-203055 (DOT) news.uni-berlin.de> in
comp.infosystems.www.authoring.html, Philipp Lenssen <info@outer-
court.com> wrote:

Quote:

Google for "CSS". Good relevant sites show up.
http://www.google.com/search?q=css

And lots of bad and/or irrelevant sites show up as well.

Perhaps it's not really helpful to direct the OP to select from 14
million sites when s/he asked for guidance.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

#9

Stan Brown wrote:

Quote:

In article <bo60pi$1875b5$1 (AT) ID-203055 (DOT) news.uni-berlin.de> in
comp.infosystems.www.authoring.html, Philipp Lenssen <info@outer-
court.com> wrote:
Google for "CSS". Good relevant sites show up.
http://www.google.com/search?q=css

And lots of bad and/or irrelevant sites show up as well.

Perhaps it's not really helpful to direct the OP to select from 14
million sites when s/he asked for guidance.

I googled the result for "CSS". I was not speaking about the 14 million
sites that come up. Google doesn't work like that. I just checked the
first 10 in the SERPs and they were on the list of sites I would list
if I had to hand-pick them (the official spec, HTMLhelp, W3Schools --
not that they're always right or anything -- etc.)