Learn CSS for free / PDF

Table of Contents:

1. Getting the Lay of the Land:

CSS in Context .................................................................................... 2
The Basic Purpose of CSS .................................................................... 3
Why Most—but Not All—Tables Are Bad ............................................ 3
Tables Mean Long Load Times ..................................................... 4
Use of Transparent Images Slows us Down ................................... 4
Maintaining Tables is a Nightmare ............................................... 5
Tables Cause Accessibility Issues .................................................. 6
When it’s Okay to Use a Table .................................................... 6
What is CSS, Really? ........................................................................... 6
Parts of a CSS Rule .............................................................................. 8
Types of CSS Rules ............................................................................ 11
Which Properties can CSS Rules Affect? .................................... 11
Which Elements can CSS Affect? ............................................... 11
Where can CSS Styles be Defined? ............................................ 12
A Simple Example ............................................................................. 15



2. Putting CSS into Perspective:

What can CSS Do? ............................................................................ 21
Color and CSS ........................................................................... 22
Fonts and CSS ........................................................................... 25
Dynamic Pseudo-classes and CSS ............................................... 28
Images and CSS ......................................................................... 29
Multiple Style Sheets, Users, and CSS ........................................ 30
Advantages of CSS Design ................................................................. 31
Increased Stylistic Control ......................................................... 31
Centralized Design Information ................................................. 32
Semantic Content Markup ......................................................... 33

Accessibility ............................................................................... 34
Standards Compliance ............................................................... 36
Browser Support for CSS ................................................................... 37


3. Digging Below the Surface :

Applying CSS to HTML Documents .................................................. 40
Using Shorthand Properties ............................................................... 41
How Inheritance Works in CSS ......................................................... 42
Selectors and the Structure of CSS Rules ............................................ 44
Universal Selector ...................................................................... 44
Element Type Selector ............................................................... 45
Class Selector ............................................................................. 45
ID Selector ................................................................................ 46
Pseudo-element Selector ............................................................. 47
Pseudo-class Selector .................................................................. 48
Descendant Selector ................................................................... 50
Parent-child Selector .................................................................. 51
Adjacent Selector ....................................................................... 52
Attribute Selectors ..................................................................... 52
Selector Grouping ...................................................................... 54
Expression Measurements .................................................................. 54
Absolute Values ......................................................................... 56
Relative Values .......................................................................... 57
CSS Comments .................................................................................. 59


4. Validation and Backward Compatibility :

Validating your CSS .......................................................................... 61
Adjusting for Backward Compatibility ................................................ 65
Browsers that Do Not Support CSS ........................................... 66
Browsers with Poor or Badly Implemented CSS Support ............. 66
Bugs in Modern Browsers ........................................................... 69
Keep the Quirks: DOCTYPE Switching .................................................. 70
Summary ........................................................................................... 73
5. Splashing Around a Bit of Color ............................................................ 75
Who’s in Charge? .............................................................................. 75
Color in CSS ...................................................................................... 77
How to Specify Colors ............................................................... 78
Selecting and Combining Colors ................................................. 81
Setting body Color ..................................................................... 82
Transparency, Color, and User Overrides .................................... 83

Interesting Uses of Color .................................................................... 85
Warnings and Cautions .............................................................. 85
Coloring Alternate Rows and Adding Cell Borders in Data
Tables ........................................................................................ 87
Background Images ............................................................................ 90
Summary ........................................................................................... 94
6. Working with Fonts .............................................................................. 95
How CSS Deals with Fonts ................................................................ 95
The font-family Property ................................................................. 96
Generic Fonts ............................................................................ 97
The font-size Property .................................................................... 99
HTML Sizes vs CSS Sizes ........................................................ 100
Variability across Browsers and Platforms ................................. 100
Relative to what? ..................................................................... 101
Other Font Properties ...................................................................... 103
The font-style Property ........................................................ 103
The font-variant Property ..................................................... 103
The font-weight Property ....................................................... 103
The font Shorthand Property .......................................................... 104
Standard and Nonstandard Font Families ......................................... 106
Specifying Font Lists ................................................................ 107
Using Nonstandard and Downloadable Fonts ........................... 109

7. Text Effects and the Cascade:

Using the span Element ................................................................... 112
Text Alignment as a Design Technique ............................................. 113
Text Alignment in CSS vs HTML ............................................. 114
Moving from Crowded to Airy Design Using Alignment ............ 114
First-line Indentation ....................................................................... 120
Horizontal and Vertical Spacing ....................................................... 122
The line-height Property ....................................................... 122
The letter-spacing and word-spacing Properties .................. 125
Text Decorations ............................................................................. 129
Styling Hyperlinks ........................................................................... 131
Styling Lists with CSS ...................................................................... 134
The list-style-type Property ............................................... 134
The list-style-position Property ........................................ 137
The list-style-image Property .............................................. 139
Cascading and Inheritance ............................................................... 140
Basic Principles of Cascading .................................................... 140


Sort Order ............................................................................... 142
Specificity ................................................................................ 144
Origin ...................................................................................... 146
Weight .................................................................................... 147


8. Simple CSS Layout :

The Layout ...................................................................................... 149
Creating the Document .................................................................... 151
The Header .............................................................................. 153
The Main Content Section ....................................................... 153
The Sidebar ............................................................................. 154
Positioning the Page Elements .......................................................... 157
The display Property .............................................................. 157
Absolute, Relative, and Positioning Contexts ............................ 158
The Box Model ........................................................................ 162
Margin Properties .................................................................... 173
Margins, Padding, and Lists ..................................................... 175
Border Properties ..................................................................... 179
Constructing the Layout ................................................................... 181
The Header Area ...................................................................... 185
The Content Area .................................................................... 192
Repositioning the Sidebar ........................................................ 213
Summary ......................................................................................... 214

9. Three-column Layouts :

Adding a Third Column ................................................................... 217
The Markup ............................................................................ 218
Positioning the Sidebar ............................................................ 221
Adding a Footer ............................................................................... 232
The float Property .......................................................................... 236
How Does it Work? ................................................................. 239
Putting float into Practice in our Layout ......................................... 240
Achieving Full-height Columns ......................................................... 244
The Content Order Problem ............................................................. 251
Other Layout Methods ............................................................. 255
Summary ......................................................................................... 256

10. Fixed-width Layouts:

The Layout ...................................................................................... 260
Creating the Document .................................................................... 261
Centering the Content Area ............................................................. 264
The Header Area ...................................................................... 267

he Content .................................................................................... 268
The Table ........................................................................................ 273
Multiple-column Fixed-width Layouts .............................................. 281
Positioned Columns ................................................................. 282
Floated Columns ...................................................................... 284
“Zoom” Layouts ............................................................................... 288
Creating the Style Sheet ........................................................... 290
Attaching Alternate Style Sheets .............................................. 295
Summary ......................................................................................... 297

A. CSS Miscellany ................................................................................... 299
At-rules ............................................................................................ 299
Aural Style Sheets ............................................................................ 303
CSS and JavaScript .......................................................................... 305

B. CSS Color Reference ........................................................................... 307

C. CSS Property Reference ...................................................................... 317
azimuth ........................................................................................... 318
background ...................................................................................... 318
background-attachment .................................................................... 319
background-color ............................................................................. 320
background-image ............................................................................ 321
background-position ......................................................................... 322
background-position-x, background-position-y .................................. 324
background-repeat ........................................................................... 325
behavior ........................................................................................... 326
border .............................................................................................. 327
border-bottom, border-left, border-right, border-top .......................... 328
border-bottom-color, border-left-color, border-right-color, border-topcolor
................................................................................................ 329
border-bottom-style, border-left-style, border-right-style, border-topstyle
................................................................................................. 330
border-bottom-width, border-left-width, border-right-width, bordertop-
width ......................................................................................... 330
border-collapse ................................................................................. 331
border-color ..................................................................................... 332
border-spacing ................................................................................. 333
border-style ...................................................................................... 334
border-width .................................................................................... 337
bottom ............................................................................................ 338
caption-side ..................................................................................... 339
clear ................................................................................................. 339





                                              Tutorial HTML Download for free / PDF