Speaking in Styles: Fundamentals of CSS

Speaking in Styles: Fundamentals of CSS

Released June 2009
Publisher(s): New Riders
ISBN: None

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

Speaking in Styles aims to help Web designers learn the "language" that will be used to take their vision from the static comp to the live Internet. Many designers think that CSS is code, and that it's too hard to learn. Jason takes an approach to CSS that breaks it down around common design tasks and helps the reader learn that they already think in styles--they just need to learn to speak the language.

Jason helps Web designers find their voice, walks them through the grammar of CSS, shows them how to write their design specs in CSS, and how to prepare it for screen, printer or handheld devices. Along the way designers will learn to optimize their code, make it accessible, optimize for search engines, mix it up with Flash, and more.

Table of contents

  1. Copyright
    1. Dedication
  2. Introduction
    1. Verbalizing the Visual
    2. Why CSS?
    3. Reading This Book
      1. Reading the Code
  3. 1. A Web Primer
    1. 1. What is a Web Page?
      1. HTML, JavaScript, and CSS
        1. What Is the DOM?
      2. HTML and CSS
      3. JavaScript and CSS
      4. Flash and CSS
    2. 2. Web Designer’s Toolbox
      1. Web Browsers
        1. Internet Explorer (IE)
          1. Windows
        2. Firefox (FF)
          1. Mac, Windows, and Unix/Linux
        3. Safari (Sa)
          1. Mac and Windows
        4. Opera (Op)
          1. Mac, Windows, and Unix
        5. Test Internet Explorer 6 on the Mac with Crossover
      2. Firefox Add-Ons
        1. Firebug
        2. Colorzilla
        3. Palette Grabber
        4. MeasureIt
        5. Pixel Perfect
      3. Code Editors
        1. Coda
          1. Mac
        2. TopStyle
          1. Windows
        3. CSSEdit
          1. Mac
        4. Dreamweaver
          1. Windows and Mac
      4. Online Tools
        1. ColorJack
        2. Adobe Kuler
        3. Typetester
        4. SUMO Paint
    3. 3. The Myths of CSS
      1. Myth 1: CSS Is for Developers, Not Designers
      2. Myth 2: CSS Can’t Handle the Designs I Need
      3. Myth 3: CSS Has Too Many Browser Inconsistencies
  4. 2. CSS Grammar
    1. 4. Syntax: Creating Meaning
      1. The Rules of Style
        1. Parts of a Style Rule
        2. A Basic Style Rule
        3. Declaring More Styles
        4. Combining Rules
      2. Types of Selectors
        1. HTML Selector
        2. Class Selector
          1. Class Selector: Dependent Class
          2. Class Selector: Mix and Match Classes
        3. ID Selector
      3. Styles in Context
        1. Styles Based on Where Something Is
          1. A Simple Example of Descendent Selector Context
          2. A More Complex Example of Descendent Selector Context
        2. Styles for Children
        3. Styles for Siblings
      4. Styles for Special Cases
        1. Link States
        2. Styles for Link Actions
        3. Styles for Dynamic Actions
        4. Styles for Parts of a Paragraph
    2. 5. Semantics: Making Sense of Styles
      1. Where to Put Style Rules
        1. Inline Styles for an HTML Tag
        2. Embed Styles in a Web Page
        3. External Styles in a Web Site
          1. External Styles for a Web Site: Creating an External Style Sheet
          2. External Styles for a Web Site: Linking to an External Style Sheet
          3. External Styles for a Web Site: Importing an External Style Sheet
      2. Adding Notes to CSS
      3. Inheritance
        1. Overriding Inheritance
      4. Order
      5. Specificity
        1. Determining a CSS Rule’s Weight
      6. Importance
      7. Media
      8. The Cascade
    3. 6. Vocabulary: Talking the Talk
      1. Values
        1. Keywords
        2. Variables
      2. Fonts
      3. Text
      4. Background
        1. Image Repeat
        2. Image Position
      5. Box
        1. Display
        2. Visibility
        3. Float
        4. Width and Height
          1. Maximum and Minimum Width and Height
        5. Border
        6. Padding
        7. Margin
        8. Fixing IE
      6. Position
        1. Position Type
        2. Setting the 2-D Position
        3. Setting the 3-D Position
      7. Tables
      8. Lists
      9. Cursor
      10. Design Enhancements
        1. Shadows
        2. Rounded Corners
        3. Outline
  5. 3. Speaking Like a Native
    1. 7. Designing with CSS
      1. The Process: An Overview
      2. Plan
        1. Sketches
        2. Page Flow
        3. Wire Frames
        4. Mood Boards
        5. Visual Comps
      3. Build
        1. Cutting Chrome
        2. The Style Guide
        3. Prototype
          1. Prototype: Writing Your CSS
          2. Prototype: Organizing Your CSS
          3. Prototype: Combining Style Sheets
            1. All In One
            2. Modular Library
      4. Deploy
        1. Alpha
        2. Beta
        3. Launch
      5. Iterate
    2. 8. Layout
      1. Structure
        1. Head and Body
        2. The HTML Framework for CSS
        3. Adding CSS
      2. Default Styles
        1. Resetting Browser Default Styles
        2. Setting Your Default Styles
      3. The Grid
        1. Rows
        2. Columns
        3. Sections
    3. 9. Typography
      1. Font Choices
        1. Core Web Fonts
        2. Web-Safe Fonts
        3. Downloadable Fonts
      2. Fluid Typography
        1. Choosing Typefaces
      3. Styling Text
        1. Headers
        2. Paragraph and Block Quotes
        3. Lists
    4. 10. Navigation
      1. CSS Sprites
      2. Links
      3. Menus
      4. Buttons
    5. 11. Chrome
      1. Using Transparent Images
        1. Fixing Transparent PNGs in IE6
      2. Defining the Grid
        1. Columns
        2. Rows
      3. Logos and Forms
        1. Logos
        2. Forms
      4. Defining Sections
        1. Alternate Version for Ads
        2. Final Flourishes
    6. 12. The Last Word
      1. CSS Validation
        1. Designing for Web Standards?
      2. CSS Frameworks
        1. Creating Your Own CSS Frameworks
      3. CSS for Other Media
        1. Mobile Devices
        2. Print
      4. CSS Best Practices
        1. General
        2. Design
        3. Coding
        4. Optimizing
  6. Appendixes
    1. A. voxLibris Code
      1. index.html
      2. main.css
      3. default.css
      4. layout.css
      5. navigation.css
      6. chrome.css
    2. B. CSS Values
      1. Lengths
        1. Pixels or Ems?
      2. Fonts
      3. URLs
      4. Color
        1. Color Opacity
    3. C. Fixing Internet Explorer
      1. Understanding Quirks
      2. Fix 1: Doctype Switching
      3. Fix 2: Conditional Styles
      4. Fix 3: Underscore Hack
      5. Common IE6 Issues

Product information

  • Title: Speaking in Styles: Fundamentals of CSS
  • Author(s):
  • Release date: June 2009
  • Publisher(s): New Riders
  • ISBN: None