CSS3: The Missing Manual, 3rd Edition

CSS3: The Missing Manual, 3rd Edition

by David Sawyer McFarland
Released December 2012
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449325947

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon
Start your free trial

Book description

CSS3 lets you create professional-looking websites, but learning its finer points can be tricky—even for seasoned web developers. This Missing Manual shows you how to take your HTML and CSS skills to the next level, with valuable tips, tricks, and step-by-step instructions. You’ll quickly learn how to build web pages that look great and run fast on devices and screens of all sizes.

The important stuff you need to know:

  • Start with the basics. Write CSS3-friendly HTML, including the HTML5 tags recognized by today’s browsers.
  • Apply real-world design. Format text, create navigation tools, and enhance pages with graphics.
  • Make your pages lively. Create eye-catching animations and give your visitors attractive tables and forms.
  • Take control of page layouts. Use professional design techniques such as floats and positioning.
  • Look great on any device. Craft websites that adapt to desktop, tablet, and mobile browsers.
  • Get advanced techniques. Use CSS3 more effectively and efficiently, and ensure that your web pages look good when printed.

Publisher resources

View/Submit Errata

Table of contents

  1. CSS3: The Missing Manual
  2. A Note Regarding Supplemental Files
  3. The Missing Credits
    1. About the Author
    2. About the Creative Team
    3. Acknowledgements
    4. The Missing Manual Series
  4. Introduction
    1. How CSS Works
    2. The Benefits of CSS
    3. What You Need to Know
    4. HTML: The Barebones Structure
    5. Document Types
    6. How HTML Tags Work
    7. XHTML, Too
    8. HTML5: The Wheel Turns Again
    9. Software for CSS
      1. Free Programs
      2. Commercial Software
    10. About This Book
      1. About the Outline
    11. The Very Basics
      1. About→These→Arrows
    12. About the Online Resources
      1. Living Examples
      2. About MissingManuals.com
      3. Errata
    13. Safari® Books Online
  5. 1. CSS Basics
    1. 1. HTML for CSS
      1. HTML: Past and Present
        1. HTML Past: Whatever Looked Good
        2. HTML Present: Scaffolding for CSS
      2. Writing HTML for CSS
        1. Think Structure
        2. Two HTML Tags to Keep in Mind
          1. Understanding the <Div> and <Span> Tags
          2. Additional Tags in HTML5
        3. Keep Your Layout in Mind
        4. HTML to Forget
        5. Tips to Guide Your Way
      3. The Importance of the Doctype
      4. Making Sure Internet Explorer Is Up-to-Date
    2. 2. Creating Styles and Style Sheets
      1. Anatomy of a Style
      2. Understanding Style Sheets
        1. Internal or External—How to Choose
      3. Internal Style Sheets
      4. External Style Sheets
        1. Linking a Style Sheet by Using HTML
        2. Linking a Style Sheet by Using CSS
      5. Tutorial: Creating Your First Styles
        1. Creating an Inline Style
        2. Creating an Internal Style Sheet
        3. Creating an External Style Sheet
    3. 3. Selectors: Identifying What to Style
      1. Tag Selectors: Page-Wide Styling
      2. Class Selectors: Pinpoint Control
      3. ID Selectors: Specific Page Elements
      4. Styling Groups of Tags
        1. Constructing Group Selectors
        2. The Universal Selector (Asterisk)
      5. Styling Tags Within Tags
        1. The HTML Family Tree
        2. Building Descendent Selectors
        3. Creating Modules
      6. Pseudo-Classes and Pseudo-Elements
        1. Styles for Links
        2. Styling Paragraph Parts
        3. More Pseudo-Classes and Pseudo-Elements
          1. :Focus
          2. :Before
          3. :After
          4. ::Selection
      7. Attribute Selectors
      8. Child Selectors
        1. :First-Child
          1. :First-Child
          2. :Last-Child
          3. Nth-Child
        2. Child Type Selectors
          1. :First-of-Type
          2. :Last-of-Type
          3. :Nth-of-Type
      9. Siblings
      10. The :not( ) Selector
      11. Tutorial: Selector Sampler
        1. Creating a Group Selector
        2. Creating and Applying a Class Selector
        3. Creating a Descendent Selector
        4. Creating and Applying an ID Selector
        5. Finishing Touches
    4. 4. Saving Time with Style Inheritance
      1. What Is Inheritance?
      2. How Inheritance Streamlines Style Sheets
      3. The Limits of Inheritance
      4. Tutorial: Inheritance
        1. A Basic Example: One Level of Inheritance
        2. Using Inheritance to Restyle an Entire Page
        3. Inheritance Inaction
    5. 5. Managing Multiple Styles: The Cascade
      1. How Styles Cascade
        1. Inherited Styles Accumulate
        2. Nearest Ancestor Wins
        3. The Directly Applied Style Wins
        4. One Tag, Many Styles
      2. Specificity: Which Style Wins
        1. The Tiebreaker: Last Style Wins
      3. Controlling the Cascade
        1. Changing the Specificity
        2. Selective Overriding
        3. Avoiding Specificity Wars
        4. Starting with a Clean Slate
      4. Tutorial: The Cascade in Action
        1. Resetting CSS and Styling from Scratch
        2. Creating a Hybrid Style
        3. Overcoming Conflicts
  6. 2. Applied CSS
    1. 6. Formatting Text
      1. Using Fonts
        1. Choosing a Common Font
          1. Serif Fonts
          2. Sans-Serif Fonts
          3. Monospaced and Fun Fonts
          4. Additional Fonts to Consider
      2. Using Web Fonts
        1. Font File Types
        2. Legal Issues with Web Fonts
        3. Finding Web Fonts
        4. Generating Multiple Font Formats
        5. Using the @font-face Directive
        6. Creating Styles Using Web Fonts
        7. Dealing with Bold and Italic Variants
          1. The Easy Way to add Bold and Italic
          2. Adding Bold and Italic and Supporting Internet Explorer 8
      3. Discovering Google Web Fonts
        1. Finding and Selecting Fonts
        2. Using Google Fonts
      4. Adding Color to Text
        1. Hexadecimal Color Notation
          1. RGB
          2. RGBA
          3. HSL and HSLA
      5. Changing Font Size
        1. Using Pixels
        2. Using Keywords, Percentages, and Ems
          1. Keywords
          2. Percentages
          3. Ems
      6. Formatting Words and Letters
        1. Italicizing and Bolding
        2. Capitalizing
          1. Small Caps
        3. Decorating
        4. Letter and Word Spacing
      7. Adding Text Shadow
      8. Formatting Entire Paragraphs
        1. Adjusting the Space Between Lines
          1. Line Spacing by pixel, em, or percentage
          2. Line Spacing by Number
        2. Aligning Text
        3. Indenting the First Line and Removing Margins
          1. First-Line Indents
          2. Controlling Margins between Paragraphs
        4. Formatting the First Letter or First Line of a Paragraph
      9. Styling Lists
        1. Types of Lists
        2. Positioning Bullets and Numbers
        3. Graphic Bullets
      10. Tutorial: Text Formatting in Action
        1. Setting Up the Page
        2. Formatting the Headings and Paragraphs
        3. Formatting Lists
        4. Fine-Tuning with Classes
        5. Adding the Finishing Touches
    2. 7. Margins, Padding, and Borders
      1. Understanding the Box Model
      2. Controlling Space with Margins and Padding
        1. Margin and Padding Shorthand
        2. Colliding Margins
        3. Removing Space with Negative Margins
        4. Inline, Block, and Other Display Settings
      3. Adding Borders
        1. Border Property Shorthand
        2. Formatting Individual Borders
      4. Coloring the Background
      5. Creating Rounded Corners
      6. Adding Drop Shadows
      7. Determining Height and Width
        1. Calculating a Box’s Actual Width and Height
        2. Redefining Box Width with Box-Sizing
        3. Controlling the Tap with the Overflow Property
        4. Maximum and Minimum Heights and Widths
      8. Wrapping Content with Floating Elements
        1. Backgrounds, Borders, and Floats
        2. Stopping the Float
      9. Tutorial: Margins, Backgrounds, and Borders
        1. Controlling Page Margins and Backgrounds
        2. Adjusting the Space Around Tags
        3. Building a Sidebar
        4. Going Further
    3. 8. Adding Graphics to Web Pages
      1. Discovering CSS and the <img> Tag
      2. Adding Background Images
      3. Controlling Repetition
      4. Positioning a Background Image
        1. Keywords
        2. Precise Values
        3. Percentage Values
        4. Fixing an Image in Place
        5. Defining the Origin and Clipping for a Background
        6. Scaling Background Images
      5. Using Background Property Shorthand
      6. Using Multiple Background Images
      7. Utilizing Gradient Backgrounds
        1. Linear Gradients
          1. Color Stops
          2. Vendor Prefixes and Internet Explorer support
        2. Repeating Linear Gradients
        3. Radial Gradients
        4. Repeating radial gradients
      8. Applying Easy Gradients with Colorzilla
      9. Tutorial: Enhancing Images
        1. Framing an Image
      10. Tutorial: Creating a Photo Gallery
        1. Adding Drop Shadows
      11. Tutorial: Using Background Images
        1. Adding an Image to the Page Background
        2. Replacing Borders with Graphics
        3. Using Graphics for Bulleted Lists
        4. Giving the Sidebar Personality
        5. Getting the Scroll to Appear in IE 8
    4. 9. Sprucing Up Your Site’s Navigation
      1. Selecting Which Links to Style
        1. Understanding Link States
        2. Targeting Particular Links
        3. Grouping links with descendent selectors
      2. Styling Links
        1. Underlining Links
        2. Creating a Button
        3. Using Graphics
      3. Building Navigation Bars
        1. Using Unordered Lists
        2. Vertical Navigation Bars
        3. Horizontal Navigation Bars
          1. Using Display: Inline and Display: Inline-Block
          2. Using Floats for Horizontal Navigation
      4. CSS-Style Preloading Rollovers
      5. Styling Particular Types of Links
        1. Links to Other Websites
        2. Email Links
        3. Links to Specific Types of Files
      6. Tutorial: Styling Links
        1. Basic Link Formatting
        2. Adding a Background Image to a Link
        3. Highlighting Different Links
      7. Tutorial: Creating a Navigation Bar
        1. Adding Rollovers and Creating “You Are Here” Links
        2. From Vertical to Horizontal
    5. 10. CSS Transforms, Transitions, and Animations
      1. Transforms
        1. Rotate
        2. Scale
        3. Translate
        4. Skew
        5. Multiple Transformations
        6. Origin
      2. Transitions
        1. Adding a Transition
        2. Transition Timing
        3. Delaying a Transition’s Start
        4. Transition Shorthand
      3. Animations
        1. Defining Keyframes
        2. Applying an Animation
        3. Timing the Animation
        4. Finishing the Animation
        5. Animation Shorthand
        6. Pausing an Animation
        7. Animating on Hover
      4. Tutorial
        1. Adding an Animation
    6. 11. Formatting Tables and Forms
      1. Using Tables the Right Way
      2. Styling Tables
        1. Adding Padding
        2. Adjusting Vertical and Horizontal Alignment
        3. Creating Borders
        4. Styling Rows and Columns
      3. Styling Forms
        1. HTML Form Elements
        2. Laying Out Forms Using CSS
      4. Tutorial: Styling a Table
      5. Tutorial: Styling a Form
  7. 3. CSS Page Layout
    1. 12. Introducing CSS Layout
      1. Types of Web Page Layouts
      2. How CSS Layout Works
        1. The <div> Tag
        2. HTML5 Sectioning Elements
        3. Techniques for CSS Layout
      3. Layout Strategies
        1. Start with Your Content
        2. Mobile First
        3. Start with a Sketch
        4. Identify the Boxes
        5. Go with the Flow
        6. Remember Background Images
        7. Pieces of a Puzzle
        8. Layering Elements
        9. Don’t Forget Margins and Padding
    2. 13. Building Float-Based Layouts
      1. Applying Floats to Your Layouts
        1. Floating All Columns
        2. Floats Within Floats
      2. Overcoming Float Problems
        1. Clearing and Containing Floats
        2. Creating Full-Height Columns
        3. Preventing Float Drops
        4. Preventing Float Drops With Box-Sizing
      3. Tutorial: Multiple-Column Layouts
        1. Structuring the HTML
        2. Creating the Layout Styles
        3. Adding Another Column
        4. Adding Some Breathing Room
        5. Fixing the Width
        6. Mixing Liquid and Fixed Design
    3. 14. Responsive Web Design
      1. Responsive Web Design Basics
      2. Setting Up a Web Page for RWD
      3. Media Queries
        1. Strategies for Using Media Queries
        2. Creating Breakpoints
        3. Desktop First or Mobile First?
        4. Creating Media Queries
        5. Including Queries Inside a Stylesheet
        6. A Basic Stylesheet Structure
        7. Mobile First
      4. Flexible Grids
        1. The Importance of HTML Source Order
        2. Reset the Box Model
        3. Converting Fixed Width to Flexible Grids
      5. Fluid Images
        1. The Downsides of Fluid Images
        2. Videos and Flash
      6. Responsive Web Design Tutorial
        1. Changing the HTML Source Order
        2. Fluid Images
        3. Adding Styles for Tablet Screens
        4. Adding Phone Styles
    4. 15. Positioning Elements on a Web Page
      1. How Positioning Properties Work
        1. Setting Positioning Values
        2. When Absolute Positioning Is Relative
        3. When (and Where) to Use Relative Positioning
        4. Stacking Elements
        5. Hiding Parts of a Page
      2. Powerful Positioning Strategies
        1. Positioning Within an Element
        2. Breaking an Element Out of the Box
        3. Creating CSS-Style Frames Using Fixed Positioning
      3. Tutorial: Positioning Page Elements
        1. Enhancing a Page Banner
        2. Placing Captions on the Photos
  8. 4. Advanced CSS
    1. 16. CSS for the Printed Page
      1. How Media Style Sheets Work
      2. How to Add Media Style Sheets
        1. Specifying the Media Type for an External Style Sheet
        2. Specifying the Media Type Within a Style Sheet
      3. Creating Print Style Sheets
        1. Using !important to Override Onscreen Styling
        2. Reworking Text Styles
        3. Styling Backgrounds for Print
          1. Removing Background Elements
          2. Leaving Background Elements in
        4. Hiding Unwanted Page Areas
        5. Adding Page Breaks for Printing
      4. Tutorial: Building a Print Style Sheet
        1. Remove Unneeded Page Elements
        2. Adjusting the Layout
        3. Reformatting the Text
        4. Displaying URLs
    2. 17. Improving Your CSS Habits
      1. Adding Comments
      2. Organizing Styles and Style Sheets
        1. Name Styles Clearly
          1. Name Styles by Purpose not Appearance
          2. Don’t Use Names Based on Position
          3. Avoid Cryptic Names
        2. Use Multiple Classes to Save Time
        3. Organize Styles by Grouping
          1. Using Comments to Separate Style Groups
        4. Using Multiple Style Sheets
      3. Eliminating Browser Style Interference
      4. Using Descendent Selectors
        1. Compartmentalize Your Pages
        2. Identify the Body
      5. Trying Different CSS for Internet Explorer
        1. Targeting Different Versions of IE
  9. 5. Appendixes
    1. A. CSS Property Reference
      1. CSS Values
        1. Colors
          1. Keywords
          2. RGB values
        2. Lengths and Sizes
          1. Pixels
          2. Ems
          3. Percentages
        3. Keywords
        4. URLs
      2. Text Properties
        1. color (inherited)
        2. font (inherited)
        3. font-family (inherited)
        4. font-size (inherited)
        5. font-style (inherited)
        6. font-variant (inherited)
        7. font-weight (inherited)
        8. letter-spacing (inherited)
        9. line-height (inherited)
        10. text-align (inherited)
        11. text-decoration (inherited)
        12. text-indent (inherited)
        13. text-shadow (inherited)
        14. text-transform (inherited)
        15. vertical-align
        16. white-space
        17. word-spacing (inherited)
      3. List Properties
        1. list-style (inherited)
        2. list-style-image (inherited)
        3. list-style-position (inherited)
        4. list-style-type (inherited)
      4. Padding, Borders, and Margins
        1. box-shadow Adds a shadow around a box element.
        2. border
        3. border-radius
        4. border-top, border-right, border-bottom, border-left
        5. border-color
        6. border-top-color, border-right-color, border-bottom-color, border-left-color
        7. border-style
        8. border-top-style, border-right-style, border-bottom-style, border-left-style
        9. border-width
        10. border-top-width, border-right-width, border-bottom-width, border-left-width
        11. box-sizing
        12. outline
        13. outline-color
        14. outline-style
        15. outline-width
        16. padding
        17. padding-top
        18. padding-right
        19. padding-bottom
        20. padding-left
        21. margin
        22. margin-top
        23. margin-right
        24. margin-bottom
        25. margin-left
      5. Backgrounds
        1. background
        2. background-attachment
        3. background-clip
        4. background-color
        5. background-image
        6. background-origin
        7. background-position
        8. background-repeat
        9. background-size
      6. Page Layout Properties
        1. bottom
        2. clear
        3. clip
        4. display
        5. float
        6. height
        7. left
        8. max-height
        9. max-width
        10. min-height
        11. min-width
        12. overflow
        13. position
        14. right
        15. top
        16. visibility
        17. width
        18. z-index
      7. Animation, Transform, and Transition Properties
        1. @keyframes
        2. animation
        3. animation-name
        4. animation-duration
        5. animation-timing-function
        6. animation-delay
        7. animation-iteration-count
        8. animation-direction
        9. animation-fill-mode
        10. animation-play-state
        11. transform
        12. transform-origin
        13. transition
        14. transition-property
        15. transition-duration
        16. transition-timing-function
        17. transition-delay
      8. Table Properties
        1. border-collapse
        2. border-spacing
        3. caption-side
        4. empty-cells
        5. table-layout
      9. Miscellaneous Properties
        1. content
        2. cursor
        3. opacity
        4. orphans
        5. page-break-after
        6. page-break-before
        7. page-break-inside
        8. widows
    2. B. CSS Resources
      1. References
        1. World Wide Web Consortium (W3C)
        2. Books
        3. Other Online References
      2. CSS Help
        1. Discussion Boards
      3. CSS Tips, Tricks, and Advice
      4. CSS Navigation
        1. Tutorials
        2. Online Examples
      5. CSS Layout
        1. Box Model Information
        2. Layout Examples
        3. Miscellaneous Layout Resources
      6. Showcase Sites
      7. CSS Books
      8. CSS Software
        1. Windows and Mac
        2. Windows Only
        3. Mac Only
  10. Index
  11. About the Author
  12. Copyright

Product information

  • Title: CSS3: The Missing Manual, 3rd Edition
  • Author(s): David Sawyer McFarland
  • Release date: December 2012
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449325947