Table of Contents
A Brief History of (Web) Style 1
Elements 3
Replaced and Nonreplaced Elements 3
Element Display Roles 3
Bringing CSS and HTML Together 7
The link Tag 8
The style Element 12
The @import Directive 13
HTTP Linking 14
Inline Styles 15
Stylesheet Contents 16
Markup 16
Rule Structure 16
Vendor prefixing 17
Whitespace Handling 18
CSS Comments 19
Media Queries 20
Usage 20
Simple Media Queries 21
Media Types 21
Media Descriptors 22
Media Feature Descriptors and Value Types 24
Feature Queries 25
Summary 28
Basic Style Rules 29
Element Selectors 30
Declarations and Keywords 31
Grouping 33
Grouping Selectors 34
Grouping Declarations 35
Grouping Everything 37
New Elements in Old Browsers 38
Class and ID Selectors 38
Class Selectors 39
Multiple Classes 41
ID Selectors 43
Deciding Between Class and ID 44
Attribute Selectors 45
Simple Attribute Selectors 45
Selection Based on Exact Attribute Value 46
Selection Based on Partial Attribute Values 48
A Particular Attribute Selection Type 48
The Case Insensitivity Identifier 53
Using Document Structure 54
Understanding the Parent-Child Relationship 54
Descendant Selectors 56
Selecting Children 59
Selecting Adjacent Sibling Elements 60
Selecting Following Siblings 62
Pseudo-Class Selectors 63
Combining Pseudo-Classes 63
Structural Pseudo-Classes 64
Dynamic Pseudo-Classes 76
UI-State Pseudo-Classes 81
The :target Pseudo-Class 87
The :lang Pseudo-Class 88
The Negation Pseudo-Class 89
Pseudo-Element Selectors 92
Styling the First Letter 92
Styling the First Line 93
Restrictions on ::first-letter and ::first-line 94
Styling (or Creating) Content Before and After Elements 95
Summary 95
Specificity 97
Declarations and Specificity 99
Universal Selector Specificity 101
ID and Attribute Selector Specificity 101
Inline Style Specificity 101
Importance 102
Inheritance 103
The Cascade 106
Sorting by Weight and Origin 107
Sorting by Specificity 108
Sorting by Order 109
Non-CSS Presentational Hints 111
Summary 111
Keywords, Strings, and Other Text Values 113
Keywords 113
Strings 116
URLs 117
Images 119
Identifiers 119
Numbers and Percentages 119
Integers 120
Numbers 120
Percentages 120
Fractions 121
Distances 121
Absolute Length Units 121
Resolution Units 124
Relative Length Units 125
Calculation values 130
Attribute Values 131
Color 132
Named Colors 132
Colors by RGB and RGBa 133
Colors by HSL and HSLa 138
Color Keywords 141
Angles 142
Time and Frequency 143
Position 143
Custom Values 144
5. Fonts 149
Font Families 149
Using Generic Font Families 151
Specifying a Font Family 152
Using @font-face 154
Required Descriptors 155
Other Font Descriptors 160
Combining Descriptors 163
Font Weights 166
How Weights Work 167
Getting Bolder 170
Lightening Weights 172
The font-weight descriptor 173
Font Size 174
Absolute Sizes 175
Relative Sizes 177
Percentages and Sizes 178
Font Size and Inheritance 179
Using Length Units 182
Automatically Adjusting Size 183
Font Style 185
The font-style Descriptor 187
Font Stretching 188
The font-stretch Descriptor 190
Font Kerning 191
Font Variants 192
Level 3 Values 193
Font Features 195
The font-feature-settings Descriptor 197
Font Synthesis 197
The font Property 199
Adding the Line Height 201
Using Shorthands Properly 202
Using System Fonts 202
Font Matching 203
Summary 205
Indentation and Inline Alignment 207
Indenting Text 208
Text Alignment 211
Aligning the Last Line 215
Inline Alignment 216
The Height of Lines 216
Vertically Aligning Text 220
Word Spacing and Letter Spacing 226
Word Spacing 226
Letter Spacing 228
Spacing and Alignment 229
Text Transformation 230
Text Decoration 232
Weird Decorations 234
Text Rendering 236
Text Shadows 237
Handling Whitespace 239
Setting Tab Sizes 242
Wrapping and Hyphenation 243
Wrapping Text 248
Writing Modes 249
Setting Writing Modes 249
Changing Text Orientation 253
Declaring Direction 254
Summary 256
Basic Boxes 257
A Quick Refresher 258
The Containing Block 259
Altering Element Display 260
Changing Roles 261
Block Boxes 263
Horizontal Formatting 265
Horizontal Properties 266
Using auto 268
More Than One auto 269
Negative Margins 270
Percentages 272
Replaced Elements 273
Vertical Formatting 274
Vertical Properties 275
Percentage Heights 276
Auto Heights 278
Collapsing Vertical Margins 279
Negative Margins and Collapsing 281
List Items 283
Inline Elements 285
Line Layout 285
Basic Terms and Concepts 287
Inline Formatting 289
Inline Nonreplaced Elements 290
Building the Boxes 290
Vertical Alignment 293
Managing the line-height 295
Scaling Line Heights 297
Adding Box Properties 298
Changing Breaking Behavior 301
Glyphs Versus Content Area 302
Inline Replaced Elements 303
Adding Box Properties 304
Replaced Elements and the Baseline 305
Inline-Block Elements 308
Flow Display 310
Contents Display 312
Other Display Values 312
Computed Values 313
Summary 313
Basic Element Boxes 315
Width and Height 316
Padding 318
Replicating Values 320
Single-Side Padding 322
Percentage Values and Padding 323
Padding and Inline Elements 325
Padding and Replaced Elements 327
Borders 328
Borders with Style 329
Border Widths 333
Border Colors 337
Shorthand Border Properties 339
Global Borders 341
Borders and Inline Elements 342
Rounding Border Corners 344
Image Borders 352
Outlines 369
Outline Styles 370
Outline Width 371
Outline Color 372
How They Are Different 374
Margins 375
Length Values and Margins 377
Percentages and Margins 378
Single-Side Margin Properties 379
Margin Collapsing 379
Negative Margins 381
Margins and Inline Elements 383
Summary 385
Colors 387
Foreground Colors 388
Affecting Borders 390
Affecting Form Elements 391
Inheriting Color 392
Backgrounds 392
Background Colors 393
Clipping the Background 396
Background Images 399
Background Positioning 404
Changing the Positioning Box 414
Background Repeating (or Lack Thereof) 417
Getting Attached 428
Sizing Background Images 433
Bringing It All Together 442
Multiple Backgrounds 444
Gradients 450
Linear Gradients 451
Radial Gradients 466
Manipulating Gradient Images 478
Repeating Gradients 481
Box Shadows 485
Summary 488
Floating 489
Floated Elements 490
Floating: The Details 492
Applied Behavior 499
Floats, Content, and Overlapping 503
Clearing 504
Float Shapes 508
Creating a Shape 509
Shaping with Image Transparency 521
Adding a Shape Margin 522
Summary 524
Basic Concepts 525
Types of Positioning 525
The Containing Block 526
Offset Properties 527
Width and Height 530
Setting Width and Height 530
Limiting Width and Height 532
Content Overflow and Clipping 534
Overflow 534
Element Visibility 536
Absolute Positioning 537
Containing Blocks and Absolutely Positioned Elements 537
Placement and Sizing of Absolutely Positioned Elements 540
Auto-edges 541
Placing and Sizing Nonreplaced Elements 543
Placing and Sizing Replaced Elements 547
Placement on the Z-Axis 550
Fixed Positioning 553
Relative Positioning 555
Sticky Positioning 557
Summary 561
Flexbox Fundamentals 563
A Simple Example 565
Flex Containers 569
The flex-direction Property 570
Other Writing Directions 574
Wrapping Flex Lines 576
Defining Flexible Flows 578
flex-wrap Continued 584
Arranging Flex Items 586
Flex Container 587
Justifying Content 587
justify-content Examples 594
Aligning Items 596
Start, End, and Center Alignment 599
Baseline Alignment 601
Additional Notes 602
The align-self Property 602
Aligning Content 604
Flex Items 609
What Are Flex Items? 609
Flex Item Features 611
Minimum Widths 613
Flex-Item–Specific Properties 614
The flex Property 614
The flex-grow Property 616
Growth Factors and the flex Property 619
The flex-shrink Property 623
Proportional Shrinkage Based on Width and Shrink Factor 626
Differing Bases 628
Responsive Flexing 630
The flex-basis Property 633
The content Keyword 634
Automatic Flex Basis 635
Default Values 636
Length Units 637
Zero Basis 642
The flex Shorthand 643
Common Flex Values 643
The order property 648
Tabbed Navigation Revisited 650
Creating a Grid Container 655
Basic Grid Terminology 658
Placing Grid Lines 660
Fixed-Width Grid Tracks 662
Flexible Grid Tracks 666
Fitting Track Contents 674
Repeating Grid Lines 676
Grid Areas 680
Attaching Elements to the Grid 686
Using Column and Row Lines 687
Row and Column Shorthands 692
The Implicit Grid 694
Error Handling 697
Using Areas 698
Grid Item Overlap 701
Grid Flow 702
Automatic Grid Lines 708
The grid Shorthand 710
Subgrids 713
Opening Grid Spaces 714
Grid Gutters (or Gaps) 714
Grid Items and the Box Model 716
Aligning and Grids 721
Aligning and Justifying Individual Items 722
Aligning and Justifying All Items 723
Layering and Ordering 727
Summary 729
Table Formatting 731
Visually Arranging a Table 731
Table Display Values 733
Anonymous Table Objects 738
Table Layers 742
Captions 744
Table Cell Borders 745
Separated Cell Borders 746
Collapsing Cell Borders 749
Table Sizing 754
Width 755
Height 761
Alignment 762
Summary 766
Lists 767
Types of Lists 768
List Item Images 771
List-Marker Positions 774
List Styles in Shorthand 775
List Layout 776
Generated Content 779
Inserting Generated Content 780
Specifying Content 783
Counters 788
Defining Counting Patterns 796
Fixed Counting Patterns 798
Cyclic Counting Patterns 800
Symbolic Counting Patterns 803
Alphabetic Counting Patterns 806
Numeric Counting Patterns 807
Additive Counting Patterns 812
Extending Counting Patterns 814
Speaking Counting Patterns 815
Summary 817
Coordinate Systems 819
Transforming 823
The Transform Functions 827
More Transform Properties 841
Moving the Origin 842
Choosing a 3D Style 845
Changing Perspective 847
Dealing with Backfaces 852
Summary 854
CSS Transitions 855
Transition Properties 857
Limiting Transition Effects by Property 861
Setting Transition Duration 867
Altering the Internal Timing of Transitions 869
Delaying Transitions 875
The transition Shorthand 878
In Reverse: Transitioning Back to Baseline 880
Animatable Properties and Values 884
How Property Values Are Interpolated 885
Fallbacks: Transitions Are Enhancements 888
Printing Transitions 889
Defining Keyframes 892
Setting Up Keyframe Animations 893
Naming Your Animation 894
Keyframe Selectors 894
Omitting from and to Values 895
Repeating Keyframe Properties 897
Animatable Properties 897
Nonanimatable Properties That Aren’t Ignored 899
Scripting @keyframes Animations 899
Animating Elements 900
Naming Animations 901
Defining Animation Lengths 904
Declaring Animation Iterations 905
Setting an Animation Direction 907
Delaying Animations 909
Animation Events 911
Changing the Internal Timing of Animations 920
Setting the Animation Play State 932
Animation Fill Modes 933
Bringing It All Together 935
Animation, Specificity, and Precedence Order 939
Specificity and !important 939
Animation Order 939
Animation Iteration and display: none; 940
Animation and the UI Thread 940
Seizure and Vestibular Disorders 941
Animation Events and Prefixing 942
animationstart 942
animationend 942
animationiteration 943
Printing Animations 943
CSS Filters 945
Basic Filters 946
Color Filtering 948
Brightness, Contrast, and Saturation 949
SVG Filters 951
Compositing and Blending 952
Blending Elements 952
Darken, Lighten, Difference, and Exclusion 953
Multiply, Screen, and Overlay 955
Hard and Soft Light 956
Color Dodge and Burn 957
Hue, Saturation, Luminosity, and Color 959
Blending Backgrounds 960
Blending in Isolation 963
Clipping and Masking 964
Clipping 965
Clip Shapes 966
Clip Boxes 967
Clip Filling Rules 970
Masks 971
Defining a Mask 972
Changing the Mask’s Mode 974
Sizing and Repeating Masks 976
Positioning Masks 979
Clipping and Compositing Masks 980
Bringing It All Together 984
Mask Types 985
Border-image Masking 986
Object Fitting and Positioning 987
Defining Media-Dependent Styles 991
Basic Media Queries 991
Complex Media Queries 994
Paged Media 1002
Print Styles 1002
Summary 1016
A. Animatable Properties 1017
B. Basic Property Reference 1025
C. Color Equivalence Table 1035
Index 1039
Preface
If you are a web designer or document author interested in sophisticated page styling, improved accessibility, and saving time and effort, this book is for you. All you really need to know before starting the book is HTML 4.0. The better you know HTML, the better prepared you’ll be, but it is not a requirement. You will need to know very little else to follow this book. This fourth edition of the book was finished in mid-2017 and does its best to reflect the state of CSS at that time. The assumption is that anything covered in detail either had wide browser support at the time of writing or was known to be coming soon after publication. CSS features which were still being developed, or were known to have support dropping soon, are not covered here.
Cascading Style Sheets (CSS) is a powerful tool that transforms the presentation of a document or a collection of documents, and it has spread to nearly every corner of the web and into many ostensibly non-web environments. For example, Gecko-based browsers use CSS to affect the presentation of the browser chrome itself, many RSS clients let you apply CSS to feeds and feed entries, and some instant message clients use CSS to format chat windows. Aspects of CSS can be found in the syntax used by JavaScript frameworks, and even in JavaScript itself. It’s everywhere!
A Brief History of (Web) Style CSS was first proposed in 1994, just as the web was beginning to really catch on. At the time, browsers gave all sorts of styling power to the user—the presentation preferences in Mosaic, for example, permitted all manner of font family, size, and color to be defined by the user on a per-element basis. None of this was available to document authors; all they could do was mark a piece of content as a paragraph, as a heading of some level, as preformatted text, or one of a handful of other element types. If a user configured his browser to make all level-one headings tiny and pink and all level-six headings huge and red, well, that was his lookout.
It was into this milieu that CSS was introduced. Its goal was to provide a simple, declarative styling language that was flexible for authors and, most importantly, provided styling power to authors and users alike. By means of the “cascade,” these styles could be combined and prioritized so that both authors and readers had a say though readers always had the last say.
Work quickly advanced, and by late 1996, CSS1 was finished. While the newly established CSS Working Group moved forward with CSS2, browsers struggled to implement CSS1 in an interoperable way. Although each piece of CSS was fairly simple on its own, the combination of those pieces created some surprisingly complex behaviors.
There were also some unfortunate missteps in early implementations, such as the infamous discrepancy in box model implementations. These problems threatened to derail CSS altogether, but fortunately some clever proposals were implemented, and browsers began to harmonize. Within a few years, thanks to increasing interoperability and high-profile developments such as the CSS-based redesign of Wired magazine and the CSS Zen Garden, CSS began to catch on. Before all that happened, though, the CSS Working Group had finalized the CSS2 specification in early 1998. Once CSS2 was finished, work immediately began on CSS3, as well as a clarified version of CSS2 called CSS2.1. In keeping with the spirit of the times, CSS3 was constructed as a series of (theoretically) standalone modules instead of a single monolithic specification. This approach reflected the then-active XHTML specification, which was split into modules for similar reasons. The rationale for modularizing CSS3 was that each module could be worked on at its own pace, and particularly critical (or popular) modules could be advanced along the W3C’s progress track without being held up by others. Indeed, this has turned out to be the case. By early 2012, three CSS3 modules (along with CSS1 and CSS 2.1) had reached full Recommendation status—CSS Color Level 3, CSS Namespaces, and Selectors Level 3. At that same time, seven modules were at Candidate Recommendation status, and several dozen others were in various stages of Working Draft-ness. Under the old approach, colors, selectors, and namespaces would have had to wait for every other part of the specification to be done or cut before they could be part of a completed specification. Thanks to modularization, they didn’t have to wait.
The flip side of that advantage is that it’s hard to speak of a single “CSS3 specification.” There isn’t any such thing, nor can there be. Even if every other CSS module had reached level 3 by, say, late 2016 (they didn’t), there was already a Selectors Level 4 in process. Would we then speak of it as CSS4? What about all the “CSS3” features still coming into play? Or Grid Layout, which had not then even reached Level 1? So while we can’t really point to a single tome and say, “There is CSS3,” we can talk of features by the module name under which they are introduced. The flexibility modules permit more than makes up for the semantic awkwardness they sometimes create. (If you want something approximating a single monolithic specification, the CSS Working Group publishes yearly “Snapshot” documents.) With that established, we’re almost ready to start understanding CSS. First though, we must go over markup.
Elements
Elements are the basis of document structure. In HTML, the most common elements are easily recognizable, such as p, table, span, a, and div. Every single element in a document plays a part in its presentation. Replaced and Nonreplaced Elements Although CSS depends on elements, not all elements are created equally. For example, images and paragraphs are not the same type of element, nor are span and div. In CSS, elements generally take two forms: replaced and nonreplaced.
Replaced elements
Replaced elements are those where the element’s content is replaced by something that is not directly represented by document content. Probably the most familiar HTML example is the img element, which is replaced by an image file external to the document itself. In fact, img has no actual content, as you can see in this simple example:
<img src="/howdy.gif" >
This markup fragment contains only an element name and an attribute. The element presents nothing unless you point it to some external content (in this case, an image specified by the src attribute). If you point to a valid image file, the image will be placed in the document. If not, it will either display nothing or the browser will show a “broken image” placeholder. Similarly, the input element is also replaced—by a radio button, checkbox, or text input box, depending on its type.
Nonreplaced elements
The majority of HTML elements are nonreplaced elements. This means that their content is presented by the user agent (generally a browser) inside a box generated by the element itself. For example, <span>hi there</span> is a nonreplaced element, and the text “hi there” will be displayed by the user agent. This is true of paragraphs, headings, table cells, lists, and almost everything else in HTML.
