Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > I'm looking for a good CSS tutorial site

Reply
Thread Tools

I'm looking for a good CSS tutorial site

 
 
George
Guest
Posts: n/a
 
      10-25-2004
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



 
Reply With Quote
 
 
 
 
Neal
Guest
Posts: n/a
 
      10-25-2004
On Mon, 25 Oct 2004 18:01:47 GMT, George <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
mutant
Guest
Posts: n/a
 
      10-25-2004
On Mon, 25 Oct 2004 18:01:47 +0000, George wrote:

http://www.w3.org/2002/03/new-to-w3c
 
Reply With Quote
 
George
Guest
Posts: n/a
 
      10-25-2004
On Mon, 25 Oct 2004 14:07:40 -0400, Neal <(E-Mail Removed)> wrote:

>On Mon, 25 Oct 2004 18:01:47 GMT, George <(E-Mail Removed)> 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


 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      10-25-2004
On Mon, 25 Oct 2004 19:52:07 GMT, George <(E-Mail Removed)> 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.
 
Reply With Quote
 
Michael Wilcox
Guest
Posts: n/a
 
      10-25-2004
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/
 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      10-25-2004
On Mon, 25 Oct 2004 19:52:07 GMT, George <(E-Mail Removed)> wrote:

> On Mon, 25 Oct 2004 14:07:40 -0400, Neal <(E-Mail Removed)> 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.
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      10-25-2004
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/.../css_tutorial/

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      10-25-2004
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...nt.php3?aid=48
http://www.canit.se/~griffon/web/wri...ylesheets.html
http://www.utoronto.ca/ian/books/xht...pt/css-4a.html
http://www.greytower.net/en/archive/.../tsutsumi.html
http://www.intranetjournal.com/artic...utorial1a.html
http://webmonkey.com/authoring/style...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/tutoria...son/index.html
http://www.webreference.com/authorin...yout/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/cs...ring_with_css/

master compatibility charts:
http://centricle.com/ref/css/filters/
http://www.blooberry.com/indexdot/css/index.html
http://macedition.com/cb/resources/a...sssupport.html
old:
http://www.immix.net/html/CSSGuide.htm
http://devedge.netscape.com/library/...3/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
 
Reply With Quote
 
Sid Ismail
Guest
Posts: n/a
 
      10-25-2004
On Mon, 25 Oct 2004 18:01:47 GMT, George <(E-Mail Removed)> 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/...s_on_tutorial/

Sid


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
HTML & CSS Tutorial Site Lawrence D'Oliveiro NZ Computing 7 04-11-2009 10:59 PM
Looking for good beginner's tutorial Roy Smith Python 3 11-30-2005 12:01 AM
Tutorial for beginner/ Tutorial voor beginner Rensjuh C++ 7 09-02-2004 12:41 AM
Re: Anyone know of a good tutorial site for datalist datagrid? Mr Gordonz ASP .Net 1 08-10-2003 02:07 AM
Where's a good tutorial site nade Computer Support 3 08-07-2003 03:12 PM



Advertisments