[Missing Manuals 01] • CSS3 · the Missing Manual by McFarland, David Sawyer -- Read -- Imperial Library of Trantor

Index

CSS3: The Missing Manual The Missing Credits

About the Author About the Creative Team Acknowledgements The Missing Manual Series

Introduction

How CSS Works The Benefits of CSS What You Need to Know HTML: The Barebones Structure Document Types How HTML Tags Work XHTML, Too HTML5: The Wheel Turns Again Software for CSS

Free Programs Commercial Software

About This Book

About the Outline

The Very Basics

About→These→Arrows

About the Online Resources

Living Examples About MissingManuals.com Errata

Safari® Books Online

1. CSS Basics

1. HTML for CSS

HTML: Past and Present

HTML Past: Whatever Looked Good HTML Present: Scaffolding for CSS

Writing HTML for CSS

Think Structure Two HTML Tags to Keep in Mind

Understanding the <Div> and <Span> Tags Additional Tags in HTML5

Keep Your Layout in Mind HTML to Forget Tips to Guide Your Way

The Importance of the Doctype Making Sure Internet Explorer Is Up-to-Date

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 by Using HTML Linking a Style Sheet by Using CSS

Tutorial: Creating Your First Styles

Creating an Inline Style Creating an Internal Style Sheet Creating an External Style Sheet

3. Selectors: Identifying What to Style

Tag Selectors: Page-Wide Styling Class Selectors: Pinpoint Control ID Selectors: Specific Page Elements Styling Groups of Tags

Constructing Group Selectors The Universal Selector (Asterisk)

Styling Tags Within Tags

The HTML Family Tree Building Descendent Selectors Creating Modules

Pseudo-Classes and Pseudo-Elements

Styles for Links Styling Paragraph Parts More Pseudo-Classes and Pseudo-Elements

:Focus :Before :After ::Selection

Attribute Selectors Child Selectors

:First-Child

:First-Child :Last-Child Nth-Child

Child Type Selectors

:First-of-Type :Last-of-Type :Nth-of-Type

Siblings The :not( ) Selector Tutorial: Selector Sampler

Creating a Group Selector Creating and Applying a Class Selector Creating a Descendent Selector Creating and Applying an ID Selector Finishing Touches

4. Saving Time with Style 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

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 Avoiding Specificity Wars Starting with a Clean Slate

Tutorial: The Cascade in Action

Resetting CSS and Styling from Scratch Creating a Hybrid Style Overcoming Conflicts

2. Applied CSS

6. Formatting Text

Using Fonts

Choosing a Common Font

Serif Fonts Sans-Serif Fonts Monospaced and Fun Fonts Additional Fonts to Consider

Using Web Fonts

Font File Types Legal Issues with Web Fonts Finding Web Fonts Generating Multiple Font Formats Using the @font-face Directive Creating Styles Using Web Fonts Dealing with Bold and Italic Variants

The Easy Way to add Bold and Italic Adding Bold and Italic and Supporting Internet Explorer 8

Discovering Google Web Fonts

Finding and Selecting Fonts Using Google Fonts

Adding Color to Text

Hexadecimal Color Notation

RGB RGBA HSL and HSLA

Changing Font Size

Using Pixels Using Keywords, Percentages, and Ems

Keywords Percentages Ems

Formatting Words and Letters

Italicizing and Bolding Capitalizing

Small Caps

Decorating Letter and Word Spacing

Adding Text Shadow Formatting Entire Paragraphs

Adjusting the Space Between Lines

Line Spacing by pixel, em, or percentage Line Spacing by Number

Aligning Text Indenting the First Line and Removing Margins

First-Line Indents Controlling Margins between Paragraphs

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 Fine-Tuning with Classes Adding the Finishing Touches

7. Margins, Padding, and Borders

Understanding the Box Model Controlling Space with Margins and Padding

Margin and Padding Shorthand Colliding Margins Removing Space with Negative Margins Inline, Block, and Other Display Settings

Adding Borders

Border Property Shorthand Formatting Individual Borders

Coloring the Background Creating Rounded Corners Adding Drop Shadows Determining Height and Width

Calculating a Box’s Actual Width and Height Redefining Box Width with Box-Sizing Controlling the Tap with the Overflow Property Maximum and Minimum Heights and Widths

Wrapping Content with Floating Elements

Backgrounds, Borders, and Floats Stopping the Float

Tutorial: Margins, Backgrounds, and Borders

Controlling Page Margins and Backgrounds Adjusting the Space Around Tags Building a Sidebar Going Further

8. Adding Graphics to Web Pages

Discovering CSS and the <img> Tag Adding Background Images Controlling Repetition Positioning a Background Image

Keywords Precise Values Percentage Values Fixing an Image in Place Defining the Origin and Clipping for a Background Scaling Background Images

Using Background Property Shorthand Using Multiple Background Images Utilizing Gradient Backgrounds

Linear Gradients

Color Stops Vendor Prefixes and Internet Explorer support

Repeating Linear Gradients Radial Gradients Repeating radial gradients

Applying Easy Gradients with Colorzilla Tutorial: Enhancing Images

Framing an Image

Tutorial: Creating 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 Giving the Sidebar Personality Getting the Scroll to Appear in IE 8

9. Sprucing Up Your Site’s Navigation

Selecting Which Links to Style

Understanding Link States Targeting Particular Links Grouping links with descendent selectors

Styling Links

Underlining Links Creating a Button Using Graphics

Building Navigation Bars

Using Unordered Lists Vertical Navigation Bars Horizontal Navigation Bars

Using Display: Inline and Display: Inline-Block Using Floats for Horizontal Navigation

CSS-Style Preloading Rollovers Styling Particular Types of Links

Links to Other Websites Email Links Links to Specific Types of Files

Tutorial: Styling Links

Basic Link Formatting Adding a Background Image to a Link Highlighting Different Links

Tutorial: Creating a Navigation Bar

Adding Rollovers and Creating “You Are Here” Links From Vertical to Horizontal

10. CSS Transforms, Transitions, and Animations

Transforms

Rotate Scale Translate Skew Multiple Transformations Origin

Transitions

Adding a Transition Transition Timing Delaying a Transition’s Start Transition Shorthand

Animations

Defining Keyframes Applying an Animation Timing the Animation Finishing the Animation Animation Shorthand Pausing an Animation Animating on Hover

Tutorial

Adding an Animation

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

3. CSS Page Layout

12. Introducing CSS Layout

Types of Web Page Layouts How CSS Layout Works

The <div> Tag HTML5 Sectioning Elements Techniques for CSS Layout

Layout Strategies

Start with Your Content Mobile First Start with a Sketch Identify the Boxes Go with the Flow Remember Background Images Pieces of a Puzzle Layering Elements Don’t Forget Margins and Padding

13. Building Float-Based Layouts

Applying Floats to Your Layouts

Floating All Columns Floats Within Floats

Overcoming Float Problems

Clearing and Containing Floats Creating Full-Height Columns Preventing Float Drops Preventing Float Drops With Box-Sizing

Tutorial: Multiple-Column Layouts

Structuring the HTML Creating the Layout Styles Adding Another Column Adding Some Breathing Room Fixing the Width Mixing Liquid and Fixed Design

14. Responsive Web Design

Responsive Web Design Basics Setting Up a Web Page for RWD Media Queries

Strategies for Using Media Queries Creating Breakpoints Desktop First or Mobile First? Creating Media Queries Including Queries Inside a Stylesheet A Basic Stylesheet Structure Mobile First

Flexible Grids

The Importance of HTML Source Order Reset the Box Model Converting Fixed Width to Flexible Grids

Fluid Images

The Downsides of Fluid Images Videos and Flash

Responsive Web Design Tutorial

Changing the HTML Source Order Fluid Images Adding Styles for Tablet Screens Adding Phone Styles

15. 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 Creating CSS-Style Frames Using Fixed Positioning

Tutorial: Positioning Page Elements

Enhancing a Page Banner Placing Captions on the Photos

4. Advanced CSS

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

Removing Background Elements Leaving Background Elements in

Hiding Unwanted Page Areas Adding Page Breaks for Printing

Tutorial: Building a Print Style Sheet

Remove Unneeded Page Elements Adjusting the Layout Reformatting the Text Displaying URLs

17. Improving Your CSS Habits

Adding Comments Organizing Styles and Style Sheets

Name Styles Clearly

Name Styles by Purpose not Appearance Don’t Use Names Based on Position Avoid Cryptic Names

Use Multiple Classes to Save Time Organize Styles by Grouping

Using Comments to Separate Style Groups

Using Multiple Style Sheets

Eliminating Browser Style Interference Using Descendent Selectors

Compartmentalize Your Pages Identify the Body

Trying Different CSS for Internet Explorer

Targeting Different Versions of IE

5. Appendixes

A. CSS Property Reference

CSS Values

Colors

Keywords RGB values

Lengths and Sizes

Pixels Ems Percentages

Keywords URLs

Text Properties

color (inherited) font (inherited) font-family (inherited) font-size (inherited) font-style (inherited) font-variant (inherited) font-weight (inherited) letter-spacing (inherited) line-height (inherited) text-align (inherited) text-decoration (inherited) text-indent (inherited) text-shadow (inherited) text-transform (inherited) vertical-align white-space word-spacing (inherited)

List Properties

list-style (inherited) list-style-image (inherited) list-style-position (inherited) list-style-type (inherited)

Padding, Borders, and Margins

box-shadow Adds a shadow around a box element. border border-radius border-top, border-right, border-bottom, border-left border-color border-top-color, border-right-color, border-bottom-color, border-left-color border-style border-top-style, border-right-style, border-bottom-style, border-left-style border-width border-top-width, border-right-width, border-bottom-width, border-left-width box-sizing outline outline-color outline-style outline-width padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin-bottom margin-left

Backgrounds

background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size

Page Layout Properties

bottom clear clip display float height left max-height max-width min-height min-width overflow position right top visibility width z-index

Animation, Transform, and Transition Properties

@keyframes animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state transform transform-origin transition transition-property transition-duration transition-timing-function transition-delay

Table Properties

border-collapse border-spacing caption-side empty-cells table-layout

Miscellaneous Properties

content cursor opacity orphans page-break-after page-break-before page-break-inside widows

B. CSS Resources

References

World Wide Web Consortium (W3C) Books Other Online References

CSS Help

Discussion Boards

CSS Tips, Tricks, and Advice CSS Navigation

Tutorials Online Examples

CSS Layout

Box Model Information Layout Examples Miscellaneous Layout Resources

Showcase Sites CSS Books CSS Software

Windows and Mac Windows Only Mac Only

Index About the Author Copyright

← Prev
Back
Next →

← Prev
Back
Next →