CSS & CSS3: 20 Lessons to Successful Web Development

CSS & CSS3: 20 Lessons to Successful Web Development

by Robin Nixon
Released January 2015
Publisher(s): McGraw-Hill
ISBN: 9780071850216

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

Build real-world CSS skills in less than an hour per lesson—online video tutorials included!

CSS & CSS3: 20 Lessons to Successful Web Development provides easy-to-follow lessons that use text, sample exercises, and video for the entry-level CSS programmer. Each lesson is designed to take you less than an hour to complete. All the basics of CSS through to more advanced features like adding dynamic effects, animation, transitions, and web fonts are covered. This practical guide also introduces just enough of the additional technologies and techniques—like HTML and JavaScript—needed to complete the lessons.

  • One-hour lessons teach practical techniques that can be applied immediately
  • Wrap ups contain a summary, tips for further study, and self-test questions
  • Online video accompanying each lesson offer valuable, step-by-step instruction

Table of contents

  1. Cover
  2. Title Page
  3. Copyright Page
  4. Dedication
  5. Contents at a Glance
  6. Contents
  7. Acknowledgments
  8. Introduction
  9. PART I Basic CSS
    1. Lesson 1 Introduction to CSS
      1. How the Document Object Model Works
      2. Correct HTML Structure and Nesting
      3. About Cascading Style Sheets
        1. Importing a Style Sheet
        2. Importing CSS from Within HTML
        3. Embedded Style Settings
      4. Using IDs
      5. Using Classes
      6. Summary
      7. Self-Test Questions
    2. Lesson 2 Learning the CSS Rules
      1. Selectors
        1. IDs
        2. Classes
      2. Multiple Assignments
      3. Comments
        1. Single-Line Comments
      4. Style Types
        1. Default Styles
        2. User Styles
        3. External Style Sheets
        4. Internal Styles
        5. Inline Styles
      5. It’s All About Separation of Style and Content
      6. Summary
      7. Self-Test Questions
    3. Lesson 3 Applying Declarations to IDs and Classes
      1. Using IDs
        1. A Specific Case
        2. IDs Are Single-Use Only
      2. Using Classes
        1. Assigning Multiple Classes
      3. Accessing IDs and Classes with JavaScript
        1. The O() Function
        2. The S() Function
        3. The C() Function
        4. Using Hyphenated Property Names
        5. Why Use JavaScript?
      4. Summary
      5. Self-Test Questions
    4. Lesson 4 Accessing Selectors
      1. The Type Selector
      2. The Descendant Selector
      3. The Child Selector
      4. The ID Selector
        1. Narrowing ID Scope
      5. The Class Selector
        1. Narrowing Class Scope
      6. The Attribute Selector
      7. The Universal Selector
      8. Selecting by Group
      9. For JavaScript Programmers
        1. Points of Interest
      10. Summary
      11. Self-Test Questions
    5. Lesson 5 Working with the Cascade
      1. Style Sheet Creators
      2. Style Sheet Methods
      3. Style Sheet Selectors
      4. Calculating Specificity
        1. When Rules Are Particularly Important
      5. So What Are Divs and Spans Anyway?
      6. Specifying Measurements
        1. Pixels
        2. Points
        3. Inches
        4. Centimeters
        5. Millimeters
        6. Picas
        7. Ems
        8. Exs
        9. Percent
      7. Summary
      8. Self-Test Questions
    6. Lesson 6 Selecting Fonts and Typography
      1. Font Family
        1. Generic Font Families
      2. Font Style
      3. Font Size
      4. Font Weight
      5. Changing Text Styles
        1. Text Decoration
        2. Line, Word, and Letter Spacing
        3. Horizontal Alignment
        4. Managing Uppercase and Lowercase
        5. Text Indenting
      6. Summary
      7. Self-Test Questions
    7. Lesson 7 Manipulating Color and Position
      1. Colors
        1. Using rgb()
        2. Short Color Strings
        3. Gradients
        4. Linear Gradients
        5. Radial Gradients
        6. Controlling Color Stops
        7. Repeating Gradients
        8. An Example Document
        9. Alpha Transparency
        10. An Example Document
      2. CSS3 Browser Incompatibilities
        1. Older Browsers
        2. Let George Do It
        3. The prefixfree.js Utility
      3. Positioning Elements
        1. Absolute Positioning
        2. Relative Positioning
        3. Fixed Positioning
        4. An Example Document
      4. Summary
      5. Self-Test Questions
    8. Lesson 8 Handling Pseudo-Selectors and Using Shorthand Properties
      1. Introducing the Pseudo-Selectors
        1. Link-Related Pseudo-Classes
        2. Accessing Elements Numerically
        3. Selecting Elements by Numeric Location
        4. Relational Selectors
        5. Miscellaneous Pseudo-Selectors
        6. Pseudo-Elements That Add Content
      2. Shorthand Properties
        1. Border and Outline Shorthand
        2. Background Shorthand
        3. Font Shorthand
        4. Margin and Padding Shorthand
        5. List Shorthand
      3. Summary
      4. Self-Test Questions
    9. Lesson 9 Understanding the Box Model
      1. Visualizing the Box Model
        1. Setting Margins
        2. Using Borders
        3. Applying Padding
        4. Non-image Elements
      2. The Object Contents
      3. Changing the Box Model
      4. Summary
      5. Self-Test Questions
  10. PART II CSS
    1. Lesson 10 Introduction to CSS3
      1. Attribute Selectors
      2. Improved Backgrounds
      3. Enhanced Borders
      4. Box Shadows
      5. Element Overflow
      6. Multicolumn Layout
      7. Extended Color Handling and Opacity
      8. Additional Text Effects
      9. Box Sizing
      10. Resizing and Outlines
      11. Web Fonts
      12. Transitions and Transformations
      13. Summary
      14. Self-Test Questions
    2. Lesson 11 Using Selectors and Attribute Selectors
      1. Summary of Selector Types
        1. The Universal Selector
        2. Type Selectors
        3. Class Selectors
        4. ID Selectors
        5. Descendant Selectors
        6. Child Selectors
        7. Adjacent Sibling Selectors
        8. General Sibling Selectors
      2. Attribute Selectors
        1. Pseudo-Classes
        2. Pseudo-Elements
        3. Attribute Selectors
        4. The ^= Operator
        5. The $= Operator
        6. The *= Operator
      3. Summary
      4. Self-Test Questions
    3. Lesson 12 Setting Backgrounds
      1. The background-clip Property
      2. The background-origin Property
      3. Compatibility Issues
      4. The background-size Property
        1. Using the auto Value
      5. Multiple Backgrounds
      6. Summary
      7. Self-Test Questions
    4. Lesson 13 Attaching Borders
      1. The border-color Properties
      2. The border-style Properties
      3. The border-image Properties
      4. The border-radius Properties
      5. Summary
      6. Self-Test Questions
    5. Lesson 14 Controlling Box Shadows, Overflow, and Columns
      1. Adding Box Shadows
        1. The box-shadow Supported Values
      2. Managing Element Overflow
      3. Flowing Text over Multiple Columns
      4. Summary
      5. Self-Test Questions
    6. Lesson 15 Adding Colors and Opacity
      1. HSL Colors
      2. HSLA Colors
      3. RGB Colors
      4. RGBA Colors
      5. The opacity Property
      6. Summary
      7. Self-Test Questions
    7. Lesson 16 Creating Text Effects and Changing the Box Model
      1. The text-shadow Property
        1. The text-shadow Supported Values
      2. The text-overflow Property
      3. The word-wrap Property
      4. The box-sizing Property
        1. Browser Compatibility
      5. The resize Property
      6. The outline and outline-offset Properties
      7. Summary
      8. Self-Test Questions
    8. Lesson 17 Linking to Web Fonts
      1. Loading a Web Font
        1. The Main Types of Web Fonts
        2. Loading a Web Font
        3. And the Winner Is
      2. Google Web Fonts
        1. Browser Differences
      3. Other Font Sources
      4. Summary
      5. Self-Test Questions
    9. Lesson 18 Making 2D Transformations
      1. 2D Transformations
        1. The none Transformation Type
      2. The matrix(w,s1,s2,h,x,y) Function
        1. Argument 1
        2. Argument 2
        3. Argument 3
        4. Argument 4
        5. Argument 5
        6. Argument 6
        7. Internet Explorer Prior to IE9
      3. Summary
      4. Self-Test Questions
    10. Lesson 19 Applying Specific Transformations
      1. The translate(x,y) Function
      2. The scale(x,y) Function
        1. Older Versions of IE
      3. The rotate(n) Function
        1. Older Versions of IE
      4. The skew(x,y) Function
        1. Older Versions of IE
      5. Summary
      6. Self-Test Questions
    11. Lesson 20 Directing 3D Transformations
      1. The perspective Property
      2. The transform-origin Property
      3. About the Three Dimensions
      4. The translate3d(x,y,z) Function
      5. The scale3d(x,y,z) Function
      6. The rotate3d(x,y,z,r) Function
      7. The backface-visibility Property
      8. The transform-style Property
      9. Transitions
        1. The transition-property Property
        2. The transition-duration Property
        3. The transition-delay Property
        4. The transition-timing-function Property
        5. The cubic-bezier() Function
        6. Shorthand transition Property Syntax
      10. Summary
      11. Self-Test Questions
  11. APPENDIX Answers to the Self-Test Questions
    1. Lesson 1 Answers
    2. Lesson 2 Answers
    3. Lesson 3 Answers
    4. Lesson 4 Answers
    5. Lesson 5 Answers
    6. Lesson 6 Answers
    7. Lesson 7 Answers
    8. Lesson 8 Answers
    9. Lesson 9 Answers
    10. Lesson 10 Answers
    11. Lesson 11 Answers
    12. Lesson 12 Answers
    13. Lesson 13 Answers
    14. Lesson 14 Answers
    15. Lesson 15 Answers
    16. Lesson 16 Answers
    17. Lesson 17 Answers
    18. Lesson 18 Answers
    19. Lesson 19 Answers
    20. Lesson 20 Answers
  12. Index

Product information

  • Title: CSS & CSS3: 20 Lessons to Successful Web Development
  • Author(s): Robin Nixon
  • Release date: January 2015
  • Publisher(s): McGraw-Hill
  • ISBN: 9780071850216