CSS Zen Garden http://www.csszengarden.com

Glish - 2,3 Col Tableless Layouts http://www.glish.com/css

http://css.maxdesign.com.au/floatutorial/

http://www.juicystudio.com/tutorial/css/index.asp

Thanks to Amy D for these above ones


CSS Tutorials (all-in-one) http://www.thefixor.com/code_css.php#tutor

1. Rebuilding a Site With Standards http://www.meyerweb.com/eric/talks/2...ebuilding.html

2. The University of Arizona - Cascading Style Sheets http://uaweb.arizona.edu/resources/t...ss/index.shtml
3. W3C Web Style Sheets CSS tips & tricks http://www.w3.org/Style/Examples/007/

4. Tables or CSS? Choosing a layout http://www.saila.com/usage/layouts/cssvtables.shtml

5. Tableless Layout with CSS HowTo (W3C) http://www.w3.org/2002/03/csslayout-howto.html.en

6. How to build a web site without tables http://www.mako4css.com/Tutorial.htm

7. CSS Quick Reference http://www.devguru.com/Technologies/...css_index.html

8. Real World Table Free Site Development http://www.womendesignersgroup.com/articlerachel.shtml

9. CSS Bugs and Workarounds http://css.nu/pointers/bugs.html

10. How to hide CSS from buggy browsers http://w3development.de/css/hide_css_from_browsers/

11. Hiding CSS form Netscape 4+ http://www.v2studio.com/k/css/n4hide/

12. External link icons the CSS way: http://www.kryogenix.org/days/173.html

13. CSS Top Menu Combination - Does not work in Internet Explorer 6.0. It does work in Mozilla 1.4., Opera 6.0., and Safari 1.0. http://moronicbajebus.com/playground/cssplay/top-menu/

14. Hover Sidebar with CSS - It is known to work in Mozilla 1.3b or later (though in Mozilla 1.4a it was buggy but then was fixed) and it also works in Opera 7.0. But alas, it does not work in Internet Explorer 6.0 because Internet Explorer does not support :hover on anything but hyperlinks (<a>). http://moronicbajebus.com/playground...hover-sidebar/

15. Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playground...r-button-menu/ This does not work in Internet Explorer.

16. Reformat the tables with CSS - It works in Mozilla 1.4+ and Opera 7.0. It does not work in Windows Internet Explorer 6. http://moronicbajebus.com/playground...eformat-table/

17. Image replacement - no span with CSS - This works great in Windows Internet Explorer 6, Mozilla 1.4+, and Opera 6+; but in Windows Internet Explorer 5 nothing shows up. This can easily be solved, note of problem and solution courtesy... http://moronicbajebus.com/playground...e-replacement/

18. Mark you jump - You need a browser that supports CSS3. This is where the time traveling comes in because as of today (2003/2/June) CSS3 is still in the draft stage; but you are in for some luck Mozilla 1.3 does support :target—those wacky Mozilla people. http://moronicbajebus.com/playground.../markyourjump/

19. Horizontal Menu using CSS http://moronicbajebus.com/playground/cssplay/hormenu/

20. Add banner positioning with CSS http://www.peterbailey.net/test/banner.htm

21. Box Model Hack http://www.tantek.com/CSS/Examples/boxmodelhack.html

22. Designing for two Style Sheets - This method is suitable for use when you have a site that is laid out using CSS positioning as opposed to tables, and where the content is likely to get displayed badly in older browsers.
By carefully planning your layout you can create an alternate stylesheet that will display correctly in older browsers and still be able to do an advanced CSS layout for the rest. http://www.edgeofmyseat.com/showarticle.do?AID=5

23. Use CSS to Color Your Forms http://www.edevcafe.com/viewdoc.php?id=6

24. CSS-driven tabs http://www.clagnut.com/writings/csstabs/

25. CSS: Mix and match Classes http://catcode.com/csstips/classes.html

26. CSS: Graphic List Bullets http://catcode.com/csstips/graphic_list.html

27. CSS: Centered Tables http://catcode.com/csstips/center_table.html

28. CSS and Netscape 4.xx Issues - The market share of browsers that do not support any CSS is now below 0.5%. Therefore web developers have more freedom to actually separate content (HTML) and presentation (CSS).
The biggest challenges that web developers face when implementing CSS is backwards compatibility and browser support. http://www.mako4css.com/Issues.htm

29. Mark external links on your site (and others!) http://www.sitepoint.com/newsletter/...&format=html#6

30. CSS Positioning Properties http://www.miswebdesign.com/resource...roperties.html

31. CSS Menus - Uberlink CSS Rollovers: http://www.projectseven.com/tutorial...t_01/index.htm

32: CSS-TD CSS Table Design: http://www.projectseven.com/tutorials/css_t/index.htm

33. Css Iframe Mimics http://www.beforethedog.com/tutoriali/tut1.htm

34. Navigation Menu without Images: http://www.bravenet.com/resources/ti...p.php?view=160

35. Dynamic @import CSS files using PHP: http://www.1976design.com/blog/archi...p-dynamic-css/

36. max-width in Internet Explorer: http://www.svendtofte.com/code/max_width_in_ie/

37. The Basics of Positioning http://www.communitymx.com/content/a...cfm?cid=3B56F-
-------

Tools and Utilities (please report broken links)

1. Build tableless (with CSS) pages with this free online tool: http://www.fu2k.org/alex/css/layouts...Absolute.mhtml

2. User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html

3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables): http://www.hisoftware.com/access/valueadd9.html

4. Style Master - CSS Web Page layout Editor for Windows and Macintosh: http://www.westciv.com/style_master/


some are from my bookmarks, some are copied from elsewhere .

If u got any other nice and useful CSS resource which you think is helpful for others, post it here.. one of us mods/admins or myself will review it and will add it to the list..

and any broken links let know... all links working at the time of posting..

Very useful
-dk

Thank You Praveen!! I'm trying to use CSS now and having such a wealth of knowledge focused in one place is an awesome plus!!

Thanks praveen! I've been hunting for materials on this lately.
From another list:

http://csszengarden.com/
has a set page of html and several style sheets to check out by applying to it. Graphic artists with strong CSS skills are invited to try their hand at adding new style sheets.

http://glish.com/css/
Maybe some links here to harvest? (You've already got the meryweb) although I suspect that the line "I will pay you $3750 for each link you submit that I use." contains a typo.

From google:

http://css.maxdesign.com.au/floatutorial/
http://www.juicystudio.com/tutorial/css/index.asp

AmyD

Thanks Amy, Updated

Excelent, thank for the referals

http://www.htmlhelp.com/tools/csscheck/

someone just sent me this one - haven't tried it yet.

Here's a good CSS trick:

As most of you know, Netscape/mozilla and IE display padding
and borders wildly different. If I set an element as width:200px,
and then give it a 10px border and 20px padding, IE will display
the entire width of the element - padding and border included -
as 200px, while Netscape/mozilla displays it as being 260px wide.

Now, netscape actually displays this according to proper css guidelines
(as seen here: http://www.w3.org/TR/CSS1#block-level-elements)
but IE has the larger portion of the market, so if you need a particular
width on an element, how can you add padding and borders?

The answer is actually simple.

Simply remove the 'width' attribute on your element, and place it
inside a <div> tag, and give the parent a width attribute..

 .parent{width: 350px;}
 .content{padding:20px; border:5px red solid;}

The reason this works is that the content/padding/border will automatically
expand to the width of the parent (assuming the content block
is block level), so the width of the parent will determine the
entire width of its child, so long as no padding or border
is added to the parent.

Note: for the height of the child element to display the same in
IE and netscape, you must set a 'line-height' property on the
child

 .parent{width: 350px;}
 .content{padding:20px; border:5px red solid; 
               line-height:1em;}

Thanks. Nice collection of data. If css is not all covered in the given links, then I don't know what to say.

Hi, i use this page for my css stuff (although i use css once in a blue moon...)

www.w3schools.com/css/default.asp

Thanks guys those are good links.

__________
http://www.host789.com

Super job - probably all you would ever want/need to know. And more.

Awesome praveen those are very helpful.

Thanks

There is almost the same number of tutorial sites for HTML/CSS/DHTML etc than their is porn and annoying adverts.

Google currently has 716,000 results for CSS Tutorials

--twitch

thanks for all the resources - found some more to add to me collection! CSS ZenGarden is a great site to practice your work - i've got a site list there.... didnt make the main sites though - maybe next time!

How to download or upgraded of my computer this CSS Zengarden ?
What are the steps to get it?
______________________
www.cebumail.com

Some great links here! Thanks.

I've been working on a resource that some of you might find usefull.

Web browser standards support

I've been a bit busy with school lately, but I plan to finish the last bits of the HTML section and revamp the CSS section within a few weeks, hopefully.

Here are the links i often visit:

Mezzoblue
Simplebits
A List Apart
Veerle's Blog

So good!I love webmaster-talk!