CSS3 Foundations

Introduction 3

Who Should Read This Book? 1

What You Will Learn 1

How to Use This Book 2

Using This Book with Treehouse 2

Part 1: Introduction

Chapter one Understanding CSS and the Modern Web 5

What Is the Modern Web? 5

What Is CSS? 6

The Role of CSS 6

Modern Browsers 10

Today's Major Browsers 10

Browser Engines (Layout Engines) 11

Browser Usage Statistics 12

Older Browsers on the Modern Web 12

Tools for Building and Styling the Modern Web 15

Web Developer Tools 15

Text Editors 17

Summary 18

Chapter Two Getting Started 19

Getting Started with the Project Files 20

Downloading the Project Files 20

Folder Structure and Good Practices 20

Understanding the HTML Template 22

Getting Started with CSS 30

Adding CSS to a Page 30

Using Media Types 31

Inline Styles 32

User Agent Stylesheets 33

Using a CSS Reset for Better Browser Consistency 34

Summary 38

Part 2: Learning CSS Syntax and Adding Presentational Styles

Chapter Three Mastering The Power of CSS Selectors 41

Writing Your First Styles 41

Inheritance and the Relationship Between Elements 44

Selectors 45

Universal Selector 45

Type Selector 45

ID and Class Selectors 46

Grouping Selectors 47

Combinators 48

Descendant Combinators 48

Child Combinators 49

Sibling Combinators 49

Attribute Selectors 50

Selecting Elements with an Attribute, Regardless of Its Value 51

Selecting Elements with Multiple Attributes 51

Other Attribute Selectors 51

Pseudo-Classes 52

Dynamic Pseudo-Classes 52

Structural Pseudo-Classes 53

The Target Pseudo-Class 56

The UI Element States Pseudo-Classes 56

The Language Pseudo-Class 57

The Negation Pseudo-Class 57

Pseudo-Elements 58

Selecting the First Line 58

Selecting the First Letter 58

Generating Content Before and After an Element 59

Selector Specificity and the Cascade 60

The !important Rule 61

Summary 62

Chapter Four Creating Styles Using Property Values 63

Color Keywords 63

Color Values 64

RGB (Hexadecimal) 64

RGB (Integer Range) 67

RGBA 67

HSL and HSLA 68

Code Challenge: Add More Colors to the Page 69

Units 69

Percentages 70

Units of Length 70

Absolute Units 70

Relative Units 71

Other Units 75

Summary 76

Chapter Five Adding Presentational Styles 77

Using Experimental Properties Safely 79

Borders 81

border-color 81

border-style 82

border-width 83

border (Shorthand) 83

border-radius 84

Border Images 86

border-image-source 86

border-image-slice 87

border-image-width 88

border-image-repeat 88

border-image-outset 89

border-image (Shorthand) 90

box-shadow 91

Code Challenge: Add More Border and Box Shadow Styles 93

Backgrounds 93

background-color 93

background-image 94

background-repeat 96

background-position 97

background-attachment 98

Applying Multiple Background Images 98

Background Gradients 99

Linear Gradients 100

background-clip 102

background-origin 104

background-size 105

background (Shorthand) 106

CSS Image Replacement 107

Code Challenge: Add More Background Properties 108

opacity 108

visibility 109

cursor 111

outline (Shorthand) 111

content 112

Summary 113

Part 3: Building a Solid and Adaptable Page Structure

Chapter Six Creating A Basic Page Structure 117

Structure Types 117

Fluid 118

Fixed 118

Hybrid Layout for Responsive Design 120

Fluid Images 121

Adaptive Design 123

Mobile First Design 125

Summary 125

Chapter Seven Creating Space and Understanding the Box Model 127

The Box Model 127

Using Web Developer Tools to Better Understand the Box Model 129

margin 130

Code Challenge: Add More Margins to Elements 131

padding 132

Code Challenge: Add More Padding to Elements 133

The Pitfall of the Box Model and Working Around It 134

box-sizing 136

Summary 139

Chapter Eight Creating a Multicolumn Layout 141

float 142

clear 143

Floating Multicolumns 145

Code Challenge: Make the Footer Elements Float Side by Side 152

Summary 152

Chapter Nine Understanding Display, Position, and Document Flow 153

Document Flow 153

display 155

block 155

Code Challenge: Make the Newsletter Labels Block-level 156

inline 157

inline-block 159

list-item 161

Displaying Tables 161

none 161

position, top, right, bottom, and left 162

static 162

relative 162

absolute 164

fixed 167

Code Challenge: Change the Position of the Quotes Around the Customer Testimonials Without Affecting the Flow 168

Using display, position, and z-index to Create a Drop-Down Menu 169

z-index 173

Code Challenge: Apply z-index to Other Elements 174

vertical-align and Vertical Centering Techniques 175

vertical-align 175

Vertical Centering Techniques 177

The Fake Table Cells Technique 177

The Stretched Element Technique 179

The 50% Top Minus Half the Elements Height Technique 181

overflow 183

Summary 186

Part 4: Typography

Chapter Ten Changing the Font 189

Choosing a Web Safe Font Using font-family and Font Stacks 190

font-family 191

Applying Fonts Using @font-face 192

Font Licenses and Third-Party Font Services 194

Google Web Fonts 194

Other Font Services 198

Summary 198

Chapter Eleven Styling Fonts and Text 199

Styling Fonts 199

font-style 200

font-variant 200

font-weight 201

font-size 202

Keywords 203

Percentages 203

Absolute Length Units 203

Relative Units 203

Percentages versus Ems 205

line-height 206

font (Shorthand) 207

Code Challenge: Change the Style of More Fonts 208

Styling Text 209

color 209

text-decoration 209

text-transform 210

text-shadow 211

letter-spacing 212

word-spacing 213

direction 213

text-align 213

text-indent 215

white-space 215

overflow-wrap and word-wrap 216

Code Challenge: Change the Style of Various Text Elements 217

Styling Lists 217

list-style-type 217

list-style-image 219

list-style-position 219

list-style (Shorthand) 220

Summary 220

Part 5: Taking It to the Next Level with Transforms and Animations

Chapter Twelve Adding 2D Transforms 223

Safely Using Experimental CSS3 Properties 223

transform and 2D Transform Functions 224

translate(), translateX(), and translateY() 225

rotate() 227

scale(), scaleX(), and scaleY() 228

skewX() and skewY() 228

matrix() 230

transform-origin 230

Summary 232

Chapter Thirteen Going Beyond with 3D Transforms 233

perspective 234

perspective-origin 235

transform and 3D Transform Functions 235

translateZ() and translate3d() 235

rotateX(), rotateY(), rotateZ(), and rotate3d() 239

scaleZ() and scale3d() 241

Multiple 3D Transform Functions 243

transform-style 243

backface-visibility 245

Summary 246

Chapter Fourteen Bringing Your Website to Life with Transitions and Animations 247

Animating Elements from A to B Using Transitions 247

transition-property 248

transition-duration 249

transition-timing-function 250

transition-delay 251

transition (Shorthand) 251

Making the Banner Transition Back to Its Normal State 252

Code Challenge: Make the Sidebar Sections Transition 253

Animating Elements from A to Z Using Keyframes 253

@keyframes 256

animation-name 258

animation-duration 258

animation-timing-function 259

animation-delay 260

animation-iteration-count 260

animation-direction 260

animation-play-state 261

Table of Contents xiii

animation-fill-mode 262

animation (Shorthand) 263

Creating a Cycling Image Showcase 264

Summary 267

Part 6: Preparing for Multiple Browsers and Devices

Chapter Fifteen Testing Across Multiple Browsers 271

Vendor Prefixing the Easy Way 272

Testing Modern Browsers 276

Firefox 13 and Safari 5 276

Opera 11 and 12 277

Internet Explorer 10 277

Internet Explorer 9 280

Firefox 3.6 280

Testing Older Versions of Internet Explorer 280

Internet Explorer 8 280

Conditional Comments for Internet Explorer 6, 7, and 8 283

Universal Internet Explorer 6 Stylesheet 287

Summary 288

Chapter Sixteen Making Your Website Look Great Across Multiple Devices 289

Using Opera Mobile Emulator 290

Scaling the Viewport on Mobile Devices 292

Using Media Queries 294

Using Logical Operators 295

And 295

Or 295

Not 296

Only 296

width 296

Applying Styles to Specific Media Features 296

height 298

device-width 298

device-height 299

orientation 299

aspect-ratio 299

device-aspect-ratio 299

color, color-index, monochrome, resolution, scan, and grid 300

Adding Media Queries to Cool Shoes & Socks 300

Media Queries for Mobile Devices 300

Media Queries for Tablets and Narrow-Size Desktop Browsers 307

Summary 311

Chapter Seventeen Final Steps and Conclusion 313

Final Steps 313

Removing Production Code and Preparing to Go Live 314

Testing, Testing, Testing 315

Going Live! Uploading to a Web Server 315

The Future Web 315

Index 317