#138 Cookbook
Book notes - CSS Cookbook, 3rd Edition by Christopher Schmitt, published by O’Reilly
Notes
Table of Contents - Highlights
1. Using HTML Basics
- Picking a Text Editor
- Coding a Basic HTML Page
- Understanding DOCTYPEs and Effects on Browser Layout
- Marking Up Headers
- Making Appropriate Quotations
- Adding an Image
- Adding Audio with HTML5
- Incorporating Video with HTML5
- Using strong and em Effectively
- Creating Lists
- Making a Link to a Web Page
- Coding Tables
- Creating an HTML vCard (hCard)
- Marking Up an Event (hCalendar)
- Validating HTML
2. CSS Basics
- Applying CSS Rules to a Web Page
- Using Basic Selectors to Apply Styles
- Applying Child Selectors
- Applying Adjacent Selectors
- Applying Attribute Selectors
- Using Pseudo-Classes
- Using Pseudo-Elements
- Determining When to Use Class and ID Selectors
- Understanding CSS Properties
- Understanding the Box Model
- Associating Styles to a Web Page
- Understanding the Origin
- Understanding the Sort Order Within CSS
- Using !important to Override Certain CSS Rules
- Clarifying Specificity
- Setting Up Different Types of Stylesheets
- Adding Comments Within Stylesheets
- Organizing the Contents of a Stylesheet
- Working with Shorthand Properties
- Setting Up an Alternate Stylesheet
- Using Floats
- Using Self-Clearing Floated Elements
- Using Absolute Positioning
- Using Relative Positioning
- Using Shackling Positioning
- Stacking Elements with z-index
- Validating CSS Rules
3. Web Typography
- Specifying Fonts
- Using Web-Safe Fonts
- Setting an Ampersand Flourish
- Embedding Font Files
- Forcing a Break on Really Long Words
- Specifying Font Measurements and Sizes
- Gaining More Cross-Browser Consistency with Font Sizes
- Setting Hyphens, Em Dashes, and En Dashes
- Centering Text
- Setting Text to Be Justified
- Indicating an Overflow of Text with an Ellipsis
- Removing Space Between Headings and Paragraphs
- Setting a Simple Initial Cap
- Setting a Larger, Centered Initial Cap
- Setting an Initial Cap with Decoration (Imagery)
- Creating a Heading with Stylized Text
- Creating a Heading with Stylized Text and Borders
- Stylizing a Heading with Text and an Image
- Creating a Pull Quote with HTML Text
- Placing a Pull Quote to the Side of a Column
- Creating a Pull Quote with Borders
- Creating a Pull Quote with Images
- Setting the Indent in the First Line of a Paragraph
- Setting the Indent of Entire Paragraphs
- Creating a Hanging Indent
- Styling the First Line of a Paragraph
- Styling the First Line of a Paragraph with an Image
- Creating a Highlighted Text Effect
- Changing the Text Selection Color
- Changing Line Spacing
- Adding a Graphic Treatment to HTML Text
- Placing a Shadow Behind Text
- Adjusting the Space Between Letters and Words
- Applying Baseline Rhythm on Web Typography
- Styling Superscripts and Subscripts Without Messing the Text Baseline
- Setting Up Multiple Columns of Text
4. Images
- Transforming Color Images to Black and White in IE with CSS
- Setting a Border Around an Image
- Setting a Rounded Border Around an Image
- Removing Borders Set on Images by Default in Some Browsers
- Setting a Background Image
- Creating a Line of Background Images
- Positioning a Background Image
- Using Multiple Background Images on One HTML Element
- Setting Images on a Border
- Creating a Stationary Background Image
- Stretching Images As the Browser Resizes
- Stretching an Image Across the Entire Browser Window
- Making Images Scalable
- Setting How a Browser Renders an Image
- Rotating Images with CSS
- Setting Gradients with CSS
- Creating Transparent PNG Images for IE6 and Later
- Using Transparent PNG Images with JavaScript
- Overlaying HTML Text on an Image
- Replacing HTML Text with an Image
- Building a Panoramic Image Presentation
- Combining Different Image Formats
- Rounding Corners with Fixed-Width Columns
- Rounding Corners (Sliding Doors Technique)
- Rounding Corners (Mountaintop Technique)
- Rounding Corners with JavaScript
- Setting a Shadow on an Element with CSS
- Placing a Drop Shadow Behind an Image
- Placing a Smooth Drop Shadow Behind an Image
- Making Word Balloons
- Hindering People from Stealing Your Images
- Inserting Reflections on Images Automatically
- Using Image Sprites
- Clipping Background Images
- Applying Masks to Images and Borders
5. Page Elements
- Eliminating Page Margins
- Resetting Browser-Style Defaults for Elements
- Coloring the Scroll Bar in IE
- Techniques for Centering Elements on a Web Page
- Placing a Page Border
- Placing a Border Around the Browser’s Viewport
- Customizing a Horizontal Rule
- Adding a Lightbox
- Changing the Opacity on Elements
- Adjusting the Opacity of Background Colors
6. Lists
- Changing the Format of a List
- Changing the Color of a List Bullet
- Writing Cross-Browser Indentation in Lists
- Placing Dividers Between List Items
- Creating Custom Text Markers for Lists
- Creating Custom Image Markers for Lists
- Inserting Larger Custom Image Markers for Lists
- Making a List Presentation Rich with Imagery
- Creating Inline Lists
- Making Hanging Indents in a List
- Moving the Marker Inside the List
- Styling a Definition List
- Styling a Screenplay with the HTML5 dialog Element
- Turning a List into a Directory Tree
- Creating a Star Ranking System
7. Links and Navigation
- Easily Generating Text-Based Menus and Submenus
- Removing Underlines from Links (and Adding Other Styles)
- Changing Link Colors
- Removing Dotted Lines When Clicking on a Link in Internet Explorer
- Changing Link Colors in Different Sections of a Page
- Placing Icons at the End of Different Kinds of Links
- Changing Cursors
- Creating Rollovers Without JavaScript
- Animating Rollovers on Links with CSS3 Transitions
- Creating Text Navigation Menus and Rollovers
- Adding Submenus to Vertical Menus
- Building Horizontal Navigation Menus
- Building Horizontal Navigation Menus with Drop-Down Menus
- Building a Navigation Menu with Access Keys
- Creating Breadcrumb Navigation
- Creating Image-Based Rollovers
- Creating Collapsible Menus
- Creating Contextual Menus
- Making Tool Tips with the title Attribute
- Designing a Dynamic Tabbed Menu
- Changing Styles on Anchored Links
8. Forms
- Modifying the Spacing Around a Form
- Removing the Space Around a Form
- Setting Styles for Input Elements
- Changing Styles on Form Elements When a User Clicks on Them
- Applying Different Styles to Different Input Elements in the Same Form
- Setting Styles for textarea Elements
- Setting Styles for select and option Elements
- Creating a Macintosh-Styled Search Field
- Styling Form Buttons
- Creating an Image Submit Button
- Setting Up a Submit-Once-Only Button
- Creating a Submit Button That Looks Like HTML Text
- Making an HTML Text Link Operate Like a Submit Button
- Designing a Web Form Without Tables
- Designing a Two-Column Form Without Tables
- Integrating Form Feedback with a Form
- Styling Access Keys in Web Forms
- Grouping Common Form Elements
- Entering Data into a Form That Is Similar to a Spreadsheet
- Sample Design: A Login Form
- Sample Design: A Registration Form
9. Tables
- Setting the Borders and Cell Padding for Tables
- Setting the Cell Spacing
- Setting the Style for Captions
- Setting the Styles Within Table Cells
- Setting the Styles for Table Header Elements
- Removing Gaps from Images Placed in Table Cells
- Eliminating Gaps Between Table Cells
- Creating Alternating Background Colors in Table Rows
- Adding a Highlighting Effect on a Table Row
- Sample Design: An Elegant Calendar
10. Designing Web Pages for Printing
- Applying a Stylesheet for Printing to a Web Page
- Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages
- Making a Web Form Print-Ready
- Displaying URIs After Links
- Inserting Special Characters Before Links
- Setting Page Breaks for a Printed Document
- Sample Design: A Printer-Friendly Page with CSS
11. Page Layouts
- Building a One-Column Layout
- Building a Two-Column Layout
- Building a Two-Column Layout with Fixed-Width Columns
- Creating a Flexible Multicolumn Layout with Floats
- Creating a Fixed-Width Multicolumn Layout with Floats
- Creating a Flexible Multicolumn Layout with Positioning
- Creating a Fixed-Width Multicolumn Layout with Positioning
- Using Floats to Display Columns in Any Order
- Designing an Asymmetric Layout
- Designing Resolution-Independent Layouts
12. Hacks, Workarounds, and Troubleshooting
- Overriding Inline Styles
- Diagnosing CSS Bugs and Browser Issues
- Using Bookmarklets to Troubleshoot CSS
- Using Browser Extensions to Troubleshoot CSS
- Patching Up Internet Explorer 6
- Patching Up Internet Explorer 6 with JavaScript
- Using Conditional Comments to Deliver Styles to Different Versions of Internet Explorer
- Using CSS Filters to Deliver CSS Rules to Almost Any Browser
- Setting Up an Intelligent CSS Delivery System for Modern Browsers
- Testing a Site Design on More Than One Platform with Only One Computer
- Testing a Website with a Text Browser
13. Designing with CSS
- Enlarging Text Excessively
- Creating Unexpected Incongruity
- Combining Unlike Elements to Create Contrast
- Leading the Eye with Contrast
- Checking for Enough Color Contrast
- Emphasizing a Quotation with Smart Quotes
- Setting a Moving Background Scene When a User Resizes the Window
- Adding Animation to Elements on a Page
- Creating a Fireworks Display As a User Scrolls
- Customizing the View Source Stylesheet for Firefox
- Designing with Grids (CSS Frameworks)
- Sample Design: A Cohesive Web Design
- Sample Design: The U.S. Flag
14. Interacting with JavaScript
- Determining Whether JavaScript Is Available Within a Browser
- Applying a Different Stylesheet Based on the Time of Day
- Redirecting to a Mobile Site Based on the Browser’s Screen Width
- Adding a JavaScript Framework to a Web Page
- Using CSS3 Selectors in IE6 and IE7
- Zebra-Striping an HTML Table with JavaScript
- Highlighting a Table Row with Mouseovers
- Adding Effects to Simple Image Rollovers
- Making a Row of Elements with a Variable Amount of Content the Same Height
- Setting a Link to Open a New Window
- Making an Entire div Element Clickable
- Supporting Transparent PNGs in IE6 with JavaScript
- Delivering HTML5 and CSS3 to Browsers That Can Handle Them
Appendices
- A. Resources
- B. CSS 2.1 Properties and Proprietary Extensions
- C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
- D. CSS3 Selectors and Pseudo-Classes
- E. Styling of Form Elements
Getting the Example Source
mkdir example_source
git clone https://resources.oreilly.com/examples/9780596155940.git example_source/3rd_edition
git clone https://resources.oreilly.com/examples/9780596527419.git example_source/2nd_edition
git clone https://resources.oreilly.com/examples/9780596005764.git example_source/1st_edition