Jump Start CSS : Get Up to Speed With CSS in a Weekend

This short SitePoint book provides readers with a fun and yet practical introduction to Cascading Style Sheets (CSS), the language used to style and lay out all web pages. This book will quickly get you up to speed with the fundamentals of CSS and give you the confidence to start experimenting on your own. It covers: * Layout techniques * Images, backgrounds, text * Styling forms , navigation, and more * Getting fancy with CSS3 The book is built around a real-life example project: a recipe website design. It's a fun and easily understandable project that is used to demonstrate the concepts outlined in the book in a practical way. This is a clear, approachable and very easy-to-follow book that will get you to to speed with CSS in no time. Jump Start CSS 1 Table of Contents 5 Preface 11 Who Should Read This Book 11 Conventions Used 11 Code Samples 11 Tips, Notes, and Warnings 13 Supplementary Materials 13 Want to take your learning further? 13 Acknowledgments 14 An Introduction to CSS 15 The Sample Project 15 How are web pages built? 16 What Is CSS? 17 How do I include CSS in a web page? 18 Using Inline Styles 18 Using the Element 18 Using @import inside a element 19 The Best Way: Using the Element 19 Introducing CSS Selectors 20 Universal Selector 20 Element Type Selector 20 ID Selector 21 Class Selector 22 Descendant Combinator 23 Child Combinator 24 General Sibling Combinator 25 Adjacent Sibling Combinator 25 Attribute Selector 26 Pseudo-class 27 Pseudo-element 28 Using Multiple Selectors 28 The Cascade and Specificity 29 Always Use Standards Mode 32 A Skeleton for Our Sample Website 33 Summary 37 Layout Techniques 39 The Box Model 39 Block versus Inline 41 Shorthand versus Longhand CSS 43 Float-based Layouts 46 Clearing Floats 50 Positioning in CSS 53 Absolute and Relative Positioning 54 What about Responsive Web Design? 57 Using box-sizing for Intuitive Sizing 58 Adding More Layout Styles 60 Floating the “Latest Recipes” Images 61 Layout Styles for the Header 64 Laying out the Promo Photo 66 Laying out the Footer 68 Laying out the “Most Popular” Recipes 70 What’s the future of CSS Layouts? 71 Flexbox 72 Other New Layout Features 72 Summary 73 Backgrounds, Borders, and More 75 Backgrounds 76 Borders 79 Rounded Corners 81 Values and Units 83 Px Units 83 Em Units 84 Rem Units 85 Percentages 87 Integers 88 Keywords 88 Color Values 89 Transparency 90 The Opacity Property 91 RGBA and HSLA Colors 92 Opacity versus Color-based Transparency 95 Other Values 95 Adding Shadows to Elements 96 Adding a Shadow to the Header 96 Adding a Shadow below the Promo Image 98 Adding Shadows to Small Images 99 Adding Shadows to Buttons 99 Adding the Divider Shadow 102 What about text shadows? 103 Summary 104 Links, Text, and Custom Fonts 105 Styling Links and Text 106 Changing Link Color 108 Using Custom Web Fonts 111 Using @font-face 113 Including the Different Font Files 114 Generating the Font Files 116 @font-face Review 122 Using Our New Fonts on RecipeFinder 123 Cleaning Things Up 126 Styling the Footer Section 131 The line-height Property 132 Adding Styles to Text in the Sidebar 134 Summary 136 Getting Fancy 137 Hover Effects 138 Transitions 141 Multiple Transitions on a Single Element 143 Vendor Prefixes 144 Transforms 145 translate 145 scale 146 rotate 146 skew 146 Multiple Transforms on a Single Element 147 Defining the Origin of a Transform 147 Combining Transitions and Transforms 148 Linear Gradients 150 Positions for Color Stops 152 Changing a Linear Gradient's Direction 153 Adding Multiple Gradients on a Single Element 154 Adding More Linear Gradients 154 Radial Gradients 157 More Options for Radial Gradients 158 Keyframe Animations 160 Graceful Degradation and Page Performance 165 Other Cutting-edge Features 165 Making RecipeFinder Responsive 166 min- and max- Dimensions 166 Converting Pixels to Percentages 167 Fixing the Size of Images 169 Adding Media Queries 171 Adding the Viewport Meta Tag 171 Summary 174 Debugging Your CSS 175 Understand How CSS “Errors” Work 176 CSS Comments 178 Validating CSS 180 CSS Hacks 182 Reduced Test Cases 182 Get Help Online 183 Use Online Coding Tools 184 Test Your Layout Early in Multiple Browsers 184 Use Developer Tools and a Good Text Editor 185 Summary 189 www.it-ebooks.info IT eBooks Annotation This short SitePoint book provides readers with a fun and yet practical introduction to Cascading Style Sheets (CSS), the language used to style and lay out all web pages. This book will quickly get you up to speed with the fundamentals of CSS and give you the confidence to start experimenting on your own. It covers: Layout techniques Images, backgrounds, text Navigation Getting fancy with CSS3 The book is built around a real-life example project: a recipe website design. It's a fun and easily understandable project that is used to demonstrate the concepts outlined in the book in a practical way. This is a clear, approachable and very easy-to-follow book that will get you to to speed with CSS in no time