Details

<p><b>Introduction 3</b></p> <p>Who Should Read This Book? 1</p> <p>What You Will Learn 1</p> <p>How to Use This Book 2</p> <p>Using This Book with Treehouse 2</p> <p><b>Part 1: Introduction</b></p> <p><b>Chapter one Understanding CSS and the Modern Web 5</b></p> <p>What Is the Modern Web? 5</p> <p>What Is CSS? 6</p> <p>The Role of CSS 6</p> <p>Modern Browsers 10</p> <p>Today’s Major Browsers 10</p> <p>Browser Engines (Layout Engines) 11</p> <p>Browser Usage Statistics 12</p> <p>Older Browsers on the Modern Web 12</p> <p>Tools for Building and Styling the Modern Web 15</p> <p>Web Developer Tools 15</p> <p>Text Editors 17</p> <p>Summary 18</p> <p><b>Chapter two Getting Started 19</b></p> <p>Getting Started with the Project Files 20</p> <p>Downloading the Project Files 20</p> <p>Folder Structure and Good Practices 20</p> <p>Understanding the HTML Template 22</p> <p>Getting Started with CSS 30</p> <p>Adding CSS to a Page 30</p> <p>Using Media Types 31</p> <p>Inline Styles 32</p> <p>User Agent Stylesheets 33</p> <p>Using a CSS Reset for Better Browser Consistency 34</p> <p>Summary 38</p> <p><b>Part 2: Learning CSS Syntax and Adding Presentational Styles</b></p> <p><b>Chapter three Mastering The Power of CSS Selectors 41</b></p> <p>Writing Your First Styles 41</p> <p>Inheritance and the Relationship Between Elements 44</p> <p>Selectors 45</p> <p>Universal Selector 45</p> <p>Type Selector 45</p> <p>ID and Class Selectors 46</p> <p>Grouping Selectors 47</p> <p>Combinators 48</p> <p>Descendant Combinators 48</p> <p>Child Combinators 49</p> <p>Sibling Combinators 49</p> <p>Attribute Selectors 50</p> <p>Selecting Elements with an Attribute, Regardless of Its Value 51</p> <p>Selecting Elements with Multiple Attributes 51</p> <p>Other Attribute Selectors 51</p> <p>Pseudo-Classes 52</p> <p>Dynamic Pseudo-Classes 52</p> <p>Structural Pseudo-Classes 53</p> <p>The Target Pseudo-Class 56</p> <p>The UI Element States Pseudo-Classes 56</p> <p>The Language Pseudo-Class 57</p> <p>The Negation Pseudo-Class 57</p> <p>Pseudo-Elements 58</p> <p>Selecting the First Line 58</p> <p>Selecting the First Letter 58</p> <p>Generating Content Before and After an Element 59</p> <p>Selector Specificity and the Cascade 60</p> <p>The !important Rule 61</p> <p>Summary 62</p> <p><b>Chapter four Creating Styles Using Property Values 63</b></p> <p>Color Keywords 63</p> <p>Color Values 64</p> <p>RGB (Hexadecimal) 64</p> <p>RGB (Integer Range) 67</p> <p>RGBA 67</p> <p>HSL and HSLA 68</p> <p>Code Challenge: Add More Colors to the Page 69</p> <p>Units 69</p> <p>Percentages 70</p> <p>Units of Length 70</p> <p>Absolute Units 70</p> <p>Relative Units 71</p> <p>Other Units 75</p> <p>Summary 76</p> <p><b>Chapter five Adding Presentational Styles 77</b></p> <p>Using Experimental Properties Safely 79</p> <p>Borders 81</p> <p>border-color 81</p> <p>border-style 82</p> <p>border-width 83</p> <p>border (Shorthand) 83</p> <p>border-radius 84</p> <p>Border Images 86</p> <p>border-image-source 86</p> <p>border-image-slice 87</p> <p>border-image-width 88</p> <p>border-image-repeat 88</p> <p>border-image-outset 89</p> <p>border-image (Shorthand) 90</p> <p>box-shadow 91</p> <p>Code Challenge: Add More Border and Box Shadow Styles 93</p> <p>Backgrounds 93</p> <p>background-color 93</p> <p>background-image 94</p> <p>background-repeat 96</p> <p>background-position 97</p> <p>background-attachment 98</p> <p>Applying Multiple Background Images 98</p> <p>Background Gradients 99</p> <p>Linear Gradients 100</p> <p>background-clip 102</p> <p>background-origin 104</p> <p>background-size 105</p> <p>background (Shorthand) 106</p> <p>CSS Image Replacement 107</p> <p>Code Challenge: Add More Background Properties 108</p> <p>opacity 108</p> <p>visibility 109</p> <p>cursor 111</p> <p>outline (Shorthand) 111</p> <p>content 112</p> <p>Summary 113</p> <p><b>Part 3: Building a Solid and Adaptable Page Structure</b></p> <p><b>Chapter six Creating A Basic Page Structure 117</b></p> <p>Structure Types 117</p> <p>Fluid 118</p> <p>Fixed 118</p> <p>Hybrid Layout for Responsive Design 120</p> <p>Fluid Images. 121</p> <p>Adaptive Design 123</p> <p>Mobile First Design 125</p> <p>Summary 125</p> <p><b>Chapter seven Creating Space and Understanding the Box Model 127</b></p> <p>The Box Model 127</p> <p>Using Web Developer Tools to Better Understand the Box Model 129</p> <p>margin. 130</p> <p>Code Challenge: Add More Margins to Elements 131</p> <p>padding. 132</p> <p>Code Challenge: Add More Padding to Elements 133</p> <p>The Pitfall of the Box Model and Working Around It 134</p> <p>box-sizing 136</p> <p>Summary 139</p> <p><b>Chapter eight Creating a Multicolumn Layout 141</b></p> <p>float 142</p> <p>clear 143</p> <p>Floating Multicolumns 145</p> <p>Code Challenge: Make the Footer Elements Float Side by Side 152</p> <p>Summary 152</p> <p><b>Chapter nine Understanding Display, Position, and Document Flow 153</b></p> <p>Document Flow 153</p> <p>display 155</p> <p>block 155</p> <p>Code Challenge: Make the Newsletter Labels Block-level 156</p> <p>inline 157</p> <p>inline-block 159</p> <p>list-item 161</p> <p>Displaying Tables 161</p> <p>none 161</p> <p>position, top, right, bottom, and left 162</p> <p>static 162</p> <p>relative 162</p> <p>absolute 164</p> <p>fixed 167</p> <p>Code Challenge: Change the Position of the Quotes Around the Customer Testimonials Without Affecting the Flow 168</p> <p>Using display, position, and z-index to Create a Drop-Down Menu. 169</p> <p>z-index 173</p> <p>Code Challenge: Apply z-index to Other Elements 174</p> <p>vertical-align and Vertical Centering Techniques 175</p> <p>vertical-align 175</p> <p>Vertical Centering Techniques 177</p> <p>The Fake Table Cells Technique 177</p> <p>The Stretched Element Technique 179</p> <p>The 50% Top Minus Half the Elements Height Technique 181</p> <p>overflow 183</p> <p>Summary 186</p> <p><b>Part 4: Typography</b></p> <p><b>Chapter ten Changing the Font 189</b></p> <p>Choosing a Web Safe Font Using font-family and Font Stacks 190</p> <p>font-family 191</p> <p>Applying Fonts Using @font-face 192</p> <p>Font Licenses and Third-Party Font Services 194</p> <p>Google Web Fonts 194</p> <p>Other Font Services 198</p> <p>Summary 198</p> <p><b>Chapter eleven Styling Fonts and Text 199</b></p> <p>Styling Fonts 199</p> <p>font-style 200</p> <p>font-variant 200</p> <p>font-weight 201</p> <p>font-size 202</p> <p>Keywords 203</p> <p>Percentages 203</p> <p>Absolute Length Units 203</p> <p>Relative Units 203</p> <p>Percentages versus Ems 205</p> <p>line-height 206</p> <p>font (Shorthand) 207</p> <p>Code Challenge: Change the Style of More Fonts 208</p> <p>Styling Text 209</p> <p>color 209</p> <p>text-decoration 209</p> <p>text-transform 210</p> <p>text-shadow 211</p> <p>letter-spacing 212</p> <p>word-spacing 213</p> <p>direction 213</p> <p>text-align 213</p> <p>text-indent 215</p> <p>white-space 215</p> <p>overflow-wrap and word-wrap 216</p> <p>Code Challenge: Change the Style of Various Text Elements 217</p> <p>Styling Lists 217</p> <p>list-style-type 217</p> <p>list-style-image 219</p> <p>list-style-position 219</p> <p>list-style (Shorthand) 220</p> <p>Summary 220</p> <p><b>Part 5: Taking It to the Next Level with Transforms and Animations</b></p> <p><b>Chapter twelve Adding 2D Transforms 223</b></p> <p>Safely Using Experimental CSS3 Properties 223</p> <p>transform and 2D Transform Functions 224</p> <p>translate(), translateX(), and translateY() 225</p> <p>rotate() 227</p> <p>scale(), scaleX(), and scaleY() 228</p> <p>skewX() and skewY() 228</p> <p>matrix() 230</p> <p>transform-origin 230</p> <p>Summary 232</p> <p><b>Chapter thirteen Going Beyond with 3D Transforms 233</b></p> <p>perspective. 234</p> <p>perspective-origin. 235</p> <p>transform and 3D Transform Functions 235</p> <p>translateZ() and translate3d() 235</p> <p>rotateX(), rotateY(), rotateZ(), and rotate3d() 239</p> <p>scaleZ() and scale3d() 241</p> <p>Multiple 3D Transform Functions 243</p> <p>transform-style 243</p> <p>backface-visibility 245</p> <p>Summary 246</p> <p><b>Chapter fourteen Bringing Your Website to Life with Transitions and Animations 247</b></p> <p>Animating Elements from A to B Using Transitions 247</p> <p>transition-property 248</p> <p>transition-duration 249</p> <p>transition-timing-function 250</p> <p>transition-delay 251</p> <p>transition (Shorthand) 251</p> <p>Making the Banner Transition Back to Its Normal State 252</p> <p>Code Challenge: Make the Sidebar Sections Transition 253</p> <p>Animating Elements from A to Z Using Keyframes 253</p> <p>@keyframes 256</p> <p>animation-name 258</p> <p>animation-duration 258</p> <p>animation-timing-function 259</p> <p>animation-delay 260</p> <p>animation-iteration-count 260</p> <p>animation-direction 260</p> <p>animation-play-state 261</p> <p>animation-fill-mode 262</p> <p>animation (Shorthand) 263</p> <p>Creating a Cycling Image Showcase 264</p> <p>Summary 267</p> <p><b>Part 6: Preparing for Multiple Browsers and Devices</b></p> <p><b>Chapter fifteen Testing Across Multiple Browsers 271</b></p> <p>Vendor Prefixing the Easy Way 272</p> <p>Testing Modern Browsers 276</p> <p>Firefox 13 and Safari 5 276</p> <p>Opera 11 and 12 277</p> <p>Internet Explorer 10 277</p> <p>Internet Explorer 9 280</p> <p>Firefox 3.6 280</p> <p>Testing Older Versions of Internet Explorer 280</p> <p>Internet Explorer 8. 280</p> <p>Conditional Comments for Internet Explorer 6, 7, and 8 283</p> <p>Universal Internet Explorer 6 Stylesheet 287</p> <p>Summary 288</p> <p><b>Chapter sixteen Making Your Website Look Great Across Multiple Devices 289</b></p> <p>Using Opera Mobile Emulator 290</p> <p>Scaling the Viewport on Mobile Devices 292</p> <p>Using Media Queries 294</p> <p>Using Logical Operators 295</p> <p>And 295</p> <p>Or 295</p> <p>Not 296</p> <p>Only 296</p> <p>width 296</p> <p>Applying Styles to Specific Media Features 296</p> <p>height 298</p> <p>device-width 298</p> <p>device-height 299</p> <p>orientation 299</p> <p>aspect-ratio 299</p> <p>device-aspect-ratio 299</p> <p>color, color-index, monochrome, resolution, scan, and grid 300</p> <p>Adding Media Queries to Cool Shoes & Socks 300</p> <p>Media Queries for Mobile Devices 300</p> <p>Media Queries for Tablets and Narrow-Size Desktop Browsers 307</p> <p>Summary 311</p> <p><b>Chapter seventeen Final Steps and Conclusion 313</b></p> <p>Final Steps 313</p> <p>Removing Production Code and Preparing to Go Live 314</p> <p>Testing, Testing, Testing 315</p> <p>Going Live! Uploading to a Web Server 315</p> <p>The Future Web 315</p> <p>Index 317</p>

<b>Ian Lunn</b> (@IanLunn) is a freelance front end developer, passionate about building the future of the web using technologies such as CSS3 and HTML5. With a Higher National Diploma in Internet Technology, Ian combines his education with expertise in CSS, HTML, JavaScript, and WordPress to build creative and effective websites and applications.<br /><br /><b>Treehouse</b> is a consortium of web and software designers and developers whose mission is to bring affordable technology education to people everywhere, in order to help them achieve their dreams and change the world. In keeping with that mission, the Treehouse Series of books are authorized by experts and loaded with innovative design ideas and practical skill -building instruction. If you're a web developer, web designer, hobbyist, or career -changer, every book in the series belongs on your bookshelf.

<p><b>TAKE YOUR WEB DESIGN AND DEVELOPMENT KNOW-HOW TO AN EXCITING NEW LEVEL</b></p> <p>Html is fun when you’re first learning how to use it to build a website. But when you add CSS (Cascading Style Sheets) to the mix, the experience—and your web pages—become magical. <i>CSS3 Foundations</i> takes you beyond the pre-fab themes and simple site-building tools found in most books, and provides you with the knowledge and tools you need to turn humdrum words and images into dazzling websites that draw visitors in and make them want to stay.</p> <p>Whether you’re a novice or an experience developer who’d like to take your skills to the next level, word-class developer Ian Lunn fills you in on all the CSS3 you need to know, including how to:</p> <ul> <li>Develop with CSS for desktop and mobile browsers</li> <li>Master CSS syntax</li> <li>Create multi-column page layouts</li> <li>Use media types and media queries</li> <li>Manipulate text and fonts</li> <li>Execute visual formatting</li> <li>Jazz up your pages with transforms</li> <li>Bring pages to life with transitions and animations</li> <li>Build cross-browser compatible websites</li> <li>Fine-tune your workflow with best practices</li> </ul> <p>Like all the books in the Treehouse series, <i>CSS3 Foundations</i> is designed to help you expand your skill set and broaden your professional horizons, whether you’re a hobbyist looking to go pro, a freelancer who wants to expand your client base, or an entrepreneur who want to know how to create a website fully customized for your company and your market niche.</p>

GB