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 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