CSS: The Missing Manual

by David Sawyer McFarland

Overview

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).

Product Details

ISBN-13:	9781491918012
Publisher:	O'Reilly Media, Incorporated
Publication date:	08/13/2015
Sold by:	Barnes & Noble
Format:	eBook
Pages:	718
File size:	41 MB
Note:	This product may take a few minutes to download.

About the Author

David Sawyer McFarland, president of Sawyer McFarland Media, has been building and managing websites since 1995. He is also a writer and trainer, and teaches in the Portland State University multimedia program. He wrote the bestselling Missing Manual titles on Adobe Dreamweaver, CSS, and JavaScript.

Table of Contents

The Missing Credits

Introduction

Part One: CSS Basics

Chapter 1. Rethinking HTML for CSS
     HTML: Past and Present
            HTML Past: Whatever Looked Good
            HTML Present: Scaffolding for CSS
     Writing HTML for CSS
            Think Structure
            Two New HTML Tags to Learn
            HTML to Forget
            Tips to Guide Your Way
     The Importance of the Doctype

Chapter 2. Creating Styles and Style Sheets
     Anatomy of a Style
     Understanding Style Sheets
            Internal or External-How to Choose
     Internal Style Sheets
     External Style Sheets
            Linking a Style Sheet Using HTML
            Linking a Style Sheet Using CSS
     Tutorial: Creating Your First Styles
            Creating an Inline Style
            Creating an Internal Style Sheet
            Creating an External Style Sheet

Chapter 3. Selector Basics: Identifying What to Style
     Tag Selectors: Page-Wide Styling
     Class Selectors: Pinpoint Control
     ID Selectors: Specific Page Elements
     Styling Tags Within Tags
            The HTML Family Tree
            Building Descendent Selectors
     Styling Groups of Tags
            Constructing Group Selectors
            The Universal Selector (Asterisk)
     Pseudo-Classes and Pseudo-Elements
            Styles for Links
            More Pseudo-Classes and -Elements
     Advanced Selectors
            Child Selectors
            Adjacent Siblings
            Attribute Selectors
     Tutorial: Selector Sampler
            Creating a Group Selector
            Creating and Applying a Class Selector
            Creating and Applying an ID Selector
            Creating a Descendent Selector

Chapter 4. Saving Time with Inheritance
     What Is Inheritance?
     How Inheritance Streamlines Style Sheets
     The Limits of Inheritance
     Tutorial: Inheritance
            A Basic Example: One Level of Inheritance
            Using Inheritance to Restyle an Entire Page
            Inheritance Inaction

Chapter 5. Managing Multiple Styles: The Cascade
     How Styles Cascade
            Inherited Styles Accumulate
            Nearest Ancestor Wins
            The Directly Applied Style Wins
            One Tag, Many Styles
     Specificity: Which Style Wins
            The Tiebreaker: Last Style Wins
     Controlling the Cascade
            Changing the Specificity
            Selective Overriding
     Tutorial: The Cascade in Action
            Creating a Hybrid Style
            Combining Cascading and Inheritance
            Overcoming Conflicts

Part Two: Applied CSS

Chapter 6. Formatting Text
     Formatting Text
            Choosing a Font
            Adding Color to Text
     Changing Font Size
            Using Pixels
            Using Keywords, Percentages, and Ems
     Formatting Words and Letters
            Italicizing and Bolding
            Capitalizing
            Decorating
            Letter and Word Spacing
     Formatting Entire Paragraphs
            Adjusting the Space Between Lines
            Aligning Text
            Indenting the First Line and Removing Margins
            Formatting the First Letter or First Line of a Paragraph
     Styling Lists
            Types of Lists
            Positioning Bullets and Numbers
            Graphic Bullets
     Tutorial: Text Formatting in Action
            Setting Up the Page
            Formatting the Headings and Paragraphs
            Formatting Lists
            Adding the Finishing Touches

Chapter 7. Margins, Padding, and Borders
     Understanding the Box Model
     Control Space with Margins and Padding
            Margin and Padding Shorthand
            Colliding Margins
            Removing Space with Negative Margins
            Displaying Inline and Block-Level Boxes
     Adding Borders
            Border Property Shorthand
            Formatting Individual Borders
     Coloring the Background
     Determining Height and Width
            Calculating a Box's Actual Width and Height
            Controlling the Tap with the Overflow Property
            Fixing IE 5's Broken Box Model
     Wrap Content with Floating Elements
            Backgrounds, Borders, and Floats
            Stopping the Float
     Tutorial: Margins, Backgrounds, and Borders
            Controlling Page Margins
            Adjusting the Space Around Tags
            Emphasizing Text with Backgrounds and Borders
            Building a Sidebar
            Fixing the Browser Bugs
            Going Further

Chapter 8. Adding Graphics to Web Pages
     CSS and the <img> Tag
     Background Images
     Controlling Repetition
     Positioning a Background Image
            Keywords
            Precise Values
            Percentage Values
            Fixing an Image in Place
     Using Background Property Shorthand
     Tutorial: Creating a Photo Gallery
            Framing an Image
            Adding a Caption
            Building a Photo Gallery
            Adding Drop Shadows
     Tutorial: Using Background Images
            Adding an Image to the Page Background
            Replacing Borders with Graphics
            Using Graphics for Bulleted Lists
            Adding Rounded Corners to the Sidebar
            Creating an External Style Sheet

Chapter 9. Sprucing Up Your Site's Navigation
     Selecting Which Links to Style
            Understanding Link States
            Targeting Particular Links
     Styling Links
            Underlining Links
            Creating a Button
            Using Graphics
     Building Navigation Bars
            Using Unordered Lists
            Vertical Navigation Bars
            Horizontal Navigation Bars
     Advanced Link Techniques
            Big Clickable Buttons
            CSS-Style Preloading Rollovers
            Sliding Doors
     Tutorial: Styling Links
            Basic Link Formatting
            Adding a Background Image to a Link
            Highlighting External Links
            Marking Visited Pages
            Creating a Vertical Navigation Bar
            Adding Rollovers and Creating "You Are Here" Links
            Fixing the IE Bugs
            From Vertical to Horizontal

Chapter 10. Formatting Tables and Forms
     Using Tables the Right Way
     Styling Tables
            Adding Padding
            Adjusting Vertical and Horizontal Alignment
            Creating Borders
            Styling Rows and Columns
     Styling Forms
            HTML Form Elements
            Laying Out Forms Using CSS
     Tutorial: Styling a Table
     Tutorial: Styling a Form

Part Three: CSS Page Layout

Chapter 11. Building Float-Based Layouts
     How CSS Layout Works
            The Mighty <div> Tag
     Types of Web Page Layouts
     Float Layout Basics
     Applying Floats to Your Layouts
            Floating All Columns
            Floats Within Floats
            Using Negative Margins to Position Elements
     Overcoming Float Problems
            Clearing and Containing Floats
            Creating Full-Height Columns
            Preventing Float Drops
     Handling Internet Explorer Bugs
            Double-Margin Bug
            3-Pixel Gaps
            Other IE Problems
     Tutorial: Multiple Column Layouts
            Structuring the HTML
            Creating the Layout Styles
            Adding Another Column
            Adding a "Faux Column"
            Fixing the Width
     Tutorial: Negative Margin Layout
            Centering a Layout
            Floating the Columns
            Final Adjustments

Chapter 12. Positioning Elements on a Web Page
     How Positioning Properties Work
            Setting Positioning Values
            When Absolute Positioning Is Relative
            When (and Where) to Use Relative Positioning
            Stacking Elements
            Hiding Parts of a Page
     Powerful Positioning Strategies
            Positioning Within an Element
            Breaking an Element Out of the Box
            Using CSS Positioning for Page Layout
            Creating CSS-Style Frames Using Fixed Positioning
     Tutorial: Positioning Page Elements
            Enhancing a Page Banner
            Adding a Caption to a Photo
            Laying Out the Page

Part Four: Advanced CSS

Chapter 13. CSS for the Printed Page
     How Media Style Sheets Work
     How to Add Media Style Sheets
            Specifying the Media Type for an External Style Sheet
            Specifying the Media Type Within a Style Sheet
     Creating Print Style Sheets
            Using !important to Override Onscreen Styling
            Reworking Text Styles
            Styling Backgrounds for Print
            Hiding Unwanted Page Areas
            Adding Page Breaks for Printing
     Tutorial: Building a Print Style Sheet
            Remove Unneeded Page Elements
            Removing Backgrounds and Adjusting the Layout
            Reformatting the Text
            Displaying the Logo
            Displaying URLs

Chapter 14. Improving Your CSS Habits
     Adding Comments
     Organizing Styles and Style Sheets
            Name Styles Clearly
            Use Multiple Classes to Save Time
            Organize Styles by Grouping
            Using Multiple Style Sheets
     Eliminating Browser Style Interference
     Using Descendent Selectors
            Compartmentalize Your Pages
            Identify the Body
     Managing Internet Explorer Hacks
            Design for Contemporary Browsers First
            Isolate CSS for IE with Conditional Comments

Part Five: Appendixes

Appendix A. CSS Property Reference

Appendix B. CSS in Dreamweaver 8

Appendix C. CSS Resources

Index