CSS · the Missing Manual by McFarland, David Sawyer -- Read -- Imperial Library of Trantor

Creating a Group Selector Creating and Applying an ID Selector Creating and Applying a Class Selector Creating a Descendant 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 Font 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 Rems

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 Internet Explorer Support

Repeating Linear Gradients Radial Gradients Repeating Radial Gradients

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

9. Sprucing Up Your Site’s Navigation

Selecting Which Links to Style

Understanding Link States Targeting Particular Links Grouping links with descendant 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. 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

15. 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 Style Sheet A Basic Style Sheet Structure Mobile First

Flexible Grids

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

Fluid Images

The Downside 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

16. Using a CSS Grid System

How Grids Work Structuring Your HTML for Grids Using the Skeleton Grid System Creating and Naming Columns

Creating Full Width Sections Styling Buttons Mobile First

Tutorial: Using a Grid System

Adding a Grid Adding Style The Mobile Design Styling a Breakpoint

17. Modern Web Layout with Flexbox

Introducing Flexbox

Flexbox Basics

Flex Container Properties

Flex-Flow Justify-content Align-items Align-content

Flex Item Properties

The Order Property Align-self Mini-Tutorial: Auto Margins for Flex Items Flex Digging into the Math Returning to the Flex-Shrink Property Wrapping Flex Items The Bottom Line

Tutorial: Build a Flexbox Layout

Styling the Navigation Bar Adding Three Columns Formatting the Footer Changing the Navigation Bar for Mobile

4. Advanced CSS

18. Improving Your CSS Habits

Adding Comments Organizing Styles

Name Classes Clearly

Name Classes by Purpose Not Appearance Don’t Use Names Based on Position Avoid Cryptic Names

Don’t Repeat Yourself Use Multiple Classes to Save Time Use Shorthand Properties Grouping Related Styles

Using Comments to Separate Style Groups

Using Multiple Style Sheets

Eliminating Browser Style Interference Using Descendant Selectors

Compartmentalize Your Pages Identify the Body

19. More Powerful Styling with Sass

What is Sass? Installing Sass

Installing Sass on Windows Installing Sass on Mac

Sass Basics

Organizing Your Files Converting Your Current Site to Sass Running Sass

Organizing Your Styles with Sass Partials

Creating and Using Sass Partials Organizing Your Sass Partial Files

Sass Variables

Organizing Your Sass Variables Common Uses for Sass Variables

Nesting Selectors

Referencing the Parent Selector Multiple Levels of Nesting

Inheriting (or Extending) Properties

Extending With Placeholder Selectors Only Extend Related Elements

Mixins

Creating a Mixin Using a Mixin Giving Mixins Information Inserting Variables into Text Passing More Information and Optional Values to Mixins

Working with Media Queries

Creating Media Query Mixins

Setting Breakpoint Variables. Creating the Media Query Mixins Using the Media Query Mixins

Troubleshooting with CSS Source Maps

5. Appendixes

A. CSS Property Reference

CSS Values

Colors

Keywords RGB Values

Lengths and Sizes

Pixels Ems Percentages Rems Vh Vw Vmin Vmax

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 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-inside widows

B. CSS Resources

References

World Wide Web Consortium (W3C) Other Online References

CSS Help

Discussion Boards

CSS Tips, Tricks, and Advice CSS Navigation

Tutorials Online Examples

CSS Layout Showcase Sites

Index About the Author Copyright

← Prev
Back
Next →

← Prev
Back
Next →