I'm looking for a good CSS tutorial site

Discussion in 'HTML' started by George, Oct 25, 2004.

  1. George

    George Guest

    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
    George, Oct 25, 2004
    #1
    1. Advertising

  2. George

    Neal Guest

    On Mon, 25 Oct 2004 18:01:47 GMT, George <> wrote:

    > 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.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
    Neal, Oct 25, 2004
    #2
    1. Advertising

  3. George

    mutant Guest

    mutant, Oct 25, 2004
    #3
  4. George

    George Guest

    On Mon, 25 Oct 2004 14:07:40 -0400, Neal <> wrote:

    >On Mon, 25 Oct 2004 18:01:47 GMT, George <> wrote:
    >
    >> 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.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



    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
    George, Oct 25, 2004
    #4
  5. George

    Neal Guest

    On Mon, 25 Oct 2004 19:52:07 GMT, George <> wrote:

    > 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.


    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.
    Neal, Oct 25, 2004
    #5
  6. George wrote:
    > I must absolutely refuse 2 websites, due to writing style:
    > w3.org


    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.
    --
    Michael Wilcox, http://dataportalen.com/mike/
    Michael Wilcox, Oct 25, 2004
    #6
  7. George

    Neal Guest

    On Mon, 25 Oct 2004 19:52:07 GMT, George <> wrote:

    > On Mon, 25 Oct 2004 14:07:40 -0400, Neal <> wrote:
    >> http://www.htmldog.com - If you ignore the XHTML propoganda, a very
    >> clear
    >> tutorial

    >
    >
    > Neal, those two are something I can actually deal with.


    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.
    Neal, Oct 25, 2004
    #7
  8. George

    Toby Inkster Guest

    George wrote:

    > 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


    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/

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Oct 25, 2004
    #8
  9. George

    brucie Guest

    In alt.html George said:

    > Hi.


    kissy

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


    books! we don't need no stinkin books!

    > I must absolutely refuse 2 websites, due to writing style:
    > The are: w3.org


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

    > and htmlgoodies.com


    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/



    --


    v o i c e s
    brucie, Oct 25, 2004
    #9
  10. George

    Sid Ismail Guest

    On Mon, 25 Oct 2004 18:01:47 GMT, George <> wrote:

    : 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
    Sid Ismail, Oct 26, 2004
    #10
  11. George

    George Guest

    On Mon, 25 Oct 2004 16:39:50 -0400, Neal <> wrote:

    >On Mon, 25 Oct 2004 19:52:07 GMT, George <> wrote:
    >
    >> On Mon, 25 Oct 2004 14:07:40 -0400, Neal <> wrote:
    >>> http://www.htmldog.com - If you ignore the XHTML propoganda, a very
    >>> clear
    >>> tutorial

    >>
    >>
    >> Neal, those two are something I can actually deal with.

    >
    >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.


    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
    George, Oct 26, 2004
    #11
  12. George

    Mark Parnell Guest

    On Mon, 25 Oct 2004 23:45:20 GMT, George <>
    declared in alt.html:

    > 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?


    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.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    "Never drink rum&coke whilst reading usenet" - rf 2004
    Mark Parnell, Oct 26, 2004
    #12
  13. George

    Neal Guest

    On Mon, 25 Oct 2004 23:45:20 GMT, George <> wrote:

    > 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.


    Yes. You cannot use a <meta> element. You cannot use a <style> element.
    That's standard.

    > 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?


    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.
    Neal, Oct 26, 2004
    #13
  14. George

    George Guest

    On Tue, 26 Oct 2004 07:44:25 +1000, brucie <>
    wrote:

    >In alt.html George said:
    >
    >> Hi.

    >
    >kissy
    >
    >> I'd like to lean CSS, on the web, or from a good book,

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

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

    >
    >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/



    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
    George, Oct 26, 2004
    #14
  15. George

    Neal Guest

    On Tue, 26 Oct 2004 02:06:59 GMT, George <> wrote:

    > That sure is a truckload of CSS links.


    You sure quoted them all real nice.

    > Do you expect me to believe you are familiar with all of them?


    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.


    Aw, shucks, I'm just doing my job. Where's that check?

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


    You got the mother lode, bud. It's all up to you now.
    Neal, Oct 26, 2004
    #15
  16. George

    brucie Guest

    In alt.html George said:

    > That sure is a truckload of CSS links.


    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?


    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.


    i accept cash and/or sexual favors


    --


    v o i c e s
    brucie, Oct 26, 2004
    #16
  17. George

    g Guest

    here you will find the right book 4 you:
    http://giuciao.altervista.org/free_books.html

    Neal <> wrote in message news:<>...
    > On Tue, 26 Oct 2004 02:06:59 GMT, George <> wrote:
    >
    > > That sure is a truckload of CSS links.

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

    >
    > 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.

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

    >
    > You got the mother lode, bud. It's all up to you now.
    g, Oct 26, 2004
    #17
  18. George

    rf Guest

    Mark Parnell wrote:

    [inline style vs style element]

    > AFAIK the specs aren't clear
    > which should take preference, so browsers will quite possibly differ.


    The specs are quite clear on the subject. All else being equal inline styles
    take precidence (they are more specific).

    http://www.w3.org/TR/CSS21/cascade.html#specificity

    --
    Cheers
    Richard.
    rf, Oct 27, 2004
    #18
  19. George

    Mark Parnell Guest

    On Wed, 27 Oct 2004 02:20:17 GMT, rf <rf@.invalid> declared in alt.html:

    > The specs are quite clear on the subject. All else being equal inline styles
    > take precidence (they are more specific).
    >
    > http://www.w3.org/TR/CSS21/cascade.html#specificity


    So they are. I did look at that page, just didn't get quite that far.
    Thanks.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    "Never drink rum&coke whilst reading usenet" - rf 2004
    Mark Parnell, Oct 27, 2004
    #19
  20. George

    rf Guest

    Neal wrote:

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


    Why?

    --
    Cheers
    Richard.
    rf, Oct 27, 2004
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mr Gordonz
    Replies:
    1
    Views:
    316
    SStory
    Aug 10, 2003
  2. Karim
    Replies:
    7
    Views:
    10,649
    Genomega
    Nov 30, 2003
  3. John Dalberg
    Replies:
    19
    Views:
    871
  4. Roy Smith

    Looking for good beginner's tutorial

    Roy Smith, Nov 29, 2005, in forum: Python
    Replies:
    3
    Views:
    327
    Roy Smith
    Nov 30, 2005
  5. Jeff
    Replies:
    4
    Views:
    365
    Alexey Smirnov
    Mar 2, 2010
Loading...

Share This Page