CSS: The Missing Manual, Second Edition
By David Sawyer McFarlandMissing CD-ROM
Download all tutorial files here.
The Missing Credits
page xiii
- Nellie McKesson, production editor - Band website http://myspace.com/drmrsvandertrampp
- Nellie McKesson's t-shirt site http://mattsaundersbynellie.etsy.com
- Marcia Simmons, copy editor - Personal blog www.smartkitty.org
page xiv
- Tony Ruscoe, technical reviewer - Tony's website http://ruscoe.net
- Tony's site for surname http://ruscoe.name
- Christopher Schmitt, technical reviewer - Christopher's website www.christopherschmitt.com
Introduction
page 2
- CodeHelp - List of obsolete tags http://www.codehelp.co.uk/html/deprecated.html
page 3
- HTML Dog - Free Online HTML Tutorials http://www.htmldog.com/guides/html/beginner/
- W3Schools - Free Online HTML Tutorials www.w3schools.com/html
page 6
- W3 Schools - Free XHTML tutorials http://www.w3schools.com/xhtml/default.asp
page 7
- jEdit - Free text-editing software for Windows, Mac, and Linux http://jedit.org/
- Notepad++ - Text-editing software for Windows http://notepad-plus.sourceforge.net
page 8
- HTML-Kit - HTML editor for Windows http://www.chami.com/html-kit/
- TextWrangler - Free text-editing software for Mac www.barebones.com/learn/products/textwrangler
- EditPlus - Text editor for Windows www.editplus.com
- skEdit - Web page editor for Mac www.skedit.com
- Coda2 - Web development toolkit for Mac www.panic.com/coda
- Dreamweaver - Visual web page editor for Mac and Windows http://www.adobe.com/products/dreamweaver.html
- Expression Web 2 - Web design program for Windows http://www.microsoft.com/expression/eng/
page 9
- CSS 3 - Website to find info http://www.css3.info/
page 11
- Missing Manuals - Find updates to this book http://www.oreilly.com/missingmanuals/
- Living Examples - Download all example files used in this book http://sawmac.com/css2e/
- Feedback Page - Submit your comments or questions www.missingmanuals.com/feedback
- Registration - Register your book www.oreilly.com/register
page 13
- Safari - Website https://www.safaribooksonline.com
Chapter 1: Rethinking HTML for CSS
page 20
- W3 Schools - List of tags http://www.w3schools.com/tags/
page 21
- Google - Suggestions for building a search-friendly website https://support.google.com/webmasters/answer/35769
- Digital Web Magazine - Tips on better SEO for your site http://www.digitalweb.com/articles/seo_and_your_web_site/
page 24
- W3C validator - Validate your HTML http://validator.w3.org/
- Firefox Web Developer extension - Test your HTML with this validator http://chrispederick.com/work/web-developer/
- Firefox HTML validator - Validate your HTML directly in the Firefox browser http://users.skynet.be/mgueury/mozilla/
- Zappatic - Safari browser extension that allows you to validate HTML http://zappatic.net/projects/safarivalidator
page 25
- Definition List and Definition Description tags - Examples on how to use these combo tags http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_list_definition
page 27
- Quirks mode - For more info http://www.quirksmode.org/css/quirksmode.html
- https://hsivonen.fi/doctype/
- W3C Doctypes list http://www.w3.org/QA/2002/04/valid-dtd-list.html
page 29
- IETester - Program that allows you to test on multiple versions of IE (for Windows) simultaneously http://www.my-debugbar.com/wiki/IETester/HomePage
- Boot Camp software - For installing Windows on your Mac http://www.apple.com/macosx/features/bootcamp.html
- Litmus - App that takes screenshots of your page from multiple browsers https://litmus.com/
- Cross Browser Testing - Allows you to log into multiple computers remotely to test your page on different browsers http://crossbrowsertesting.com/
- Browsercam - Program for testing web pages on multiple browsers http://www.browsercam.com/
Chapter 2: Creating Styles and Style Sheets
page 36
- W3 CSS validator - Check your CSS code as well http://jigsaw.w3.org/css-validator/
page 38
- Link vs. Import - Why you should used instead of @import http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
page 39
- Tutorial files - Download http://sawmac.com/css2e/
page 44
- Document and root-relative links http://www.communitymx.com/content/article.cfm?cid=230AD
Chapter 3: Selectors: Identifying What to Style
page 63
- Net Application - Browser usage statistics http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
page 64
- CSSHOVER - Script used with :focus and :hover selectors http://peterned.home.xs4all.nl/csshover.html
- CSS Drop-down menus http://sperling.com/examples/menuh/
- jQuery JavaScript Library http://jquery.com/
- jQuery advanced selectors technique http://kylebradshaw.com/2007/06/10/using-jquery-to-avoid-classitis-in-ie6
page 65
- SelectORacle - Translate a selector into straightforward language http://gallery.theopalgroup.com/selectoracle/
page 68
- HTML title attribute - Add tooltips to links and images http://webdesign.about.com/od/htmltags/a/aa101005.htm
Chapter 5: Managing Multiple Styles: The Cascade
page 96
- Selector specificity - How web browsers calculate specificity http://www.w3.org/TR/CSS21/cascade.html#specificity
page 98
- Web Inspector - How to use http://tinyurl.com/web-inspector
Chapter 6: Formatting Text
page 115
- Cufon - JavaScript solution that allows you to convert to font you want to use instead of HTML text https://github.com/sorccu/cufon/wiki/about
page 116
- Microsoft's Clear Type technology - For better looking type on your Windows machine www.microsoft.com/typography/cleartype
page 118
- CodeStyle.org - List of which fonts are installed in which systems http://www.codestyle.org/css/font-family
- Uninteractive.com - List of other fonts you can use http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks
- Colourlovers.com - For color-related resources http://www.colourlovers.com/
page 124
- Typographic contrast - Used for highlighting or emphasizing certain parts of the page you want to call attention to http://www.creativepro.com/article/dot-font-seven-principles-of-typographic-contrast
page 137
- CSS Juice - For a list of sites with free icons and bullets http://www.cssjuice.com/38-free-icon-checkpoints/
page 140
- Clagnut - Font-sizing strategies http://clagnut.com/blog/348/
Chapter 7: Margins, Paddings, and Borders
page 167
- IE 5 width - Box-problem http://reference.sitepoint.com/css/ie5boxmodel
page 178
Vertically-centered elements - Tricks for web page design
- www.student.oulu.fi/~laurirai/www/css/middle/
- www.search-this.com/2008/05/15/easy-verticalcentering-with-css/
Chapter 8: Adding Graphics to Web Pages
page 188
- Background images - Designs and examples http://www.csszengarden.com/
page 190
- JavaScript-based background techniques http://24ways.org/2007/supersleight-transparent-png-in-ie6
page 201
Finding Free Imagery
- Morgue File http://www.morguefile.com/
- Stock.xchng www.sxc.hu
- Open Photo http://openphoto.net/gallery/browse.html
- Creative Commons http://search.creativecommons.org/
- Flickr https://www.flickr.com/creativecommons
- Picasa Web Albums http://picasaweb.google.com
- Bullet Madness www.stylegala.com/features/bulletmadness
- Some Random Dude http://www.somerandomdude.com/work/sanscons/
- ColourLovers.com http://www.colourlovers.com/patterns
- Pattern4U http://www.kollermedia.at/pattern4u/
- Squidfingers http://squidfingers.com/patterns
- BgPatterns http://bgpatterns.com/
- Stripe Generator 2.0 http://bgpatterns.com/
- PatternCooler http://www.patterncooler.com/
page 212
- Clagnut.com - Richard Rutter technique http://www.clagnut.com/
- Drop shadow shift - Negative margins technique http://1976design.com/blog/archive/2003/11/14/shadows
- A List Apart http://www.alistapart.com/articles/cssdrop2
- Ploughdeep.com http://www.alistapart.com/articles/cssdrop2
page 222
Rounded corners
- VertexWerks http://www.vertexwerks.com/tests/sidebox/
- Sperling.com http://sperling.com/examples/box/
Chapter 9: Sprucing Up Your Site's Navigation
page 242
Pop-up Menus
- Son of Suckerfish - CSS-only approach http://www.htmldog.com/articles/suckerfish/dropdowns/
- Tanfa.co.uk - Multi-level, drop-down menu www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
- Vertical menus with pop-out submenus www.tanfa.co.uk/css/examples/menu/tutorial-v.asp
- Pure CSS Menu generator - Produces menus for you with HTML and CSS http://purecssmenu.com/
- jQuery Simple Drop Down Menu plugin - Simple JavaScript menu
- Superfish - A more powerful JavaScript menu http://users.tpg.com.au/j_birch/plugins/superfish/
page 246
- CreativePro.com - Tutorial on making links unforgettable http://www.creativepro.com/article/view-source-make-your-links-unforgettable
- Wellstyled.com - The Pixy method http://wellstyled.com/css-nopreload-rollovers.html
- Mezzoblue - CSS Sprites method http://www.mezzoblue.com/archives/2009/01/27/sprite_optim/
page 248
- Flickr - Example of multiple images displaying desired button http://www.flickr.com/photos/mezzoblue/3217540317
- Veerle's Blog - Method using single graphic to manage multiple buttons http://veerle.duoh.com/comments/the_xhtml_css_template_phase_of_my_new_blog_part_2
page 249
Free tab designs
- www.exploding-boy.com/2005/12/15/free-css-navigation-design
- www.explodingboy.com/2005/12/21/more-free-css-navigation-menu-designs
Chapter 10: Formatting Tables and Forms
page 274
- Mozilla Developer Network - Article on block property https://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
page 278
- CreativePro.com - Article on striping tables using JavaScript http://www.creativepro.com/article/view-source-javascript-designers
page 280
- Matt Heerema - Founded method to prevent Internet Explorer from adding a background above a fieldset’s top borderline http://mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie
page 282
- 456 Berea St. - Article on styling when applying CSS to form controls http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
- CSS Cookbook - Chapter download for more styling tips and examples http://cdn.oreilly.com/books/9780596527419/appd.pdf
page 283
- HTML Dog - Overview on the
page 284
- Smashing Magazine - CSS based form designs http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
Chapter 11: Introducing CSS Layout
page 300
Fixed-width design examples
- Google maps - Liquid layout example https://www.google.com/maps
page 305
- Yahoo Stencil Kit - Free download that can be used in certain graphics programs http://real.developer.yahoo.com/ypatterns/about/stencils/
Chapter 12: Building Float-Based Layouts
page 316
- The Layout Gala - 40 different layout designs that work in most browsers http://blog.html.it/layoutgala/
- Jacob Meyers - Offers 224 layout to choose from http://blog.html.it/layoutgala/
- Grid System Generator - Allows you to decide number of columns and width http://www.gridsystemgenerator.com/
- Layout generators - Like Grid System Generator with layouts http://www.pagecolumn.com/
page 318
- Holy Grail - Positioning elements on liquid layouts http://alistapart.com/article/holygrail
page 320
- Doxdesk.com - JavaScript technique that dynamically changes the dimensions of web page elements based on the size of the browser window http://www.doxdesk.com/software/js/minmax.html
page 324
- Complex Spiral Consulting - Explanation on why floated elements can break out of their blocks http://www.complexspiral.com/publications/containing-floats/
page 330
- Communitymx - Using percentages to define width of columns http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58
page 336
- The IE6 Three Pixel Text-Jog http://www.positioniseverything.net/explorer/threepxtest.html
page 337
- IE7 CSS bugs http://css-discuss.incutio.com/?page=IE7
- Guillotine bug http://www.positioniseverything.net/explorer/guillotine.html
- Peek-a-boo bug http://www.positioniseverything.net/explorer/peekaboo.html
page 338
- Overcoming IE bugs with layout - In-depth discussion http://www.satzansatz.de/cssd/onhavinglayout.html
- Microsoft introduction to using layout for overcoming IE bugs http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx
Chapter 13: Positioning Elements on a Web Page
page 367
- psaCake - CSS tooltips on adding pop-up tooltips http://psacake.com/web/jl.asp
- jQuery Tooltip plug-in - Pop-up tooltips with JavaScript http://bassistance.de/jquery-plugins/jquery-plugin-tooltip
page 375
- Footer coverup JavaScript solution http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute
Chapter 14: CSS for the Printed Page
page 403
- Workaround to get browser to print background http://web-graphics.com/mtarchive/001703.php
page 404
- Printing full URLs of root-relative links http://alistapart.com/article/goingtoprint
Chapter 15: Improving Your CSS Habits
page 418
- Tips on naming styles http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
page 420
- Method of naming comments to be easily searched http://stopdesign.com/archive/2005/05/03/css-tip-flags.html
page 422
- Suggestions on organizing styles and stylesheets http://www.contentwithstyle.co.uk/content/modular-css
page 423
- Automated PHP technique for updating tags http://ikeif.net/2009/03/27/stop-cachingfiles-php-function
page 424
- The Web Developer's Toolbar - Firefox extension http://chrispederick.com/work/web-developer/
- Mozilla Firefox - Download https://www.mozilla.org/en-US/firefox/
- IE Developer Toolbar - For Internet Explorer http://www.microsoft.com/
page 427
- Undo styles - Undoes the standard web browser formatting of HTML http://tantek.com/log/2004/undohtml.css
page 432
- CSS Discuss - List of CSS bugs http://css-discuss.incutio.com/?page=BrowserBugs
page 433
Ways IE can mess up your designed page
- http://www.positioniseverything.net/explorer.html
- http://www.positioniseverything.net/ie-primer.html
page 435
- Information on IE's conditional comments http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Chapter 16: CSS3: CSS on the Edge
page 438
Up-to-date info on CSS
- The World Wide Web Consortium http://www.w3.org/Style/CSS/
- CSS3.info http://www.css3.info/
page 439
- CSS3 Selectors Test - Allows your to test selectors on a variety of browsers to see which ones work and which don't http://www.css3.info/selectors-test/
page 442
- W3C.org - Complete list of CSS selectors http://www.w3.org/TR/css3-selectors/
page 446
- Hex-to-RGB Conversion - Tips on converting hex colors to RGB http://www.javascripter.net/faq/hextorgb.htm
page 449
- Rounded corners - The border-radius property http://www.css3.info/preview/rounded-border/
page 450
- Windows-only font conversion tool http://msdn.microsoft.com/en-us/library/ms533034.aspx
- @font-face rule - How to make it work in browsers http://v1.jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
- GitHub - Info on using JavaScript only approach to getting desired fonts https://github.com/sorccu/cufon/wiki/about
- Webfonts.info - Free samples of fonts for @font-face embedding http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding
page 452
- How to find font names www.ehow.com/how_2148826_access-fonts-control-panel.html
page 453
- Multi-column layout - Examples and info http://www.css3.info/preview/multi-column-layout/
- CSS3 grid positioning module - Set of CSS properties for layout http://www.w3.org/TR/css3-grid/
- CSS3 template layout module - Properties that allow you to use letters to define basic structure of web pages http://www.w3.org/TR/css3-layout/
Appendix A: CSS Property Reference
page 459
- Details on CSS properties http://www.w3.org/TR/CSS21/
page 460
- Web color keyword in CSS 3 info http://www.w3.org/TR/css3-color/
page 484
Generated content info
- http://www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html
- http://www.w3.org/TR/CSS21/generate.html
- Quirksmode.org - Info on why not all browsers recognize URL cursor values http://quirksmode.org/css/user-interface/cursor.html
Appendix C: CSS Resources
page 517
World Wide Web Consortium (W3C)
- CSS 2.1 Specification www.w3c.org/TR/CSS21
- CSS 3 Current Work www.w3.org/Style/CSS/current-work
page 518
Books and PDFs
- CSS Cheat Sheet www.addedbytes.com/cheat-sheets/css-cheat-sheet
- SitePoint CSS Reference http://reference.sitepoint.com/css
- WesternCiv’s Complete CSS Guide www.westciv.com/style_master/academy/css_tutorial/index.html
- CSS3.Info www.css3.info
- Mozilla’s CSS Center https://developer.mozilla.org/En/CSS
- CSS-Discuss http://css-discuss.org
- CSS-Discuss wiki http://css-discuss.incutio.com/wiki/Main_Page
- CSSCreator Forum www.csscreator.com/css-forum
page 519
- SitePoint.com’s CSS Forum www.sitepoint.com/forums/forumdisplay.php?f=53
- CSS-Tricks.com Forum http://css-tricks.com/forums
- CSS-Tricks.com http://css-tricks.com
- Sitepoint www.sitepoint.com/subcat/css
- Smashing Magazine www.smashingmagazine.com/category/css
- Listutorial http://css.maxdesign.com.au/listutorial
- 30 Excellent CSS Based Navigation and Buttons Tutorial www.instantshift.com/2009/01/11/30-excellent-css-based-navigation-and-buttons-tutorial
- Create Apple’s Navigation Bar with CSS http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
page 520
- CSS Vertical Navigation Bar with Teaser www.sohtanaka.com/web-design/cssvertical-navigation-with-teaser
- CSS Navigation Bar Code Generator http://lab.mattvarone.com/navbar
- CSS Menus http://13styles.com/category/css-menus
- CSS Showcase www.alvit.de/css-showcase
- Listamatic http://css.maxdesign.com.au/listamatic
- Listamatic2 http://css.maxdesign.com.au/listamatic2
- CSS Play Menu Showcase www.cssplay.co.uk/menus/index.html
- CSS Slideshow www.cssplay.co.uk/menu/slide_show.html
- Sliding PhotoGalleries www.cssplay.co.uk/menu/gallery3l.html
- CSS Image Maps www.frankmanno.com/ideas/css-imagemap
- CSS Photo Caption Zoom http://randsco.com/_miscPgs/cssZoomPZ3.html
- Revised Image Replacement www.mezzoblue.com/tests/revised-image-replacement
page 521
Box Model Information
- Interactive CSS Box Model www.redmelon.net/tstme/box_model
- On Having Layout www.satzansatz.de/cssd/onhavinglayout.html
- Perfect Multi-Column CSS Liquid Layouts http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
- In search of the one true layout www.positioniseverything.net/articles/onetruelayout
- CSS-Discuss Wiki page on float-based layouts http://css-discuss.incutio.com/?page=FloatLayouts
- CSS-Discuss Wiki on Absolute Layouts http://css-discuss.incutio.com/?page=AbsoluteLayouts
- Learn CSS Positioning in Ten Steps www.barelyfitz.com/screencast/htmltraining/css/positioning
- Making the Absolute, Relative http://stopdesign.com/archive/2003/09/03/absolute.html
- CSS Layout Generator www.pagecolumn.com
- Even More Layout Generators www.webdesignbooth.com/15-extremely-usefulcss-grid-layout-generator-for-web-designers
- 960 Grid System http://960.gs
- 960 Grid System video http://nettuts.com/videos/screencasts/adetailed-look-at-the-960-css-framework/
page 522
- YUI Grids CSS https://developer.yahoo.com/yui/grids
- Blueprint www.blueprintcss.org
- Intensivstation Templates http://intensivstation.ch/en/templates
- Adaptive CSS Layouts www.smashingmagazine.com/2009/06/09/smart-fixesfor-fluid-layouts
- One clean HTML markup, many layouts http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
- Variable fixed width layout www.clagnut.com/blog/1663
- 3-Column Layout Index http://css-discuss.incutio.com/?page=ThreeColumnLayout
- How to Attack an Internet Explorer (Win) Display Bug www.communitymx.com/content/article.cfm?page=1&cid=C37E0
- RichInStyle’s guide to IE 5/5.5 Bugs www.richinstyle.com/bugs/ie5.html
- Explorer Exposed! www.positioniseverything.net/explorer.html
page 523
Showcase Sites
- CSS ZenGarden www.csszengarden.com
- CSS Beauty www.cssbeauty.com
- CSS Elite www.csselite.com
- CSS Mania http://cssmania.com
- Showcase of Showcases http://css-discuss.incutio.com/?page=ShowCase
page 524
CSS Software
- CSS-Discuss list of CSS Editors http://css-discuss.incutio.com/?page= CssEditors For Windows and Mac
- Style Master www.westciv.com/style_master/product_info
- Dreamweaver www.adobe.com/dreamweaver
- Top Style www.newsgator.com/NGOLProduct.aspx?ProdID=TopStyle
- Microsoft Expression Web www.microsoft.com/expression/products/Web_Overview.aspx
- CSSEdit www.macrabbit.com/cssedit
