http://www.csszengarden.com/
http://www.w3.org/Style/CSS/
http://glish.com/css/
http://www.meyerweb.com/eric/css/edge/
http://css.nu/
Feel Free To Add More <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />
Css Resource Links
Moderators: Moderator, Global Moderator
Css Resource Links
[color=\"#41211C\"]It takes years to build up trust and only seconds to destroy it
[/color]
-
RuffRyders
- Hero Member
- Posts: 1138
- Joined: Mon Jun 14, 2004 7:47 am
Css Resource Links
CSS Resources, Tutorials, Tips and Tricks (please report broken links)
For CSS Fans: CSS ZEN GARDEN
CSS Tutorials (all-in-one) [url=\"http://www.thefixor.com/code_css.php#tutor\"]http://www.thefixor.com/code_css.php#tutor[/url]
1. Rebuilding a Site With Standards [url=\"http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html\"]http://www.meyerweb.com/eric/talks/2002/wd...rebuilding.html[/url]
2. The University of Arizona - Cascading Style Sheets [url=\"http://uaweb.arizona.edu/resources/tutorial/css/index.shtml\"]http://uaweb.arizona.edu/resources/tutoria...css/index.shtml[/url]
3. W3C Web Style Sheets CSS tips & tricks [url=\"http://www.w3.org/Style/Examples/007/\"]http://www.w3.org/Style/Examples/007/[/url]
4. Tables or CSS? Choosing a layout [url=\"http://www.saila.com/usage/layouts/cssvtables.shtml\"]http://www.saila.com/usage/layouts/cssvtables.shtml[/url]
5. Tableless Layout with CSS HowTo (W3C) [url=\"http://www.w3.org/2002/03/csslayout-howto.html.en\"]http://www.w3.org/2002/03/csslayout-howto.html.en[/url]
6. How to build a web site without tables [url=\"http://www.mako4css.com/Tutorial.htm\"]http://www.mako4css.com/Tutorial.htm[/url]
7. CSS Quick Reference [url=\"http://www.devguru.com/Technologies/css/quickref/css_index.html\"]http://www.devguru.com/Technologies/css/qu.../css_index.html[/url]
8. Real World Table Free Site Development [url=\"http://www.womendesignersgroup.com/articlerachel.shtml\"]http://www.womendesignersgroup.com/articlerachel.shtml[/url]
9. CSS Bugs and Workarounds [url=\"http://css.nu/pointers/bugs.html\"]http://css.nu/pointers/bugs.html[/url]
10. How to hide CSS from buggy browsers [url=\"http://w3development.de/css/hide_css_from_browsers/\"]http://w3development.de/css/hide_css_from_browsers/[/url]
11. Hiding CSS form Netscape 4+ [url=\"http://www.v2studio.com/k/css/n4hide/\"]http://www.v2studio.com/k/css/n4hide/[/url]
12. External link icons the CSS way: [url=\"http://www.kryogenix.org/days/173.html\"]http://www.kryogenix.org/days/173.html[/url]
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. [url=\"http://moronicbajebus.com/playground/cssplay/top-menu/\"]http://moronicbajebus.com/playground/cssplay/top-menu/[/url]
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> ). [url=\"http://moronicbajebus.com/playground/cssplay/hover-sidebar/\"]http://moronicbajebus.com/playground/csspl.../hover-sidebar/[/url]
15. Erlarger Button Menu with CSS - Overlapping the other elements: [url=\"http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/\"]http://moronicbajebus.com/playground/csspl...er-button-menu/[/url] 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. [url=\"http://moronicbajebus.com/playground/cssplay/reformat-table/\"]http://moronicbajebus.com/playground/csspl...reformat-table/[/url]
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... [url=\"http://moronicbajebus.com/playground/cssplay/image-replacement/\"]http://moronicbajebus.com/playground/csspl...ge-replacement/[/url]
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. [url=\"http://moronicbajebus.com/playground/cssplay/markyourjump/\"]http://moronicbajebus.com/playground/csspl...y/markyourjump/[/url]
19. Horizontal Menu using CSS [url=\"http://moronicbajebus.com/playground/cssplay/hormenu/\"]http://moronicbajebus.com/playground/cssplay/hormenu/[/url]
20. Add banner positioning with CSS [url=\"http://www.peterbailey.net/test/banner.htm\"]http://www.peterbailey.net/test/banner.htm[/url]
21. Box Model Hack [url=\"http://www.tantek.com/CSS/Examples/boxmodelhack.html\"]http://www.tantek.com/CSS/Examples/boxmodelhack.html[/url]
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. [url=\"http://www.edgeofmyseat.com/showarticle.do?AID=5\"]http://www.edgeofmyseat.com/showarticle.do?AID=5[/url]
23. Use CSS to Color Your Forms [url=\"http://www.edevcafe.com/viewdoc.php?id=6\"]http://www.edevcafe.com/viewdoc.php?id=6[/url]
24. CSS-driven tabs [url=\"http://www.clagnut.com/writings/csstabs/\"]http://www.clagnut.com/writings/csstabs/[/url]
25. CSS: Mix and match Classes [url=\"http://catcode.com/csstips/classes.html\"]http://catcode.com/csstips/classes.html[/url]
26. CSS: Graphic List Bullets [url=\"http://catcode.com/csstips/graphic_list.html\"]http://catcode.com/csstips/graphic_list.html[/url]
27. CSS: Centered Tables [url=\"http://catcode.com/csstips/center_table.html\"]http://catcode.com/csstips/center_table.html[/url]
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. [url=\"http://www.mako4css.com/Issues.htm\"]http://www.mako4css.com/Issues.htm[/url]
29. Mark external links on your site (and others!) [url=\"http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6\"]http://www.sitepoint.com/newsletter/viewis...0&format=html#6[/url]
30. CSS Positioning Properties [url=\"http://www.miswebdesign.com/resources/articles/css-positioning-properties.html\"]http://www.miswebdesign.com/resources/arti...properties.html[/url]
31. CSS Menus - Uberlink CSS Rollovers: [url=\"http://www.projectseven.com/tutorials/css_menus/list_01/index.htm\"]http://www.projectseven.com/tutorials/css_...st_01/index.htm[/url]
32: CSS-TD CSS Table Design: [url=\"http://www.projectseven.com/tutorials/css_t/index.htm\"]http://www.projectseven.com/tutorials/css_t/index.htm[/url]
33. Css Iframe Mimics [url=\"http://www.beforethedog.com/tutoriali/tut1.htm\"]http://www.beforethedog.com/tutoriali/tut1.htm[/url]
34. Navigation Menu without Images: [url=\"http://www.bravenet.com/resources/tipsandtricks/showtip.php?view=160\"]http://www.bravenet.com/resources/tipsandt...ip.php?view=160[/url] - NEW!
35. Dynamic @import CSS files using PHP: [url=\"http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/\"]http://www.1976design.com/blog/archive/200...hp-dynamic-css/[/url] - NEW!
36. max-width in Internet Explorer: [url=\"http://www.svendtofte.com/code/max_width_in_ie/\"]http://www.svendtofte.com/code/max_width_in_ie/[/url] - NEW!
37. Css article focus on rounded corner in css
[url=\"http://kalsey.com/2003/07/rounded_corners_in_css/\"]http://kalsey.com/2003/07/rounded_corners_in_css/[/url]
-------
Tools and Utilities
1. Build tableless (with CSS) pages with this free online tool: [url=\"http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml\"]http://www.fu2k.org/alex/css/layouts/3Col_...dAbsolute.mhtml[/url]
2. User Style Sheet Wizzard [url=\"http://www.techdis.ac.uk/seven/wizards/user-style.html\"]http://www.techdis.ac.uk/seven/wizards/user-style.html[/url]
3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables): [url=\"http://www.hisoftware.com/access/valueadd9.html\"]http://www.hisoftware.com/access/valueadd9.html[/url]
4. Style Master - CSS Web Page layout Editor for Windows and Macintosh: [url=\"http://www.westciv.com/style_master/\"]http://www.westciv.com/style_master/[/url][COLOR=red]
5. Excellent CSS Valiadtor: [url=\"http://www.style-sheets.com/validator.asp\"]http://www.style-sheets.com/validator.asp[/url]
[url=\"http://forums.htmlcenter.com/showthread.php?threadid=1170\"][Source][/url]
For CSS Fans: CSS ZEN GARDEN
CSS Tutorials (all-in-one) [url=\"http://www.thefixor.com/code_css.php#tutor\"]http://www.thefixor.com/code_css.php#tutor[/url]
1. Rebuilding a Site With Standards [url=\"http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html\"]http://www.meyerweb.com/eric/talks/2002/wd...rebuilding.html[/url]
2. The University of Arizona - Cascading Style Sheets [url=\"http://uaweb.arizona.edu/resources/tutorial/css/index.shtml\"]http://uaweb.arizona.edu/resources/tutoria...css/index.shtml[/url]
3. W3C Web Style Sheets CSS tips & tricks [url=\"http://www.w3.org/Style/Examples/007/\"]http://www.w3.org/Style/Examples/007/[/url]
4. Tables or CSS? Choosing a layout [url=\"http://www.saila.com/usage/layouts/cssvtables.shtml\"]http://www.saila.com/usage/layouts/cssvtables.shtml[/url]
5. Tableless Layout with CSS HowTo (W3C) [url=\"http://www.w3.org/2002/03/csslayout-howto.html.en\"]http://www.w3.org/2002/03/csslayout-howto.html.en[/url]
6. How to build a web site without tables [url=\"http://www.mako4css.com/Tutorial.htm\"]http://www.mako4css.com/Tutorial.htm[/url]
7. CSS Quick Reference [url=\"http://www.devguru.com/Technologies/css/quickref/css_index.html\"]http://www.devguru.com/Technologies/css/qu.../css_index.html[/url]
8. Real World Table Free Site Development [url=\"http://www.womendesignersgroup.com/articlerachel.shtml\"]http://www.womendesignersgroup.com/articlerachel.shtml[/url]
9. CSS Bugs and Workarounds [url=\"http://css.nu/pointers/bugs.html\"]http://css.nu/pointers/bugs.html[/url]
10. How to hide CSS from buggy browsers [url=\"http://w3development.de/css/hide_css_from_browsers/\"]http://w3development.de/css/hide_css_from_browsers/[/url]
11. Hiding CSS form Netscape 4+ [url=\"http://www.v2studio.com/k/css/n4hide/\"]http://www.v2studio.com/k/css/n4hide/[/url]
12. External link icons the CSS way: [url=\"http://www.kryogenix.org/days/173.html\"]http://www.kryogenix.org/days/173.html[/url]
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. [url=\"http://moronicbajebus.com/playground/cssplay/top-menu/\"]http://moronicbajebus.com/playground/cssplay/top-menu/[/url]
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> ). [url=\"http://moronicbajebus.com/playground/cssplay/hover-sidebar/\"]http://moronicbajebus.com/playground/csspl.../hover-sidebar/[/url]
15. Erlarger Button Menu with CSS - Overlapping the other elements: [url=\"http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/\"]http://moronicbajebus.com/playground/csspl...er-button-menu/[/url] 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. [url=\"http://moronicbajebus.com/playground/cssplay/reformat-table/\"]http://moronicbajebus.com/playground/csspl...reformat-table/[/url]
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... [url=\"http://moronicbajebus.com/playground/cssplay/image-replacement/\"]http://moronicbajebus.com/playground/csspl...ge-replacement/[/url]
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. [url=\"http://moronicbajebus.com/playground/cssplay/markyourjump/\"]http://moronicbajebus.com/playground/csspl...y/markyourjump/[/url]
19. Horizontal Menu using CSS [url=\"http://moronicbajebus.com/playground/cssplay/hormenu/\"]http://moronicbajebus.com/playground/cssplay/hormenu/[/url]
20. Add banner positioning with CSS [url=\"http://www.peterbailey.net/test/banner.htm\"]http://www.peterbailey.net/test/banner.htm[/url]
21. Box Model Hack [url=\"http://www.tantek.com/CSS/Examples/boxmodelhack.html\"]http://www.tantek.com/CSS/Examples/boxmodelhack.html[/url]
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. [url=\"http://www.edgeofmyseat.com/showarticle.do?AID=5\"]http://www.edgeofmyseat.com/showarticle.do?AID=5[/url]
23. Use CSS to Color Your Forms [url=\"http://www.edevcafe.com/viewdoc.php?id=6\"]http://www.edevcafe.com/viewdoc.php?id=6[/url]
24. CSS-driven tabs [url=\"http://www.clagnut.com/writings/csstabs/\"]http://www.clagnut.com/writings/csstabs/[/url]
25. CSS: Mix and match Classes [url=\"http://catcode.com/csstips/classes.html\"]http://catcode.com/csstips/classes.html[/url]
26. CSS: Graphic List Bullets [url=\"http://catcode.com/csstips/graphic_list.html\"]http://catcode.com/csstips/graphic_list.html[/url]
27. CSS: Centered Tables [url=\"http://catcode.com/csstips/center_table.html\"]http://catcode.com/csstips/center_table.html[/url]
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. [url=\"http://www.mako4css.com/Issues.htm\"]http://www.mako4css.com/Issues.htm[/url]
29. Mark external links on your site (and others!) [url=\"http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6\"]http://www.sitepoint.com/newsletter/viewis...0&format=html#6[/url]
30. CSS Positioning Properties [url=\"http://www.miswebdesign.com/resources/articles/css-positioning-properties.html\"]http://www.miswebdesign.com/resources/arti...properties.html[/url]
31. CSS Menus - Uberlink CSS Rollovers: [url=\"http://www.projectseven.com/tutorials/css_menus/list_01/index.htm\"]http://www.projectseven.com/tutorials/css_...st_01/index.htm[/url]
32: CSS-TD CSS Table Design: [url=\"http://www.projectseven.com/tutorials/css_t/index.htm\"]http://www.projectseven.com/tutorials/css_t/index.htm[/url]
33. Css Iframe Mimics [url=\"http://www.beforethedog.com/tutoriali/tut1.htm\"]http://www.beforethedog.com/tutoriali/tut1.htm[/url]
34. Navigation Menu without Images: [url=\"http://www.bravenet.com/resources/tipsandtricks/showtip.php?view=160\"]http://www.bravenet.com/resources/tipsandt...ip.php?view=160[/url] - NEW!
35. Dynamic @import CSS files using PHP: [url=\"http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/\"]http://www.1976design.com/blog/archive/200...hp-dynamic-css/[/url] - NEW!
36. max-width in Internet Explorer: [url=\"http://www.svendtofte.com/code/max_width_in_ie/\"]http://www.svendtofte.com/code/max_width_in_ie/[/url] - NEW!
37. Css article focus on rounded corner in css
[url=\"http://kalsey.com/2003/07/rounded_corners_in_css/\"]http://kalsey.com/2003/07/rounded_corners_in_css/[/url]
-------
Tools and Utilities
1. Build tableless (with CSS) pages with this free online tool: [url=\"http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml\"]http://www.fu2k.org/alex/css/layouts/3Col_...dAbsolute.mhtml[/url]
2. User Style Sheet Wizzard [url=\"http://www.techdis.ac.uk/seven/wizards/user-style.html\"]http://www.techdis.ac.uk/seven/wizards/user-style.html[/url]
3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables): [url=\"http://www.hisoftware.com/access/valueadd9.html\"]http://www.hisoftware.com/access/valueadd9.html[/url]
4. Style Master - CSS Web Page layout Editor for Windows and Macintosh: [url=\"http://www.westciv.com/style_master/\"]http://www.westciv.com/style_master/[/url][COLOR=red]
5. Excellent CSS Valiadtor: [url=\"http://www.style-sheets.com/validator.asp\"]http://www.style-sheets.com/validator.asp[/url]
[url=\"http://forums.htmlcenter.com/showthread.php?threadid=1170\"][Source][/url]
Last edited by RuffRyders on Sat Apr 09, 2005 4:32 pm, edited 1 time in total.
The bruises fade but memories are made.
Css Resource Links
[quote name=\'RuffRyders\']1. Build tableless (with CSS) pages with this free online tool: [url="http://www.fu2k.org/alex/css/layouts/3Col_...dAbsolute.mhtml"]http://www.fu2k.org/alex/css/layouts/3Col_...dAbsolute.mhtml[/url][/quote]
Broken URL!
Broken URL!
[align=center]
“If you stop learning, you stop living.” ~Tami Quiring
“It's the rare man who understands the value of a single perfect rose.”
[/align]
“If you stop learning, you stop living.” ~Tami Quiring
“It's the rare man who understands the value of a single perfect rose.”
[/align]
Css Resource Links
All of the links with ... don\'t seem to work for me :S
Love is all a matter of timing.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.
Css Resource Links
Should all be sorted now <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />
Css Resource Links
There's also radar if you can't be stuffed reading anything <img src=\'http://www.killanet.net/forum3/public/s ... iggrin.gif\' class=\'bbc_emoticon\' alt=\':D\' />
Css Resource Links
[url=\"http://www.csstutorial.net/\"]CSSTutorial.net[/url]
Plain English tutorials, not cluttered with ads and pop-ups and extremely easy to understand.
Plain English tutorials, not cluttered with ads and pop-ups and extremely easy to understand.
[color=\"#41211C\"]It takes years to build up trust and only seconds to destroy it
[/color]
Css Resource Links
Here\'s a small amount of rounded tables in CSS
[url=\"http://kalsey.com/2003/07/rounded_corners_in_css/\"]http://kalsey.com/2003/07/rounded_corners_in_css/[/url]
[url=\"http://www.alistapart.com/articles/customcorners/\"]http://www.alistapart.com/articles/customcorners/[/url]
[url=\"http://virtuelvis.com/gallery/css/rounded/\"]http://virtuelvis.com/gallery/css/rounded/[/url]
[url=\"http://www.vertexwerks.com/tests/sidebox/\"]http://www.vertexwerks.com/tests/sidebox/[/url]
[url=\"http://kalsey.com/2003/07/rounded_corners_in_css/\"]http://kalsey.com/2003/07/rounded_corners_in_css/[/url]
[url=\"http://www.alistapart.com/articles/customcorners/\"]http://www.alistapart.com/articles/customcorners/[/url]
[url=\"http://virtuelvis.com/gallery/css/rounded/\"]http://virtuelvis.com/gallery/css/rounded/[/url]
[url=\"http://www.vertexwerks.com/tests/sidebox/\"]http://www.vertexwerks.com/tests/sidebox/[/url]
[align=center]
“If you stop learning, you stop living.” ~Tami Quiring
“It's the rare man who understands the value of a single perfect rose.”
[/align]
“If you stop learning, you stop living.” ~Tami Quiring
“It's the rare man who understands the value of a single perfect rose.”
[/align]
Css Resource Links
[url=\"http://css.maxdesign.com.au/listamatic/\"]http://css.maxdesign.com.au/listamatic/[/url]
Lots of ways to do lists and have them not look like a list.
Lots of ways to do lists and have them not look like a list.
Love is all a matter of timing.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.