Stylin’ with CSS: A Designer’s Guide, Second Edition

Stylin’ with CSS: A Designer’s Guide, Second Edition

by Charles Wyke-Smith
Released December 2007
Publisher(s): New Riders
ISBN: 9780321550156

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

Cascading Style Sheets enable you to rapidly create web designs that can be shared by hundreds or even thousands of web pages. It accelerates development cycles by centralizing text and layout information for easy editing and updates. This book teaches you everything you need to know to start using CSS in your web development work, from the basics of marking up your content and styling text, through the creation of multi-column page layouts without the use of tables. Learn to create interface components, such as drop-down menus, navigation links, and animated graphical buttons, using only CSS  (no JavaScript required). Discover how to design code that works on the latest standard-compliant browsers, such as IE7 and current versions of Firefox, Safari, and Opera, while working around the quirks of the older ones. With a mastery of CSS, your web design capabilities will move to a new level, and everything you need to know to get started and build your skills is right here in this book. You’ll be stylin’ in no time!

Table of contents

  1. Copyright
    1. Dedication
  2. Acknowledgements
  3. About the Author
  4. Introduction
    1. Reuse and DRY
    2. Master the Key Techniques
    3. Use the Right Tools
    4. Only Four Browsers Matter
    5. Download My Code, Don’t Retype It
    6. ... and Don’t Forget to Write
  5. 1. XHTML: Giving Structure to Content
    1. Web Standards
      1. Even Today, IDWIMIE
      2. Content, Structure, and Presentation
    2. The Times They Are A-Changing
      1. The Way We Were...
      2. The Future Just Happened
    3. XHTML and How To Write It
      1. XHTML—The Rules
      2. An XHTML Template
      3. Marking Up Your Content
      4. Document Flow—Block and Inline Elements
        1. A Simple Example of XHTML Markup
        2. The Browser’s Internal Style Sheet
        3. A More Structured XHTML Page
      5. Document Hierarchy: Meet the XHTML Family
  6. 2. How CSS Works
    1. The Three Ways to Style Your Document
      1. Inline Styles
      2. Embedded Styles
      3. Linked Styles
    2. Anatomy of a CSS Rule
    3. Writing CSS Rules
    4. Targeting Tags Within the Document Hierarchy
      1. Using Contextual Selectors
      2. Working with Child Selectors
      3. Adding Classes and IDs
        1. Simple Use of a Class
        2. Contextual Class Selectors
        3. Multiple Classes
      4. Introducing IDs
      5. The Difference Between IDs and Classes
      6. Specialized Selectors
        1. The Universal Selector
        2. The Adjacent Sibling Selector
        3. Attribute Selectors
      7. Summary of Selectors
    5. Pseudo-Classes
      1. Anchor Link Pseudo-Classes
      2. Other Useful Pseudo-Classes
        1. :First-Child
        2. :Focus
    6. Pseudo-Elements
    7. Inheritance
    8. The Cascade
      1. Sources of Styles
      2. The Cascade Rules
    9. Rule Declarations
      1. Numerical Values
      2. Color Values
  7. 3. Stylin’ Fonts and Text
    1. Specifying Fonts in CSS
      1. Introducing Font Collections
    2. Exploring Font Families
      1. Using Embedded Styles (for Now)
      2. Setting the Font Family for the Entire Page
    3. Sizing Fonts
      1. Inherited Styles in Nested Tags
    4. Font Properties
      1. Font-Style Property
      2. Font-Weight Property
      3. Font-Variant Property
      4. The Font Property Shorthand
    5. Text Properties
      1. Text-Indent Property
      2. Letter-Spacing Property
      3. Word-Spacing Property
      4. Text-Decoration Property
      5. Text-Align Property
      6. Line-Height Property
      7. Text-Transform Property
      8. Vertical-Align Property
    6. Using Font and Text Styles
  8. 4. Positioning Elements
    1. Understanding the Box Model
      1. The Box Border
      2. The Box Padding
      3. The Box Margins
      4. Collapsing Margins
    2. How Big Is a Box?
      1. Creating a Single Column with Contained Elements
    3. Floating and Clearing
      1. The Float Property
      2. The Clear Property
    4. The Position Property
      1. Static Positioning
      2. Relative Positioning
      3. Absolute Positioning
      4. Fixed Positioning
      5. Positioning Context
    5. The Display Property
    6. Positioning/Display Example
  9. 5. Basic Page Layout
    1. Some Multi-Column Layouts
    2. Introducing Stylib—the Stylin’ Library
    3. Width Matters
    4. Floated Versus Absolutely-Positioned Layouts
      1. A Simple Two-Column Fixed-Width Layout
      2. Know Your Inner Div
      3. Prevent Unwanted Overflow
      4. Freely Style Your Inner Divs
      5. Styling the Text
    5. A Simple Two-Column Liquid Layout
      1. Use a Little Constraint
      2. To Float or Not To Float?
    6. A Three-Column Fixed-Width Layout
    7. A Three-Column Liquid Layout
    8. Making All the Columns the Same Length
      1. Faux Columns
        1. Two-Column Liquid Layout with Faux Columns
        2. Three-Column Liquid Layout with Faux Columns
      2. Programmatically Extend Columns (and Round Their Corners!)
    9. An Absolutely-Positioned Layout
  10. 6. Designing Interface Components
    1. Styling Tables
    2. Styling Forms
      1. How Forms Work
      2. Form Markup
        1. The Form Element
        2. Form Controls
        3. The Text Input Control
        4. The Password Input Control
        5. The Textarea Input Control
        6. The Radio Button Input
        7. The Checkbox Input Control
        8. The Select Control
        9. The Submit Button Input Control
      3. Form Styling
        1. Tiny Sign-in Form
    3. Styling Lists and Menus
      1. Lists
        1. Styling Lists
        2. Converting the List into a Menu
        3. Basic Link Styling
      2. Creating CSS-Based Menus
        1. A Drop-Down Menu Tutorial
        2. Creating the Drop-Downs on the Menu
  11. 7. Building Web Pages
    1. The Stylin’ Site
    2. Setting Up the Folder Structure
    3. Creating the Site Architecture
      1. Copy the Required CSS Files from the Library
      2. The @import Rule
      3. The Text and Colors Style Sheet
      4. The Page Markup
      5. The Background Images
      6. The Drop-Down Menus
        1. Transparency on the Drop-Downs
      7. The Transparent Sidebar Panel
        1. Adjusting the Left Column Width
        2. Adding the Transparent Background Graphic to the Column
      8. Adding the Registration Form
      9. Styling the Text
        1. The Header
        2. The Content Area
        3. The Right Promo Column
        4. The Footer
    4. Conclusion
  12. A. XHTML Tags
  13. B. CSS Properties

Product information

  • Title: Stylin’ with CSS: A Designer’s Guide, Second Edition
  • Author(s): Charles Wyke-Smith
  • Release date: December 2007
  • Publisher(s): New Riders
  • ISBN: 9780321550156