CSS: The Missing Manual, 4th Edition

CSS: The Missing Manual, 4th Edition

by David Sawyer McFarland
Released August 2015
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491918012

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.

Start your free trial

Book description

CSS lets you create professional-looking websites, but learning its finer points can be tricky—even for seasoned web developers. This fully updated edition provides the most modern and effective tips, tricks, and tutorial-based instruction on CSS available today. Learn how to use new tools such as Flexbox and Sass to build web pages that look great and run fast on any desktop or mobile device. Ideal for casual and experienced designers alike.

The important stuff you need to know:

  • Start with the basics. Write CSS-friendly HTML, including the HTML5 tags recognized by today’s browsers.
  • Design for mobile devices. Create web pages that look great when visitors use them on the go.
  • Make your pages work for you. Add animations that capture the imagination, and forms that get the job done.
  • Take control of page layouts. Use professional design techniques such as floats and positioning.
  • Make your layouts more flexible. Design websites with Flexbox that adjust to different devices and screen sizes.
  • Work more efficiently. Write less CSS code and work with smaller files, using Syntactically Awesome Stylesheets (Sass).

Publisher resources

View/Submit Errata

Table of contents

  1. CSS: The Missing Manual
  2. The Missing Credits
    1. About the Author
    2. About the Creative Team
    3. Acknowledgments
    4. The Missing Manual Series
  3. Introduction
    1. What Is CSS?
    2. What You Need to Know
    3. HTML: The Barebones Structure
    4. Document Types
    5. How HTML Tags Work
    6. HTML5: More Tags to Choose From
    7. Software for CSS
      1. Free Programs
      2. Commercial Software
    8. About This Book
      1. About the Outline
    9. The Very Basics
      1. About→These→Arrows
    10. About the Online Resources
      1. Living Examples
      2. About MissingManuals.com
      3. Errata
    11. Safari® Books Online
  4. 1. CSS Basics
    1. 1. HTML and 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. More 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. How CSS Works
    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
      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. Type Selectors: Styling HTML Tags
      2. Class Selectors: Pinpoint Control
        1. One Tag, Multiple Classes
      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 Descendant 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. :Only-Child
          4. :Nth-Child
        2. Child Type Selectors
          1. :First-of-Type
          2. :Last-of-Type
          3. :Nth-of-Type
      9. Siblings
      10. The :target Selector
      11. The :not() Selector
      12. Tutorial: Selector Sampler
        1. Creating a Group Selector
        2. Creating and Applying an ID Selector
        3. Creating and Applying a Class Selector
        4. Creating a Descendant 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 In Action
    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
  5. 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 Font 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
          4. Rems
      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. Internet Explorer Support
        2. Repeating Linear Gradients
        3. Radial Gradients
        4. Repeating Radial Gradients
      8. Tutorial: Enhancing Images
        1. Framing an Image
      9. Tutorial: Creating a Photo Gallery
        1. Adding Drop Shadows
      10. 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
    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 descendant 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
  6. 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. 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
    4. 15. 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 Style Sheet
        6. A Basic Style Sheet 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 Downside 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
    5. 16. Using a CSS Grid System
      1. How Grids Work
      2. Structuring Your HTML for Grids
      3. Using the Skeleton Grid System
      4. Creating and Naming Columns
        1. Creating Full Width Sections
        2. Styling Buttons
        3. Mobile First
      5. Tutorial: Using a Grid System
        1. Adding a Grid
        2. Adding Style
        3. The Mobile Design
        4. Styling a Breakpoint
    6. 17. Modern Web Layout with Flexbox
      1. Introducing Flexbox
        1. Flexbox Basics
      2. Flex Container Properties
        1. Flex-Flow
        2. Justify-content
        3. Align-items
        4. Align-content
      3. Flex Item Properties
        1. The Order Property
        2. Align-self
        3. Mini-Tutorial: Auto Margins for Flex Items
        4. Flex
        5. Digging into the Math
        6. Returning to the Flex-Shrink Property
        7. Wrapping Flex Items
        8. The Bottom Line
      4. Tutorial: Build a Flexbox Layout
        1. Styling the Navigation Bar
        2. Adding Three Columns
        3. Formatting the Footer
        4. Changing the Navigation Bar for Mobile
  7. 4. Advanced CSS
    1. 18. Improving Your CSS Habits
      1. Adding Comments
      2. Organizing Styles
        1. Name Classes Clearly
          1. Name Classes by Purpose Not Appearance
          2. Don’t Use Names Based on Position
          3. Avoid Cryptic Names
        2. Don’t Repeat Yourself
        3. Use Multiple Classes to Save Time
        4. Use Shorthand Properties
        5. Grouping Related Styles
          1. Using Comments to Separate Style Groups
        6. Using Multiple Style Sheets
      3. Eliminating Browser Style Interference
      4. Using Descendant Selectors
        1. Compartmentalize Your Pages
        2. Identify the Body
    2. 19. More Powerful Styling with Sass
      1. What is Sass?
      2. Installing Sass
        1. Installing Sass on Windows
        2. Installing Sass on Mac
      3. Sass Basics
        1. Organizing Your Files
        2. Converting Your Current Site to Sass
        3. Running Sass
      4. Organizing Your Styles with Sass Partials
        1. Creating and Using Sass Partials
        2. Organizing Your Sass Partial Files
      5. Sass Variables
        1. Organizing Your Sass Variables
        2. Common Uses for Sass Variables
      6. Nesting Selectors
        1. Referencing the Parent Selector
        2. Multiple Levels of Nesting
      7. Inheriting (or Extending) Properties
        1. Extending With Placeholder Selectors
        2. Only Extend Related Elements
      8. Mixins
        1. Creating a Mixin
        2. Using a Mixin
        3. Giving Mixins Information
        4. Inserting Variables into Text
        5. Passing More Information and Optional Values to Mixins
      9. Working with Media Queries
        1. Creating Media Query Mixins
          1. Setting Breakpoint Variables.
          2. Creating the Media Query Mixins
          3. Using the Media Query Mixins
      10. Troubleshooting with CSS Source Maps
  8. 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
          4. Rems
          5. Vh
          6. Vw
          7. Vmin
          8. Vmax
        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
        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-inside
        6. widows
    2. B. CSS Resources
      1. References
        1. World Wide Web Consortium (W3C)
        2. 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
      6. Showcase Sites
  9. Index
  10. About the Author
  11. Copyright

Product information

  • Title: CSS: The Missing Manual, 4th Edition
  • Author(s): David Sawyer McFarland
  • Release date: August 2015
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491918012