Getting StartED with CSS

Getting StartED with CSS

by David Powers
Released November 2009
Publisher(s): Apress
ISBN: 9781430225430

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

Getting StartED with CSS takes a practical approach by showing you how to use CSS in simple stages, starting by changing the default appearance of HTML tags to improve the look of text and links.—By the end of the book you'll have a solid understanding of all the main aspects of CSS.

Table of contents

  1. Copyright
  2. About the Author
  3. About the Technical Reviewer
  4. Acknowledgments
  5. Introduction
    1. Who this book is for
    2. Using the files for this book
  6. 1. What Is CSS, and Why Should I Learn It?
    1. 1.1. A short history of CSS
      1. 1.1.1. Why CSS has taken so long to be embraced by designers
      2. 1.1.2. The time for CSS has finally come
    2. 1.2. What are the advantages of CSS?
      1. 1.2.1. Write simpler markup
      2. 1.2.2. Turn into a quick change artist
      3. 1.2.3. Gain greater control over the look of page elements
    3. 1.3. So, how do I use CSS?
      1. 1.3.1. Why are they called "cascading" style sheets?
      2. 1.3.2. How do I write a style rule?
        1. 1.3.2.1. Formatting CSS for ease of maintenance
        2. 1.3.2.2. Adding comments to your CSS
      3. 1.3.3. Where do I create my CSS?
        1. 1.3.3.1. Using external style sheets
          1. 1.3.3.1.1. Attaching a style sheet with a <link> tag
          2. 1.3.3.1.2. Using an @import rule
        2. 1.3.3.2. Using a <style> block
        3. 1.3.3.3. Applying a style directly to an HTML element
        4. 1.3.3.4. Don't forget the cascade
        5. 1.3.3.5. Using Internet Explorer conditional comments
      4. 1.3.4. Limiting which devices use your styles
    4. 1.4. Learning to write CSS well
      1. 1.4.1. Avoiding common mistakes
      2. 1.4.2. Test your CSS early in several browsers
      3. 1.4.3. Building a useful toolset for working with CSS
    5. 1.5. Chapter review
  7. 2. How Do I Improve the Look of Text and Links?
    1. 2.1. Exploring the CSS text properties
    2. 2.2. Changing the default font and color of text
      1. 2.2.1. Using font-family to choose a range of alternative fonts
      2. 2.2.2. Setting color values in CSS
      3. 2.2.3. Selectively applying a different font and color
    3. 2.3. Changing the size of fonts
      1. 2.3.1. Setting length with pixels, ems, and other units of measurement
      2. 2.3.2. Using percentages
    4. 2.4. Changing the look of fonts
      1. 2.4.1. Italicizing text
      2. 2.4.2. Making text bolder or lighter
      3. 2.4.3. Displaying text in small caps
      4. 2.4.4. Switching between uppercase and lowercase
    5. 2.5. Aligning and spacing text
      1. 2.5.1. Aligning text horizontally
      2. 2.5.2. Aligning text vertically
      3. 2.5.3. Indenting the first line of text
      4. 2.5.4. Adjusting the vertical space between lines of text
      5. 2.5.5. Adding or removing space between words
      6. 2.5.6. Increasing or decreasing the space between letters
      7. 2.5.7. Controlling whitespace and line wrapping
    6. 2.6. Styling text links
      1. 2.6.1. Just remember it's a love-hate relationship
      2. 2.6.2. Controlling underlines
      3. 2.6.3. Making full use of the cascade
    7. 2.7. Using the font shorthand property
    8. 2.8. Chapter review
  8. 3. How Can I Improve the Layout of My Text?
    1. 3.1. Sliding boxes and blocks
      1. 3.1.1. Two HTML tags that are the friends of CSS: <div> and <span>
    2. 3.2. How CSS controls margins
      1. 3.2.1. Understanding how vertical margins collapse
      2. 3.2.2. Setting margin values
    3. 3.3. Using margins to improve page layout
      1. 3.3.1. Removing the default margins from your pages
      2. 3.3.2. Centering page content
      3. 3.3.3. Using margin-left to indent text
      4. 3.3.4. Using negative margins
      5. 3.3.5. Applying margins to inline elements
    4. 3.4. Keeping your style sheet manageable
      1. 3.4.1. Using the margin shorthand property
      2. 3.4.2. Organizing your style rules for easier maintenance
    5. 3.5. Chapter review
  9. 4. How Can I Flow Text Around Images?
    1. 4.1. CSS classes 101
      1. 4.1.1. Creating and applying CSS classes
    2. 4.2. Using float to flow text around images
      1. 4.2.1. Creating generic classes to position images
      2. 4.2.2. How do I center an image?
      3. 4.2.3. What happens when the image is taller than the text?
      4. 4.2.4. Using clear to force elements below a floated image
      5. 4.2.5. What if an element is too wide to sit alongside a float?
      6. 4.2.6. What happens to margins alongside a float?
    3. 4.3. Using ID selectors to style unique elements
      1. 4.3.1. Deciding whether to use a class or an ID
    4. 4.4. Adding a caption to an image
    5. 4.5. Chapter review
  10. 5. How Do I Add Backgrounds and Borders to Improve the Look of My Page?
    1. 5.1. Controlling backgrounds with CSS
      1. 5.1.1. Changing the background color of an element
      2. 5.1.2. Adding a background image
        1. 5.1.2.1. Controlling how background images repeat
        2. 5.1.2.2. Fixing a background image in relation to the browser viewport
        3. 5.1.2.3. Adjusting the position of a background image
      3. 5.1.3. Using the background shorthand property
    2. 5.2. Controlling borders with CSS
      1. 5.2.1. Setting a border color
      2. 5.2.2. Setting a border style
      3. 5.2.3. Setting a border width
      4. 5.2.4. Using border shorthand properties
      5. 5.2.5. Using borders to simulate embossing and indenting
      6. 5.2.6. Understanding how borders affect layout
      7. 5.2.7. How do I get rid of the blue border around link images?
      8. 5.2.8. How do I prevent backgrounds and borders from displaying under floats?
    3. 5.3. Chapter review
  11. 6. How Do I Solve the Mysteries of Width and Height?
    1. 6.1. Padding—the final piece of the CSS box model
      1. 6.1.1. Choosing between margins and padding
      2. 6.1.2. Using padding to add space around elements
    2. 6.2. Controlling width and height
      1. 6.2.1. Using a fixed height
      2. 6.2.2. Using minimum and maximum lengths to scale images and text
    3. 6.3. How do I stop content spilling out of its container?
      1. 6.3.1. Controlling overspill with the overflow property
      2. 6.3.2. Using overflow as an alternative to clear with floated elements
      3. 6.3.3. Understanding the difference between visibility and display
      4. 6.3.4. Displaying a message to users of old browsers
    4. 6.4. Chapter review
  12. 7. How Do I Create Differently Styled Sections?
    1. 7.1. Adding a sidebar
      1. 7.1.1. Giving the sidebar different styles
    2. 7.2. Adding an accessible page heading
    3. 7.3. Switching the sidebar to the other side
    4. 7.4. Improving the image captions
    5. 7.5. How do I tell which styles will be applied?
      1. 7.5.1. A review of selectors in CSS2.1
      2. 7.5.2. Using specificity to work out which rule wins
        1. 7.5.2.1. Specificity the easy way
        2. 7.5.2.2. Specificity the official way
    6. 7.6. Chapter review
  13. 8. How Do I Style Lists and Navigation Menus?
    1. 8.1. Styling unordered and ordered lists
      1. 8.1.1. Changing the symbol or number
      2. 8.1.2. Changing the position of the symbol
      3. 8.1.3. Replacing the symbol with your own image
        1. 8.1.3.1. Using a background image for greater control
      4. 8.1.4. Using the list-style shorthand property
    2. 8.2. Changing layout with the display property
      1. 8.2.1. Setting display to inline
      2. 8.2.2. Setting display to inline-block
    3. 8.3. Creating a navigation bar from a list
      1. 8.3.1. Creating a vertical text-based navigation bar
      2. 8.3.2. Creating a horizontal text-based navigation bar
      3. 8.3.3. Using CSS sprites in a navigation bar
    4. 8.4. How do I continue a numbered list after a break?
    5. 8.5. Using CSS to generate numbered sequences
      1. 8.5.1. Adding content with :before and :after
      2. 8.5.2. Adding images with pseudo-elements
      3. 8.5.3. Generating content from an HTML attribute
      4. 8.5.4. Using the content property to generate numbered sequences
      5. 8.5.5. Using generated content with numbered lists
      6. 8.5.6. Generating subsection numbers with nested lists
    6. 8.6. Chapter review
  14. 9. How Do I Style Tables?
    1. 9.1. Understanding the anatomy of a table
      1. 9.1.1. Basic table structure
      2. 9.1.2. Using HTML tags to define sections of a table
        1. 9.1.2.1. Defining table columns
        2. 9.1.2.2. Defining table header and footer rows
        3. 9.1.2.3. Grouping table rows into sections
      3. 9.1.3. How browsers lay out tables
    2. 9.2. Styling tables with CSS
      1. 9.2.1. Using CSS for table borders
      2. 9.2.2. Adding borders to table cells
      3. 9.2.3. How do I stop border widths from being doubled?
      4. 9.2.4. Adding borders to columns and rows
      5. 9.2.5. Applying other styles to columns
      6. 9.2.6. What's the CSS equivalent of cellspacing?
      7. 9.2.7. What's the CSS equivalent of cellpadding?
      8. 9.2.8. Controlling the position of the table caption
      9. 9.2.9. Handling empty cells
      10. 9.2.10. How can I control the width of my table?
      11. 9.2.11. How do I create scrolling table cells that work in all browsers?
      12. 9.2.12. How do I control the position of content in table cells?
    3. 9.3. Chapter review
  15. 10. How Do I Position Elements Precisely on the Page?
    1. 10.1. How does CSS positioning work?
      1. 10.1.1. Understanding the different types of positioning
    2. 10.2. Fixing elements inside the browser window
      1. 10.2.1. How do I keep my navigation onscreen all the time?
      2. 10.2.2. Understanding the limitations of fixed positioning
    3. 10.3. Using relative positioning to nudge elements
      1. 10.3.1. Using relative positioning to create a containing block
    4. 10.4. Moving elements precisely with absolute positioning
      1. 10.4.1. Why do absolutely positioned elements move?
      2. 10.4.2. How do I center a page and use absolute positioning?
      3. 10.4.3. What happens if I nest absolutely positioned elements?
      4. 10.4.4. How do I control which element is on top when they overlap?
      5. 10.4.5. What are the drawbacks of using absolute positioning?
      6. 10.4.6. Positioning elements against a background image
    5. 10.5. Cropping an image nondestructively with CSS
    6. 10.6. Chapter review
  16. 11. Are There Any Guidelines for Basic Page Layout?
    1. 11.1. Getting the basics right
      1. 11.1.1. Who is the target audience?
      2. 11.1.2. What size browser window should I design for?
      3. 11.1.3. What type of layout is best—fixed or flexible?
    2. 11.2. Creating a single-column layout
      1. 11.2.1. Keeping a liquid display centered
    3. 11.3. Creating a two-column layout
      1. 11.3.1. Putting the sidebar first and floating it to one side
      2. 11.3.2. Using a background image to simulate equal columns
      3. 11.3.3. What happens if the sidebar is longer?
      4. 11.3.4. Adding a "skip to main content" link for screen readers
      5. 11.3.5. Putting the main content first
        1. 11.3.5.1. Floating the main content
        2. 11.3.5.2. Using absolute positioning for the sidebar
        3. 11.3.5.3. Using a negative margin to float the sidebar into position
      6. 11.3.6. How do I make a more flexible two-column layout?
    4. 11.4. Creating a three-column layout
      1. 11.4.1. Creating faux columns for a three-column layout
        1. 11.4.1.1. Using a single image for a fixed-width layout
        2. 11.4.1.2. Using multiple images for a hybrid layout
      2. 11.4.2. Putting the main content first in a three-column layout
      3. 11.4.3. Creating subcolumns
    5. 11.5. Table-related display—the future of layout?
    6. 11.6. Chapter review
  17. 12. How Do I Create Styles for Printing?
    1. 12.1. What's different about print CSS?
      1. 12.1.1. What print style sheets cannot do
      2. 12.1.2. Setting page margins with the @page rule and pseudo-classes
      3. 12.1.3. Controlling where to break content between pages
      4. 12.1.4. Displaying the URL of links
    2. 12.2. Creating styles for printing
      1. 12.2.1. Using the media attribute to specify where styles are applied
      2. 12.2.2. Using the cascade for print styles
      3. 12.2.3. Attaching independent style sheets
    3. 12.3. The ones that got away—UI properties and quotes
      1. 12.3.1. Changing the cursor
      2. 12.3.2. Adding an outline
      3. 12.3.3. Removing a default outline without destroying accessibility
      4. 12.3.4. Curly quotes, anyone?
    4. 12.4. Chapter review
  18. A. CSS Properties and Selectors
    1. A.1. Specifying property values
      1. A.1.1. Specifying color values
      2. A.1.2. Specifying sizes
      3. A.1.3. Specifying URLs
    2. A.2. CSS2.1 Properties
      1. A.2.1. Background properties
        1. A.2.1.1. background-attachment
        2. A.2.1.2. background-color
        3. A.2.1.3. background-image
        4. A.2.1.4. background-position
        5. A.2.1.5. background-repeat
        6. A.2.1.6. background
      2. A.2.2. Border properties
        1. A.2.2.1. border-color
        2. A.2.2.2. border-style
        3. A.2.2.3. border-top, border-right, border-bottom, border-left
        4. A.2.2.4. border-top-color, border-right-color, border-bottom-color, border-left-color
        5. A.2.2.5. border-top-style, border-right-style, border-bottom-style, border-left-style
        6. A.2.2.6. border-top-width, border-right-width, border-bottom-width, border-left-width
        7. A.2.2.7. border-width
        8. A.2.2.8. border
      3. A.2.3. Box model properties
        1. A.2.3.1. height
        2. A.2.3.2. margin-right, margin-left, margin-top, margin-bottom
        3. A.2.3.3. margin
        4. A.2.3.4. max-height
        5. A.2.3.5. max-width
        6. A.2.3.6. min-height
        7. A.2.3.7. min-width
        8. A.2.3.8. padding-top, padding-right, padding-bottom, padding-left
        9. A.2.3.9. padding
        10. A.2.3.10. width
      4. A.2.4. Display and visibility properties
        1. A.2.4.1. display
        2. A.2.4.2. overflow
        3. A.2.4.3. visibility
      5. A.2.5. Float properties
        1. A.2.5.1. clear
        2. A.2.5.2. float
      6. A.2.6. Generated content properties
        1. A.2.6.1. content
        2. A.2.6.2. counter-increment, counter-reset
        3. A.2.6.3. quotes
      7. A.2.7. List properties
        1. A.2.7.1. list-style-image
        2. A.2.7.2. list-style-position
        3. A.2.7.3. list-style-type
        4. A.2.7.4. list-style
      8. A.2.8. Positioning properties
        1. A.2.8.1. bottom, left, right, top
        2. A.2.8.2. clip
        3. A.2.8.3. position
        4. A.2.8.4. z-index
      9. A.2.9. Print properties
        1. A.2.9.1. orphans
        2. A.2.9.2. page-break-after
        3. A.2.9.3. page-break-before
        4. A.2.9.4. page-break-inside
        5. A.2.9.5. widows
      10. A.2.10. Table properties
        1. A.2.10.1. border-collapse
        2. A.2.10.2. border-spacing
        3. A.2.10.3. caption-side
        4. A.2.10.4. empty-cells
        5. A.2.10.5. table-layout
        6. A.2.10.6. text-align
        7. A.2.10.7. vertical-align
      11. A.2.11. Text properties
        1. A.2.11.1. color
        2. A.2.11.2. direction
        3. A.2.11.3. font-family
        4. A.2.11.4. font-size
        5. A.2.11.5. font-style
        6. A.2.11.6. font-variant
        7. A.2.11.7. font-weight
        8. A.2.11.8. font
        9. A.2.11.9. letter-spacing
        10. A.2.11.10. line-height
        11. A.2.11.11. text-align
        12. A.2.11.12. text-decoration
        13. A.2.11.13. text-indent
        14. A.2.11.14. text-transform
        15. A.2.11.15. unicode-bidi
        16. A.2.11.16. vertical-align
        17. A.2.11.17. white-space
        18. A.2.11.18. word-spacing
      12. A.2.12. User interface properties
        1. A.2.12.1. cursor
        2. A.2.12.2. outline-color
        3. A.2.12.3. outline-style
        4. A.2.12.4. outline-width
        5. A.2.12.5. outline
    3. A.3. Selectors
      1. A.3.1. CSS2.1 selectors
        1. A.3.1.1. Universal selector
        2. A.3.1.2. Type selectors
        3. A.3.1.3. Class selectors
        4. A.3.1.4. Pseudo-classes
        5. A.3.1.5. Pseudo-elements
        6. A.3.1.6. ID selectors
        7. A.3.1.7. Descendant selectors
        8. A.3.1.8. Child selectors
        9. A.3.1.9. Adjacent sibling selectors
        10. A.3.1.10. Attribute selectors
        11. A.3.1.11. Grouping selectors
        12. A.3.1.12. Building complex selectors
      2. A.3.2. Widely-supported CSS3 selectors
        1. A.3.2.1. Matching an attribute that begins with a value
        2. A.3.2.2. Matching an attribute that contains a substring
        3. A.3.2.3. Matching an attribute that ends with a value
        4. A.3.2.4. General sibling combinator

Product information

  • Title: Getting StartED with CSS
  • Author(s): David Powers
  • Release date: November 2009
  • Publisher(s): Apress
  • ISBN: 9781430225430