I'm looking for a good CSS tutorial site

G

George

Hi.

I'd like to lean CSS, on the web, or from a good book, but I must
absolutely refuse 2 websites, due to writing style:

The are: w3.org and htmlgoodies.com

Please suggest another one, that is written below the level of those
who already understand the material, and which provides complete
examples, unlike the two listed above.

Thanks,
George
 
N

Neal

Hi.

I'd like to lean CSS, on the web, or from a good book, but I must
absolutely refuse 2 websites, due to writing style:

The are: w3.org and htmlgoodies.com

Please suggest another one, that is written below the level of those
who already understand the material, and which provides complete
examples, unlike the two listed above.
Click to expand...

http://www.w3schools.com - Reasonably good, though a cluttered layout
makes it hard for me

http://www.htmldog.com - If you ignore the XHTML propoganda, a very clear
tutorial
 
G

George

http://www.w3schools.com - Reasonably good, though a cluttered layout
makes it hard for me

http://www.htmldog.com - If you ignore the XHTML propoganda, a very clear
tutorial
Click to expand...


Neal, those two are something I can actually deal with.
Please explain something, which may clear up something that may or may
not be important:

What's the difference between code that is required in the 'Style" tag
or "head" tag, and that which is inline, let's say in the <td> tag?

I just want to know how each is referred to, to distingquish between
the two ways of modifying a 'property', if 'property' is the right
term.

George
 
N

Neal

Please explain something, which may clear up something that may or may
not be important:

What's the difference between code that is required in the 'Style" tag
or "head" tag, and that which is inline, let's say in the <td> tag?

I just want to know how each is referred to, to distingquish between
the two ways of modifying a 'property', if 'property' is the right
term.
Click to expand...

There are three basic ways to style an element. All involve setting the
property you are working with, and the value you are setting.

font-weight: bold;

1) External stylesheet - the preferred way, because numerous documents can
refer to one stylesheet which the UA will cache. If we want the span
element to be boldface, we'd use:

span {font-weight: bold;}

The "span" above is the selector. Selectors can be element names, class
names, id names, or various combinations. The cited tutorials explain all
this.

2) Internal stylesheet - useful in development, but can apply only to the
current document. We use the style element in the head to enclose our
stylesheet.

<head>
....
<style type="text/css">
span {font-weight: bold;}
</style>
....
</head>

3) Inline styles - only useful if you are sure you need a style in only
one place on one page, ever.

<span style="font-weight: bold;">this text is bold</span>

Hope this explains it.
 
M

Michael Wilcox

George said:
I must absolutely refuse 2 websites, due to writing style:
w3.org
Click to expand...

Don't dismiss the W3C site right away, as they *are* the ones who wrote
HTML and CSS.

However, the content of the site isn't designed for teaching CSS, but
rather it contains the complete reference manual for the language (and
many others). This is *extremely* useful. Take, for example, the page
http://www.w3.org/TR/REC-CSS2/propidx.html , which is a complete list of
all CSS properties. Check out the whole thing later once you get a
better handle on the language.
 
N

Neal

Neal, those two are something I can actually deal with.
Click to expand...

Let me point out one thing on HTMLDog which might trip you up.

Given as an example of how to use an external stylesheet:

<link rel="stylesheet" type="text/css" href="web.css" />

Note the space-slash. Because this site teaches XHTML, that's required. So
be aware that if you are writing HTML 4.01 strict, you must not use these
slashes. The above should be, in HTML:

<link rel="stylesheet" type="text/css" href="web.css">

In the body, the slash isn't a big deal, but is still not necessary in
HTML. In the head, it can be a problem in HTML. So unless you are using
XHTML (and you probably shouldn't be) make sure all empty elements like
link are slash-free.
 
T

Toby Inkster

George said:
I'd like to lean CSS, on the web, or from a good book, but I must
absolutely refuse 2 websites, due to writing style:
The are: w3.org and htmlgoodies.com
Click to expand...

In fairness, the CSS specs at W3C.org aren't intended to be used as
tutorials. They are however the definitive reference if ever a tutorial is
ambiguous or you're unsure of something.

I learnt CSS from here mostly:
http://www.westciv.com/style_master/academy/css_tutorial/
 
B

brucie

In alt.html George said:
Hi.
kissy

I'd like to lean CSS, on the web, or from a good book,
Click to expand...

books! we don't need no stinkin books!
I must absolutely refuse 2 websites, due to writing style:
The are: w3.org
Click to expand...

you'll have to learn to read the recs one day.
and htmlgoodies.com
Click to expand...

agree, its crap

css tutorials and other fun 'n giggly css stuff:
http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.mezzoblue.com/css/cribsheet/
http://www.pageresource.com/dhtml/indexcss.htm
http://www.webpageworkshop.co.uk/main/css_index
http://old.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php/content.php3?aid=48
http://www.canit.se/~griffon/web/writing_stylesheets.html
http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
http://www.greytower.net/en/archive/articles/tsutsumi.html
http://www.intranetjournal.com/articles/200101/csstutorial1a.html
http://webmonkey.com/authoring/stylesheets/tutorials/tutorial1.html

layout examples:
http://www.glish.com/css/
http://www.csszengarden.com/
http://www.bookofstyles.org/
http://tantek.com/CSS/Examples/
http://www.saila.com/usage/layouts/
http://www.bluerobot.com/web/layouts/
http://www.benmeadowcroft.com/webdev/
http://nemesis1.f2o.org/templates.php
http://www.xs4all.nl/~apple77/columns/
http://www.meyerweb.com/eric/css/edge/
http://www.htmler.org/tutorials/3/1.html
http://css.nu/articles/floating-boxes.html
http://webhost.bridgew.edu/etribou/layouts/
http://www.roguelibrarian.com/lj/index.html
http://css-discuss.incutio.com/?page=CssLayouts
http://ecoculture.com/styleguide/r/rollovers.html
http://thenoodleincident.com/tutorials/box_lesson/index.html
http://www.webreference.com/authoring/style/sheets/layout/advanced/

some sites using css layouts:
http://www.inc.com/
http://www.wired.com/
http://www.opera.com/
http://www.kitty5.com/
http://www.cinnamon.nl/
http://msn.espn.go.com/
http://www.virtuelvis.com/
http://www.emptybottle.org/
http://www.fastcompany.com/
http://www.littleyellowdifferent.com/
http://www.pga.com/pgachampionship/2004/

rounded corners:
http://www.albin.net/CSS/roundedCorners/
http://www.alistapart.com/articles/customcorners/
http://www.guyfisher.com/builder/workshop/css/corners/

slants: http://www.infimum.dk/HTML/slantinfo.html
lists: http://www.alistapart.com/articles/taminglists/
pure css menus: http://www.meyerweb.com/eric/css/edge/menus/demo.html
Fast rollovers: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

centering thingys
http://dorward.me.uk/www/centre/
http://www.w3.org/Style/Examples/007/center.html
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://hicksdesign.co.uk/articles/css/vertical_centering_with_css/

master compatibility charts:
http://centricle.com/ref/css/filters/
http://www.blooberry.com/indexdot/css/index.html
http://macedition.com/cb/resources/abridgedcsssupport.html
old:
http://www.immix.net/html/CSSGuide.htm
http://devedge.netscape.com/library/xref/2003/css-support/

hiding CSS from crappy browsers:
http://diveintomark.org/safari/csshacks/
http://www.ericmeyeroncss.com/bonus/trick-hide.html
http://www.w3development.de/css/hide_css_from_browsers/

deadtree quick refs: http://visibone.com/html/

css checkers:
http://jigsaw.w3.org/css-validator/
http://www.htmlhelp.com/tools/csscheck/
http://examples.tobyinkster.co.uk/checkers

cascading style sheets, level 2 specification
http://www.w3.org/TR/REC-CSS2/
cascading style sheets, level 2 revision 1 Candidate Recommendation
http://www.w3.org/TR/CSS21/
 
S

Sid Ismail

: Hi.
:
: I'd like to lean CSS, on the web, or from a good book, but I must
: absolutely refuse 2 websites, due to writing style:
:
: The are: w3.org and htmlgoodies.com
:
: Please suggest another one, that is written below the level of those
: who already understand the material, and which provides complete
: examples, unlike the two listed above.


http://www.westciv.com/style_master/academy/hands_on_tutorial/

Sid
 
G

George

Let me point out one thing on HTMLDog which might trip you up.

Given as an example of how to use an external stylesheet:

<link rel="stylesheet" type="text/css" href="web.css" />

Note the space-slash. Because this site teaches XHTML, that's required. So
be aware that if you are writing HTML 4.01 strict, you must not use these
slashes. The above should be, in HTML:

<link rel="stylesheet" type="text/css" href="web.css">

In the body, the slash isn't a big deal, but is still not necessary in
HTML. In the head, it can be a problem in HTML. So unless you are using
XHTML (and you probably shouldn't be) make sure all empty elements like
link are slash-free.
Click to expand...

OK, I follow you, there.
Let me please refer you back to your previous response, about the
style element, etc.

There's a certain site, where I can post classified ads. I can either
post it, plain text, like most people do, or, I can dress it up with
html, like I enjoy doing.

Now, the site's rule is if I want to post/modify an ad with html, I
can only use the html that would normally go after the <body>
statement.

Can any CSS statements be independent of having its directive placed
before the <body> tag? Or, is it not even considered CSS at that
point?

Thanks, George
 
M

Mark Parnell

Now, the site's rule is if I want to post/modify an ad with html, I
can only use the html that would normally go after the <body>
statement.

Can any CSS statements be independent of having its directive placed
before the <body> tag? Or, is it not even considered CSS at that
point?
Click to expand...

In that situation you would have to use Neal's 3rd option - inline CSS.
Be aware though that if the site has a stylesheet of its own as well,
there could be conflict between the 2. AFAIK the specs aren't clear
which should take preference, so browsers will quite possibly differ.
 
N

Neal

There's a certain site, where I can post classified ads. I can either
post it, plain text, like most people do, or, I can dress it up with
html, like I enjoy doing.
Sure.

Now, the site's rule is if I want to post/modify an ad with html, I
can only use the html that would normally go after the <body>
statement.

Can any CSS statements be independent of having its directive placed
before the <body> tag? Or, is it not even considered CSS at that
point?
Click to expand...

CSS referenced from the head is a document stylesheet. You obviously can't
do something that's going to affect the whole page.

Inline style using the style attribute is, on the other hand, limited to
that one element. So unless there's a stricture we're not aware of in this
discussion, using the style attribute should work fine there.

But again, let me stress that if you're authoring a page, you almost never
want to use the inline dtyles.
 
G

George

In alt.html George said:


books! we don't need no stinkin books!


you'll have to learn to read the recs one day.


agree, its crap

css tutorials and other fun 'n giggly css stuff:
http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.mezzoblue.com/css/cribsheet/
http://www.pageresource.com/dhtml/indexcss.htm
http://www.webpageworkshop.co.uk/main/css_index
http://old.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php/content.php3?aid=48
http://www.canit.se/~griffon/web/writing_stylesheets.html
http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
http://www.greytower.net/en/archive/articles/tsutsumi.html
http://www.intranetjournal.com/articles/200101/csstutorial1a.html
http://webmonkey.com/authoring/stylesheets/tutorials/tutorial1.html

layout examples:
http://www.glish.com/css/
http://www.csszengarden.com/
http://www.bookofstyles.org/
http://tantek.com/CSS/Examples/
http://www.saila.com/usage/layouts/
http://www.bluerobot.com/web/layouts/
http://www.benmeadowcroft.com/webdev/
http://nemesis1.f2o.org/templates.php
http://www.xs4all.nl/~apple77/columns/
http://www.meyerweb.com/eric/css/edge/
http://www.htmler.org/tutorials/3/1.html
http://css.nu/articles/floating-boxes.html
http://webhost.bridgew.edu/etribou/layouts/
http://www.roguelibrarian.com/lj/index.html
http://css-discuss.incutio.com/?page=CssLayouts
http://ecoculture.com/styleguide/r/rollovers.html
http://thenoodleincident.com/tutorials/box_lesson/index.html
http://www.webreference.com/authoring/style/sheets/layout/advanced/

some sites using css layouts:
http://www.inc.com/
http://www.wired.com/
http://www.opera.com/
http://www.kitty5.com/
http://www.cinnamon.nl/
http://msn.espn.go.com/
http://www.virtuelvis.com/
http://www.emptybottle.org/
http://www.fastcompany.com/
http://www.littleyellowdifferent.com/
http://www.pga.com/pgachampionship/2004/

rounded corners:
http://www.albin.net/CSS/roundedCorners/
http://www.alistapart.com/articles/customcorners/
http://www.guyfisher.com/builder/workshop/css/corners/

slants: http://www.infimum.dk/HTML/slantinfo.html
lists: http://www.alistapart.com/articles/taminglists/
pure css menus: http://www.meyerweb.com/eric/css/edge/menus/demo.html
Fast rollovers: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

centering thingys
http://dorward.me.uk/www/centre/
http://www.w3.org/Style/Examples/007/center.html
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://hicksdesign.co.uk/articles/css/vertical_centering_with_css/

master compatibility charts:
http://centricle.com/ref/css/filters/
http://www.blooberry.com/indexdot/css/index.html
http://macedition.com/cb/resources/abridgedcsssupport.html
old:
http://www.immix.net/html/CSSGuide.htm
http://devedge.netscape.com/library/xref/2003/css-support/

hiding CSS from crappy browsers:
http://diveintomark.org/safari/csshacks/
http://www.ericmeyeroncss.com/bonus/trick-hide.html
http://www.w3development.de/css/hide_css_from_browsers/

deadtree quick refs: http://visibone.com/html/

css checkers:
http://jigsaw.w3.org/css-validator/
http://www.htmlhelp.com/tools/csscheck/
http://examples.tobyinkster.co.uk/checkers

cascading style sheets, level 2 specification
http://www.w3.org/TR/REC-CSS2/
cascading style sheets, level 2 revision 1 Candidate Recommendation
http://www.w3.org/TR/CSS21/
Click to expand...


That sure is a truckload of CSS links.
Do you expect me to believe you are familiar with all of them?

Still, I will look through them, even though the w3schools site that
Neal pointed out earlier seems to do it for me. It's answered some
things already. I think I'm on the way.

Thanks you very much for the catalog of CSS links. George
 
N

Neal

That sure is a truckload of CSS links.
Click to expand...

You sure quoted them all real nice.
Do you expect me to believe you are familiar with all of them?
Click to expand...

I'll wager he's tried them all. The programs, too. ;)
Still, I will look through them, even though the w3schools site that
Neal pointed out earlier seems to do it for me. It's answered some
things already. I think I'm on the way.
Click to expand...

Aw, shucks, I'm just doing my job. Where's that check?
Thanks you very much for the catalog of CSS links. George
Click to expand...

You got the mother lode, bud. It's all up to you now.
 
B

brucie

In alt.html George said:
That sure is a truckload of CSS links.
Click to expand...

no point owning a truck if you haven't got something to put in it.
Do you expect me to believe you are familiar with all of them?
Click to expand...

yes. i check them annually. last time was may. some are good some are
crap but they cover just about everything.
Thanks you very much for the catalog of CSS links.
Click to expand...

i accept cash and/or sexual favors
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Looking for a good CSS file for webpage projects 19
need a good tutorial 2
Looking for a good book 6
Higher-Order Procedures Tutorial (long) 13
Crockford's 'The Good Parts' : a short review 21
Looking for a good book on ASP .Net 3
Java Goldmine site: http://javagoldmine.by.ru/index.html 0
Please recommend a good book for me 11

Members online

Total: 28 (members: 2, guests: 26)
Robots: 457

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top