수안이의 컴퓨터 연구실

Introductory basic tutorials on CSS.

1. CSS Basics : 18 chapter introduction; at CSSBasics
2. CSS 101 : Bare Bones, No Crap, CSS Text Control Primer ; by WendyPeck
3. CSS101 : 4 Lesson Beginners Course ; at CreateWebMagic
4. CSS Beginners Guide : at HTMLDog
5. CSS From the Ground Up : 15 step introduction; at WPDFD
6. CSS: An Introduction : Six part Introduction; at CommunityMX
7. A Roadmap to Standards : essay on CSS standards

Printable CSS cheat sheets.

1. CSS level 1 - Quick Reference Card - PDF
2. CSS level 2 - Quick Reference Card - PDF
3. CSS Cheat Sheet - PDF
4. CSS Cheat Sheet - PNG
5. CSS Property Index : all properties in alphabetical order
6. Cascading Style Cheatsheet : Most useful CSS properties with examples
7. CSS Shorthand Guide : CSS properties with examples
8. Quick Reference Guide for CSS2 - PDF

CSS sites to read / visit daily.

1. 456bereastreet.com : blog by Roger Johansson
2. Asterisk*: Where web design lives : blog by D. Keith Robinson
3. Bite Size Standards : concise web development tutorials, tips and tricks
4. boagworld : practical advice for those managing websites
5. CSS Help Pile : Links and discussion about the best CSS resources
6. Design View : Andy Rutledge : Andy Rutledge
7. design.Principles : REH3design
8. Digital Web : The web professional’s online magazine of choice.
9. Dustin Diaz : Web standards with imagination
10. Fadtastic : The multi-author web design trends journal
11. Fiftyfoureleven : web development weblog and resources
12. A List Apart : For people who make websites
13. Mandarin Design : For people who make mistakes
14. meyerweb : Eric Meyer
15. mezzoblue : blog by Dave Shea
16. Particle Tree : features and blog
17. SimpleBits : Hand-crafted web sites, pixels and text.
18. Sitepoint : features and blog
19. snook.ca : Jonathan Snook
20. SonSpring : blog by Nathan Smith
21. Stylegala : A publication about web design and standards
22. Jeffrey Veen : Jeffrey Veen
23. WeBreakStuff : blog by Frederico Oliveira
24. The Web Standards Project : grassroots coalition fighting for standards
25. Wisdump : Dumping the wisdom of business, design and web++ on the masses.
26. Zeldman : Jeffrey Zeldman

Discussion lists / forums for CSS.

1. CSS Creator Forum : In the CSS Forum you can discuss CSS and find solutions to CSS problems.
2. CSS-Discuss List : Discuss CSS; (average traffic volume of 50+ messages per day)
3. css-discuss Wiki : The css-discuss Wiki is a companion to the CssDiscussList mailing list.
4. HighDots Forums : Cascading Style Sheets forum
5. Open Source Web Design - The Forum : Design/CSS related discussions
6. Open Web Design Forum : Design/CSS related discussions
7. SitePoint Forums : CSS Forum
8. Stylegala Forums : CSS and web design forums
9. WSG Discussion List : Web Standards Group
10. WebmasterWorld : CSS forum

Visit these CSS layout galleries. Be inspired.

1. Coolwebsites.dk : 1000+ websites
2. CreateBlog : 3000+ layouts
3. CSS Beauty : Layouts Gallery.
4. CSS Blast : Russian site showcasing designs.
5. CSS Bloom : Gallery with user ratings and commenting
6. CSS Drive : Categorized CSS gallery and examples.
7. CSSelite : Ajax based gallery.
8. CSS Empire : Gallery showcase
9. CSSHilfe Galerie : German site
10. CSS Import : The CSS Gallery
11. CSS Mania : 2000+ layout designs
12. CSS-Mania : design gallery
13. CSS Reboot : Designs with user voting
14. CSS Remix : Designs with user voting
15. css thesis : sites, that’s all.
16. CSS Vault : The Web’s CSS Site
17. css Zen Garden : The Beauty in CSS Design
18. CSS Zen Garden Shot : all the CSS Zen Garden shots on 1 page.
19. Daily Slurp : Gallery showcase
20. Design Shack : gallery showcase
21. Design Snack : digg style voting
22. Digital Refueler : gallery showcase
23. Digitalthread : gallery showcase by keywords
24. Dobelpixel : 80+ site designs reviewed.
25. e-Creative : those which give us an inspiration
26. InspirationKing : gallery showcase
27. lookom | linklist : Designs with user voting
28. NewWebPick : design showcase
29. OSWD - Open Source Web Design : Download and upload free web designs
30. Pajatti.net : Design showcase
31. Piepmatzel : design gallery
32. Showcase GR : Greek sites reviewed.
33. Stylegala : design gallery
34. tom.ma : design gallery
35. Unmatched Style : CSS Gallery and Website Design Inspiration.
36. visualdesigner : Designs with user voting
37. W3 Compliant Sites : 3000+ sites
38. Web Creme : Design gallery categorized by colors
39. Web Standards Awards : 100 websites
40. Wow factor : site of the week

CSS techniques to create / display images on your site.

1. Accessible Image Tab Rollovers : Case study of FastCompany navigation redesign by Dan Cederholm.
2. Adding bullet images to styles : Simple technique of adding a bullet before text.
3. Another image replacement technique : FIR improved
4. :BefTer Drop Shadow : Drop shadows using before and after elements
5. Bullet-Proof Rounded Corners : Rounded corners that work in most browsers.
6. Clever PNGs : Creating .PNG that show well in IE and Firefox
7. Creating Custom Borders and Corners : at A List Apart
8. CSS Rollover Buttons : Button rollover tutorial.
9. CSS Rollover Background Images - No Preload Required : CSS menus using one background image.
10. Fahrner Image Replacement : A List Apart articles.
11. Fast rollovers, no preload needed : CSS rollovers without preloads
12. Fluid Shadows : Dropshadows that move with the size of the browser.
13. Graphical Headings : Another image replacement technique
14. Inman Flash Replacement : Text replacement in Flash
15. Image Replacement - No Span : another version of FIR
16. Responsible CSS - Recycle your background images : How to re-use your background images at other places on the site.
17. Rounding Tab Corners : Tutorial by Eric Meyer
18. sIFR 1.0 : Hopefully the last image replacement technique you will ever need.
19. sIFR 2.0: Rich Accessible Typography for the Masses : by Mike Davidson
20. sIFR 3 Alpha : at NovemberBorn
21. Sliding Doors of CSS (Part I) : CSS tabs article by Douglas Bowman.
22. Sliding Doors of CSS, Part II : Follow up article.
23. The Thrashbox : A Simple, Semantically Correct CSS Box with Clean Code

Hundreds of CSS layouts available for download and use.

1. Layout Gala : 40 layouts including Three percentage columns, Three fixed columns, Liquid secondary columns, Liquid three columns, Two columns liquid, Two percentage columns, Two colums fixed, One column fixed and two halves etc.
2. Nemesis Project: CSS table-less design templates : 40+ CSS table-less design templates
3. Template: css at i-use.it : 30+ layouts including Tanfa: 3 columns, Stanicek: 3 cols, Meadowcroft: unthreaded discussion, Brill: 3 cols etc.
4. Max Design : 20+ layouts including Floatutorial, Two columns with color, Selectutorial, Colored boxes, Single column etc.
5. Little Boxes : 15+ layouts including one box, two box, three column, absolute, fluid, touching, centered etc.
6. Intensivstation : 15+ layouts including 2 columns fixed centered, 2 columns fixed centered, 3 columns fixed centered etc.
7. Solucija : 10+ layouts including Internet Market, Internet Center, What’s your solution?, Internet Jobs, Small Studio, Modern World, Blue Blog Template, Sonia Template, Happy Blog, Open your windows!, Please Smile Again etc.
8. CSS Play UK : 10+ layouts including Three columns, Shrink your body, Back to BASICS, Simple minimum width layout, 100% background image etc.
9. TJK Design : 8 layouts including liquid, fluid, elastic, flexible, jello…
10. Ruthsarian Layouts : 7+ layouts including Tank!, Skidoo Too, Skidoo Too : Gargoyles, Skidoo : 2 or 3 Column w/Background Colors etc.
11. Yahoo! UI Library: Grids CSS : Layouts templates by Yahoo
12. Mollio : 6 layouts including 1 column, 2 columns - Main + Left hand nav, 3 columns - Main + Left hand nav + Right Sidebar, 2 columns - Main + Right Sidebar, 2 columns - Main + Right hand nav, 3 columns - Main + Right hand nav + Left Sidebar.
13. glish.com : 6+ layouts including 3 Columns The Holy Grail, 2 Columns, ALA Style, 4 Columns All Fluid , 3 Columns All Fluid Nested Float etc.
14. BlueRobot : 3 layouts including 2 columns - left menu, 2 columns - right menu, 3 columns - flanking menus.
15. Tanfa UK : 3 layouts including Flexi-Floats, Absolutely Fluid, 3 Column etc.
16. WebProducer.at : Flexible Layout
17. Yet Another Multicolumn Layout : A multi-column layout. German site. Click download button.
18. CSS Page Layout Templates : Two and Three-column layouts for download
19. Changingman : a liquid three column CSS layout with a fixed positioned and width centre column
20. Ben Meadowcroft’s Templates : Two/Three column layouts
21. Real World Style : Two/Three column layouts.
22. CSS-discuss list : 50+ three column layouts.
23. CSS Zen Garden : 800+ layouts including 2 Column, Disconnected, Garden & Floral, etc.
24. Andreas Viklund’s Free templates : freeware templates by Andreas Viklund
25. Open Web Design : 1500+ layouts in business and fun types. Searchable database.
26. Open Source Web Design : 1600+ webdesigns including CSS

Articles / tutorials on creating CSS layouts.

1. Advanced CSS Layouts: Step by Step : at WebReference
2. Creating a CSS Layout from scratch : at Subcide
3. CSS Positioning : at BrainJar
4. Dynamic Resolution Dependent Layouts : at ParticleTree
5. In search of the One True Layout at Position is Everything
6. An Overview of Current CSS Layout Techniques : at ParticleTree
7. Practical CSS Layout Tips, Tricks, and Techniques : at A List Apart

CSS techniques to overlay images on a webpage.

1. Lightbox JS : Original; a simple, unobtrusive script used to overlay images on the current page.
2. Greased Lightbox : Greasemonkey/Creammonkey/Opera user script designed to enhance browsing on websites that link to images such as Google Image Search, Flickr, Wikipedia, Facebook, MySpace, and deviantART.
3. GreyBox : A pop-up window that doesn’t suck.
4. Greybox Redux : Completely unobtrusive - no need to embed Javascript into your site.
5. Leightbox : uses inline div’s instead of AJAX calls.
6. Lightbox Plus : by Takuya Otani
7. Lightbox Gone Wild : at ParticleTree
8. The Lightbox Effect without Lightbox : by PJ Hyett
9. LITBox 2.0 : modified Thickbox made into a Prototype class based off of the Scriptaculous.
10. Multifaceted Lightbox : at GregPhoto
11. Prototype Window Class : at Xilinus
12. Suckerfish HoverLightbox : hover + gallery + lightbox at MondayByNoon
13. Thickbox - One box to rule them all. : by Cody Lindley
14. Slightly ThickerBox : Thickbox with Prev and Next links at Jasons Toolbox
15. WP lightbox JS WordPress plugin : Wordpress Plugin by Safirul Alredha
16. Lightbox2 : Wordpress Plugin at m3nt0r - beyond the net
17. GreyBox Plugin : Wordpress Plugin at aNieto2K

Articles / Tutorials on lists, menus, navigations and tabs.

1. 11 CSS navigation menus : at Exploding Boy
2. 12 more CSS Navigation Menus. : at Exploding Boy
3. 14 Free Vertical CSS Menus : at Exploding Boy
4. 2-level horizontal navigation : demo at Duoh
5. Absolute Lists: Alternatives to Divs : An approach of using lists instead of divs at evolt
6. Accessible Image-Tab Rollovers : demo at Simplebits
7. ADxMenu : multiple menu examples at aPlus
8. A drop-down theme : at CSS Play
9. Bookend Lists: Using CSS to Float a Masthead : at WebSiteOptimization
10. Bulletproof Slants : demo at Simplebits
11. Centered Tabs with CSS : at 24ways
12. Clickable Link Backgrounds : A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS ; but that is also clickable.
13. Create a Teaser Thumbnail List Using CSS: Part 1 : lists of items made up of a title, short description, and thumbnail.
14. Creating Indented Navigation Lists : A multi-level indented list
15. Creating Multicolumn Lists : at Builder.com
16. cssMenus - 4 Level Deep List Menu : at SolarDreamStudios
17. CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
18. CSS-Based Tabbed Menu : a simple tabbed menu.
19. CSS-based Navigation : demo at Nundroo
20. CSS: Double Lists : A single list that appears in two columns
21. CSS Mini Tabs (the UN-tab, tab) : demo at Simplebits
22. CSS only dropdown menu : at CSS Play
23. CSS only flyout menus : at CSS Play
24. CSS only flyout/dropdown menu : at CSS Play
25. CSS only flyout menu with transparency : at CSS Play
26. CSS only vertical sliding menu : at CSS Play
27. CSS Swag: Multi-Column Lists : at A List Apart
28. CSS Tabs : tabs without any images
29. CSS Tabs : list of various tab solutions
30. CSS tabs with Submenus : at Kalsey.
31. dTree Navigation Menu : Javascripts Tree at Destroydrop
32. Definition lists - misused or misunderstood? : appropriate uses of definition lists
33. Do You Want To Do That With CSS? - Multiple Column Lists : multi-column lists.
34. Drop-Down Menus, Horizontal Style : at A List Apart
35. Float Mini tabs : at Web-Graphics
36. Flowing a List Across Multiple Columns : A table without using tables.
37. Free Menu Designs V 1.1 : ready-to-download block menusat e-lusion
38. FreeStyle Menus : XHTML compliant, CSS-formatted menu script at TwinHelix
39. Hidden tab menu : at CSS Play
40. How to Style a Definition List with CSS : at WebReference
41. How to Style an Unordered List with CSS : at WebReference
42. How to Use CSS to Position Horizontal Unordered Lists : at WebReference
43. Hybrid CSS Dropdowns : at a List Apart
44. Inline Mini Tabs : at Web-Graphics
45. Intelligent Menus : CSS and PHP menu at PhotoMatt.net
46. Inverted Sliding Doors Tabs : at 456BereaStreet
47. Light Weight Multi Level Menu : at CssCreator
48. List Display Problems In Explorer For Windows : list hack for IE
49. Listamatic : simple lists; various styles.
50. Listamatic2 : nexted lists; various styles
51. Menus galleries in CSS and XHTML : multiple examples and downloads at Alsacreations
52. Mini-Tab Shapes : demo at Simplebits
53. Mini-Tab Shapes 2 : demo at Simplebits
54. More than Just Bullets : at W3.org
55. Multiple Column Lists : at css-discuss
56. A Navbar Using Lists : A lightweight nav bar at WestCiv
57. Navigation Matrix Reloaded : at SuperfluousBanter
58. Remote Control CSS : examples of lists styled differently
59. Remote Control CSS Revisited - Caving in to peer pressure : multi-column remote control
60. Rounding Tab Corners : by Eric A. Meyer.
61. Simple CSS Tabs : at SilverOrange
62. Simplified CSS Tabs : demo at Simplebits
63. Sliding Doors : at A List Apart
64. Spruced-Up Site Maps : sitemaps as lists
65. Styling Nested List : at SimpleBits
66. Suckerfish Dropdowns : at HTMLDog
67. Tabtastic : Gavin Kistner.
68. Tabs Tutorial at BrainJar
69. Taming Lists : at A List Apart
70. Turning a List into a Navigation Bar : at 456BereaStreet
71. Ultimate css only dropdown menu : at CSS Play

Add these must-read RSS Feeds to your favorite feed-reader.

1. 465 Berea Street : RSS Feed
2. CSS Beauty : RSS Feed
3. CSS Help Pile : RSS Feed
4. Digital Web Magazine : RSS Feed
5. Fadtastic : RSS Feed
6. Fifty Four Eleven : RSS Feed
7. MeyerWeb : RSS Feed
8. Particle Tree : RSS Feed
9. Simplebits : RSS Feed
10. Snook.ca : RSS Feed
11. Stop Design : RSS Feed
12. We Break Stuff : RSS Feed
13. Web Standards Project : RSS Feed
14. White Space : RSS Feed

CSS Complete Layouts

1. CSS Template Code Generator : Maker for 3 Column Layout (tableless)
2. Firdamatic at WannabeGirl : Two/Three column design tool for uninspired bloggers.
3. The Generator Form v2.90 at Position Is Everything : Make layout choices for ordered 1-3 columned page; generate layout.
4. HTML PHP CSS Website Template Maker at MakeTemplate : customized page layout generator
5. Layout-o-matic : Make layout choices for Full Page, Two Columns, Three Columns; generate layout.
6. Layout Generator at CSS Creator : Make choices for fliud/fixed, upto 3 columns, header, footer; generate layout.
7. Style Sheet Generator at Scriptomizer : customized CSS stylesheet generator

CSS Lists/Menus/Navigation/Tabs

1. List-u-Like CSS Generator : Create cross-browser list-based navigation bars with ease
2. List-O-Matic : Generate CSS-styled navigation menus based on list items
3. CSS Menu Generator : Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.

CSS Rollover Effects

1. The Amazing Rollover : get rollover effect HTML/CSS
2. CSS rollover generator at Colly : CollyLogic CSS Multi-element Rollover Generator

CSS Formatters/Optimizers

1. CleanCSS : CSS Formatter and Optimiser
2. CSS Compressor : CSS compressor with lots of choices.
3. CSS Formatter and Optimiser : CSS optimiser ; available in English/Deutsch/French/Chinese
4. Online CSS Optimizer : This tool is used to optimise CSS code. Enter either a URL or Copy and Paste the stylesheet into the box, and click Go
5. Online CSS Optimizer : CSS Optimizer optimizes and reduces the file size of the Cascading Style Sheets
6. PrettyPrinter for CSS, PHP, Java, C++, C, Perl, JavaScript : Formats code for easy printing.

CSS Validators

1. W3C CSS Validator : at W3C
2. CSSCheck : CSS validator at HTMLHelp

Misc/Etc

1. CSS Designer at QrONE : customized CSS for a DIV
2. CSS Form Code Maker at MakeTemplate : Generates colorful box layout for forms
3. CSS Rounded Box Generator (Beta) at NeuroticWeb : customize a rounded box to get CSS/HTML
4. Enhance the table with round corner stone! : converts a table into rounded corners
5. Online CSS Scrollbar Color Changer at Iconico : Change the scrollbar colors in an HTML page
6. Scrollbar Coloring at Scriptomizers : Customize and color your scrollbars using CSS.
7. Create CSS Forms Online: JotForm : customized forms
8. Webucator : online css/html editor-and-viewer; edit html/css; press run; see results.
9. Selectoracle : selectors/rulesets validator and viewer

Using CSS to create popup layovers / windows.

1. Popup Windows : customised popup windows with JavaScript
2. Pure CSS Popups : CSS Popups demo by Eric A. Meyer
3. Pure CSS Popups 2 : CSS Popups demo by Eric A. Meyer
4. TJKPop Ups : Pure CSS Pop Ups : extending pure CSS popups

CSS References for properties / specifications.

1. Cascading Style Sheets 2.1 Reference : Quick access to all 95 CSS 2.1 properties
2. CSS Properties : reference at HTMLDog
3. CSS Property Index : all properties at Blooberry
4. CSS Reference : at Stylegala
5. CSS Reference : at Webucator
6. CSS Reference Page : at Tizag
7. CSS2 Reference : at W3Schools
8. CSS 2.1 selectors : at 456 Berea Street
9. Complete CSS Guide : at WestCiv
10. CSS Pod Guide : downloadable iPod reference at WestCiv
11. How to Read W3C Specs : at A List Apart
12. Will the browser apply the rule(s)? at CSS Centricle : reference table showing what properties/hacks are ignored by various browsers.

Techniques to make cool rounded corners.

1. CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
2. Boxes with Curves : at WebDevTips
3. Borders With Curves : at WebDevTips
4. Broader Border Corners : at 24Ways
5. Nifty Corners Cube : at html.it
6. More Nifty Corners : at html.it
7. Rounding Tab Corners : by Eric A. Meyer.
8. CSS Teaser Box (using 1 image) : at 456bereastreet
9. CSS Teaser Box (using 2 images) : at 456bereastreet

Software programs to create / edit / test CSS.

1. CSS Syntax Checker for BBEdit and TextWrangler : freware; Mac ; Perl and AppleScript that allows you to syntax-check CSS files using the W3C’s CSS Validation Service.
2. CSSTidy : opensource; CSSTidy is a CSS parser and optimiser
3. CSS Tab Designer : freeware ; create css-based lists and tabs visually
4. CSSVista : freeware; edit your CSS code live in both Internet Explorer and Firefox simultaneously.
5. DeLuxe Menus : $39.95 ; create Javascript menus.
6. Style Master : $59.95 ; complete workplace for designing, developing and debugging your CSS.
7. Style Studio CSS Editor : $49.99 ; CSS Editor is designed to make all your CSS and HTML tasks easier.
8. TopStyle : $79.95 ; HTML, xHTML and CSS Editing in a Single Program
9. Xyle scope at Cultured Code : $19.95 ; CSS Tool for analysis, debugging, and fine-tuning ; for Mac

Style guides and best practices for CSS

1. NYPL Online Style Guide : explains the markup and design requirements, along with various standards and best practices.
2. Better Living Through XHTML : An unauthorized companion to the Online Style Guide of the Branch Libraries of The New York Public Library

Style your tabular data with CSS.

1. A CSS Styled Table : at Duoh
2. CSS Table Gallery : gallery of downloadable table CSS styles
3. Bring on the tables : at 456bereastreet
4. CSS Tables : examples at Bowdoin.edu
5. Designing Data Part 1: Table structure : how to create XHTML-compliant tables
6. Designing Data Part 2: Adding Style : how to create XHTML-compliant tables
7. HTML, CSS and tables - the beauty of data : at icant.co.uk
8. How to Alternate Table Row Colors in CSS and HTML : at Somacon
9. Replicating a Tree Table : at MaxDesign
10. Scrollable Table with Fixed Header : example by Brett Merkey
11. Styling Tables with CSS : at FluidMind.org
12. Tables with Style : at 24ways
13. Tabular Weirdness : by Eric Meyer
14. Why CSS styling is for tables too : at Builder
15. Zebra Tables : at A List Apart

Sites with long, multiple tutorials on CSS.

1. CSS Basics.com : Learn everything you ever wanted to know about the basics of CSS
2. CSS Tutorials : at EchoEcho
3. CSS Tutorials : Eric Meyer / Meyerweb
4. CSS Tutorials : at Tizag
5. CSS Tutorials : at Tutorialized
6. CSS Tutorials : at W3 Schools
7. CSS Tutorials : CSS guide, Tutorials, Articles at WestCiv
8. CSS Tutorials/Examples : Position Is Everything
9. CSS Demonstrations and Tutorials : at DoMedia
10. Floatutorial : CSS Tutorials on Float
11. Listutorial : CSS Tutorials on Lists
12. Selectutorial : CSS Tutorial on Selectors
13. CSS Beginner’s Guide : at HTMLDog.com
14. CSS Intermediate Guide : at HTMLDog.com
15. CSS Advanced Guide : at HTMLDog.com
16. Stylesheets : at HTMLSource
17. Project Cool: Web Development Basics : CSS Tutorials at DevX