CSS Links

Links that lead to off-site pages about CSS.

• Charts
  • CSS Bar Graphs and Charts [lorelle.wordpress.com/2006/01/05/css-bar-graphs-and-charts]
  • CSS for Bar Graphs [apples-to-oranges.com/blog/article.aspx?id=55]
  • Drawing with CSS [wpdfd.com/editorial/wpd0104review.htm]
• Columns
  • Here are the main options in pseudo-code.
    • Fixed (usu. px), fluid (usu. %), and elastic (usu. em).
    • 2 columns (main and menu)
      • <div>main floated left or right</div>      <div>menu</div>
      • <div>    <div>menu floated left or right</div>     main</div>
      • <div>menu fixed or fluid</div>    <div>main fixed or fluid</div>
      • <div>main fixed or fluid</div>    <div>menu fixed or fluid</div>
    • 3 columns (left, main, right)
      • <div>left fixed</div>   <div>main fixed</div>   <div>right fixed</div>. All centered or all left.
      • <div>left fixed</div>   <div>main fixed</div>   <div>right fluid</div>
      • <div>left fixed</div>   <div>main fluid</div>   <div>right fixed</div>
      • <div>left fixed</div>   <div>main fluid</div>   <div>right fluid</div>
      • <div>left fluid</div>   <div>main fixed</div>   <div>right fixed</div>
      • <div>left fluid</div>   <div>main fixed</div>   <div>right fluid</div>
      • <div>left fluid</div>   <div>main fluid</div>   <div>right fluid</div>
  • CSS.MaxDesign.com.au. "Listamatic" and tutorials. Many variations on lists and stuff on floating and selectors.
  • CSS Three Column Liquid Layout [manisheriar.com/holygrail/index.htm]. By Mani Sheriar. Fixed, fluid, fixed.
  • Equal Height Columns -revisited [positioniseverything.net/articles/onetruelayout/equalheight]
  • http://accessat.c-net.us By K. Chayka. Good for  accessibility issues.
    • Fluid 3-Column CSS Layout. <div>main fluid</div>   <div>left fluid</div>    <div>right fluid</div>. Notice how the main div is first.
    • Fluid 2-Column CSS Layout. <div>main fluid</div>   <div>right fluid</div>. Typical.
    • Fluid 2-Column CSS Layout. <div>main fluid</div>   <div>left fluid</div>. Notice how the main div is first.
  • Glish.com/css/. Many of the main options.
  • In Search of the Holy Grail [alistapart.com/articles/holygrail]. By Matthew Levine. Tutorial too. Fixed, fluid, fixed.
  • pure CSS menus [meyerweb.com/eric/css/edge/menus/demo.html]
  • PVII Equal Height CSS Columns [projectseven.com/tutorials/css/pvii_columns/index.htm]. Seems like you might as well use tables sometimes.
  • Three Column Layouts [css-discuss.incutio.com/?page=ThreeColumnLayouts]. A huge list of links to different ways to layout columns.
• Data entry
  • Check it, don't select it [c82.net/article.php?ID=25]
  • Checkboxes, Radio Buttons, and Drop Downs [yourtotalsite.com/archives/usability/checkboxes_radio_buttons/Default.aspx]
  • Multi-Select Lists vs. Checkboxes [yourtotalsite.com/archives/usability/multiselect_lists_vs_ch/Default.aspx]
• Definition lists (dl, dt, dd)
  • A definition list barchart [cssplay.co.uk/menu/barchart.html]
  • CSS: Formatting a Definition List [the-art-of-web.com/css/format-dl]
  • CSS.MaxDesign.com.au. "Listamatic" and tutorials. Many variations on lists and stuff on floating and selectors.
  • Sensually Styled Definition Lists [moronicbajebus.com/playground/cssplay/dl]
  • Styling Defintion Lists [romankoch.ch/capslock/cssdeflist.htm]
• Drop down menus
  • Cascading Popup Menus [twinhelix.com/dhtml/popupmenu] and FreeStyle Menus [twinhelix.com/dhtml/fsmenu]. Horizontal or vertical.
  • CSS Pop Up Menu [stefashwell.com/tutorials/entry/7]. By Steff Ashwell. Tutorial.
  • Drop-Down Menus: Use Sparingly [useit.com/alertbox/20001112.html]
  • Free CSS Vertical Menu Designs [exploding-boy.com/images/EBmenus/menus.html]
  • How to Style an Unordered List with CSS [webreference.com/programming/css_style2]. Step by step but the list only shows more info instead of nesting sublists.
  • Pure CSS Drop Down Menus [mywebstuff.com/02_css/css_07.html]. Based upon suckerfish. Horizontal with dropdowns
  • Son of Suckerfish Dropdowns [htmldog.com/articles/suckerfish/dropdowns]. Horizontal with dropdowns
• Galleries
  • Cross Browser Multi-Page Photo Gallery [cssplay.co.uk/menu/lightbox.html]
  • Hoverbox Image Gallery [sonspring.com/journal/hoverbox-image-gallery]
• Image Captions
  • CSS: figures & captions [w3.org/Style/Examples/007/figures.html]
  • Floatutorial [css.maxdesign.com.au/floatutorial]
  • Image captions on Web pages [cs.tut.fi/~jkorpela/www/captions.html]
  • Image Floating [simplebits.com/notebook/2004/01/02/simplequiz_part_xi_image_floating.html]
  • Practical CSS Layout Tips, Tricks, & Techniques [alistapart.com/articles/practicalcss]
• Mac CSS
  • CSS Support in Safari. CSS properties and whether or not they are supported by Safari.
  • MacEdition Guide to CSS2 Support in Mac-only Browsers
• Matting and Shadowing
  • CSS Drop Shadows [alistapart.com/articles/cssdropshadows]. By Sergio Villarreal. 315 degree shadow, i.e. light comes from upper left.
    • CSS Drop Shadows II: Fuzzy Shadows [alistapart.com/articles/cssdrop2]. By Sergio Villarreal.
  • Drop Shadow CSS [phoenity.com/newtedge/drop_shadow]. Three techniques.
  • Dynamic Drop Shadows using CSS [mikezilla.com/exp0029.html]. By Mike Goulding. Pure CSS.
  • My contribution to the CSS shadow kerfuffle [theshapeofdays.com/2005/11/my_contribution.html]. By Jeff Harrell. 0 degree shadow, i.e. light comes from above.
    • Another contribution to CSS Drop shadows [hounddog32.com/archives/2005/12/another_contrib.php]. By John Rodgers. Uses the tastypopsicle JS technique.
  • Onion Skinned Drop Shadows [alistapart.com/articles/onionskin]. By Brian Williams.
    • Using Javascript to eliminate extraneous markup in Onion-Skinned Drop Shadows [tastypopsicle.com/dropshadow]
• Roundness
  • CSS and round corners: Borders with curves [webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml]. By Trenton Moss.
  • Simple Rounded Corner CSS Boxes [modxcms.com/index.php?id=318]
  • Spiffy Corners [spiffycorners.com]
• Tables
  • Formatting
    • CSS Table Gallery [icant.co.uk/csstablegallery]. A gallery of different table formats.
    • Tables with Style [24ways.org/advent/tables-with-style]. Fancy table formatting.
  • Sorting
    • Drag & Drop Sortable Lists with JavaScript and CSS [tool-man.org/examples/sorting.html]
    • sorttable: Make all your tables sortable [kryogenix.org/code/browser/sorttable]. Improvement upon the webfx table sorting.
    • Standardista Table Sorting (A client-side JavaScript Table Sorting module) [workingwith.me.uk/articles/scripting/standardista_table_sorting]. Improvement upon the kyrogenix table sorting.
    • Table Sorting [webfx.eae.net/dhtml/tablesort/tablesort.html]. A tutorial too.
    • Table Sorting Demo [brainjar.com/dhtml/tablesort/demo.html]
• W3C.org. The closest thing to an authority on the Web itself.
  • W3.org/Style/ and Activities
    • W3.org/Style/CSS/
      • Cascading Style Sheets, level 1 W3C Recommendation 17 Dec 1996, revised 11 Jan 1999. CSS1
      • Cascading Style Sheets, level 2 CSS2 Specification W3C Recommendation 12-May-1998
        • Properties
      • Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification W3C Candidate Recommendation 25 February 2004
        • Properties
      • Learning CSS. A good listing of resources.
    • W3.org/Style/XSL/. The W3C puts XSL in this section but it should be put under W3.org/XML. See my XML Links.
  • W3C Core Style Sampler [w3.org/StyleSheets/Core/preview]
  • Jigsaw.W3.org/css-validator/.
• Miscellany
  • 24 ways to impress your friends [24ways.org]. Lots of nice little CSS and other tips. Here are a few:
    • Auto-Selecting Navigation 
    • Edit-in-Place with Ajax 
    • Swooshy Curly Quotes Without Images
    • "Z's not dead baby, Z's not dead"
  • AListApart.com. Online periodical on web design.
  • Barely Fitz Designs [barelyfitz.com]
    • Learn CSS Positioning in Ten Steps. Excellent.
    • Projects. How-tos too.
  • Border Slants via CSS.
  • CNET's CSS reference table.
  • Code_Punk's CSS Tutorials Beginners and Advanced
  • Cryer.co.uk. "Brian Cryer's Web Resources."
    • HTML and JavaScript
  • /CSS/ - a guide for the unglued. 'This is not a complete resource, this is a fast resource. These are the sites that I refer to first, and that I tell people to read. When you want more, just about all of them have their own links to good sites.'
  • CSS ain't Rocket Science. Tutorial on CSS.
  • CSS Image Rollovers
  • CSS.nu. 'CSS Pointers Group ... Our focus is Cascading Style Sheets (CSS), and we have tried to compile a useful source of information, examples and links to other external resources.'
  • "CSS Navigation Techniques" [alvit.de/css-showcase/css-navigation-techniques-showcase.php]. A visual show case linking to different examples of CSS navigation done by other people.
  • CSS Play [cssplay.co.uk]. 'experiments with cascading style sheets'. By Stu Nicholls.
  • CSS Positioning [brainjar.com/css/positioning/]. Clear and focused with illustrations.
  • CSS Work. By Eric Meyer.
  • CSS Zen Garden [CSSZenGarden.com]
    • One of the best demonstrations of the power of CSS.
    • The divs of the core doc is as follows:
      • container
        • intro
          • pageHeader. h1(Zen Garden) and h2(The Beauty of CSS Design).
          • quickSummary. 2 p's.
          • preamble. h3(The Road to Enlightenment) and 3 p's
        • supportingText.
          • explanation. h3 and 2 p's
          • participation. h3 and 3 p's
          • benefits. h3 and 1 p
          • requirements. h3 and 5 p's
          • footer. 5 a's
        • linkList
          • linkList2
            • lselect. h3 and ul with 8 a's
            • larchives. h3 and ul with 3 a's
            • lresources. h3 and ul with 5 a's
      • extraDiv1, extraDiv2, ..., extraDiv6
    • Resource Guide
  • Holy CSS ZeldMan! [Dezwozhere.com/links.html]. Links on CSS.
  • HTML and CSS Table Border Style Wizard [somacon.com/p141.php]
  • Invasion of the Body Switchers [alistapart.com/articles/bodyswitchers]
  • Lay-o-matic
  • Mandarin Design [mandarindesign.com]
    • Boxes and Borders
    • Drop Caps
    • Exploring Opacity
    • Text Tricks
  • MezzoBlue.com. Hosts CSS Zen Garden.
  • QuirksMode.org. Lots of CSS browser compatibility tests. See how different CSS works in different browsers.
  • RichInStyle.com.
  • RoderickHoward.com/CSSDirectory/. Lots of essential links.
  • Selectutorial - CSS selectors.
  • Style-Sheet.info.
    • "A free public service by VisiBone. Here are some cascading style sheet examples. The start tag that makes it happen appears below decorated in its own style."
    • If you view it with Internet Explorer on Window then it is also dynamic. If you view it with IE or Safari on Mac OS, then it's static.
  • WebFX [webfx.eae.net]
  • Why tables for layout is stupid: problems defined, solutions offered

Page Modified: (Hand noted: 2007-10-18 17:47:35Z) (Auto noted: 2007-11-17 06:48:27Z)