Mastering CSS : A Beginner's Guide

Cascading Style Sheets (CSS) is an open-source programming language used in website building and HTML templates that integrates all relevant information related to web page displays. CSS is used to format the look and structure of a web page, as well as to set design features such as basic layout, colors, and fonts. CSS allows for continuity between different web pages on the website and makes webpage development easier and faster. This book has been created to help readers understand and learn the concepts of CSS. It discusses the fundamental concepts of CSS, including its properties and functions, and guides the reader through creating websites with it. Key Features: Examines the fundamentals of CSS, values, selectors, and queries Discusses its application in modern web development to help readers to quickly advance the necessary information Explores animations, grids, flexboxes, masking, filtering, and compositing using CSS Mastering CSS is a valuable resource for anyone who wants to create a website. After finishing this book, readers will quickly build their website with absolute ease, even if they were utterly oblivious to it before. Cascading Style Sheets (CSS) is an open-source programming language used in website building and HTML templates that integrates all relevant information related to web page displays. CSS is used to format the look and structure of a web page, as well as to set design features such as basic layout, colors, and fonts. CSS allows for continuity between different web pages on the website and makes webpage development easier and faster. This book has been created to help readers understand and learn the concepts of CSS. It discusses the fundamental concepts of CSS, including its properties and functions, and guides the reader through creating websites with it. Key Features: • Examines the fundamentals of CSS, values, selectors, and queries • Discusses its application in modern web development to help readers to quickly advance the necessary information • Explores animations, grids, flexboxes, masking, filtering, and compositing using CSS Cover 1 Half Title 2 Series Page 3 Title Page 4 Copyright Page 5 Dedication 6 Contents 8 About the Editor 16 Acknowledgments 17 Zeba Academy – Mastering Computer Science 18 CHAPTER 1: CSS: Introduction 20 INTRODUCTION 20 HISTORY 21 WHY DO WE NEED CSS? 22 WHY DO WE USE CSS? 22 DIFFERENT VERSION OF CSS 23 MAJOR DIFFERENCES BETWEEN CSS, CSS2, AND CSS3 23 CSS SPECIFICATION 24 CSS MODULES 24 BASIC HTML 25 Head Section 25 Body Section 26 STARTING WITH A SPECIFIC HTML 28 LINKING YOUR HTML AND CSS FILES 28 HOW CSS AND HTML WORK TOGETHER 29 HOW DOES CSS WORK? 30 CSS SYNTAX 30 INHERITANCE CSS 31 COMMENT TAGS 32 DIFFERENT TYPES OF CSS YOU CAN USE 33 CSS CLASSES 38 CSS IDs 39 WHAT IS THE DIFFERENCE BETWEEN ID AND CLASS? 39 CSS DIVISION 40 HOW TO USE CSS PROPERTIES 40 CSS COLORS 41 Names 41 List of Color Values 42 RGB COLOR 43 How to Use RGB Colors in HTML 44 Extended Color Keywords 46 DIFFERENT TYPES OF SELECTORS 49 Selector Name 49 CSS BACKGROUND 50 MULTIPLE BACKGROUNDS 51 CSS BORDER 52 Border 52 CSS BORDER WIDTH AND COLOR 53 CSS MARGINS 53 CSS PADDING 54 CSS BOX MODEL 54 CSS TABLES 55 CSS FONTS 55 CSS TEXT 56 CSS FUNCTIONS 56 WHY FLEXBOX? 59 CSS FLEXBOX 59 CSS MEDIA TYPES 60 INTRODUCTION TO MEDIA TYPES 60 METHOD 1: USING @MEDIA AT-RULES 60 METHOD 2: USING @IMPORT AT-RULES 61 METHOD 3: USING THE ELEMENT 61 DIFFERENT MEDIA TYPES 61 MEDIA QUESTIONS AND RESPONSIVE WEB DESIGN 62 MEDIA QUERIES 62 BENEFITS YOU MAY KNOW 63 CSS CONS 64 CHAPTER SUMMARY 65 CHAPTER 2: CSS Properties 66 CSS LAYOUTS (PROPERTIES) 69 CSS RULES 70 THE @KEYFRAMES RULE 73 CSS BACKGROUND PROPERTIES 79 CSS BORDER PROPERTIES 91 CSS COLOR PROPERTIES 106 RGB Colors 107 RGBA Colors 108 CSS HEX Colors 110 CSS DIMENSION PROPERTIES 113 CSS GENERATED CONTENT PROPERTIES 118 CSS FLEXIBLE BOX LAYOUT 122 CSS FONT PROPERTIES 125 CSS LIST PROPERTIES 129 CSS MARGIN PROPERTIES 135 CSS MULTI-COLUMN LAYOUT PROPERTIES 139 CSS OUTLINE PROPERTIES 153 CSS PADDING 158 CSS PRINT PROPERTIES 161 CSS TABLE PROPERTIES 163 CSS TEXT PROPERTIES 173 CSS TRANSFORM PROPERTIES 183 2D Transform Functions 183 3D Transform Functions 188 CSS TRANSITIONS PROPERTIES 192 CHAPTER SUMMARY 194 CHAPTER 3: CSS Selectors 196 INTRODUCTION 196 UNIVERSAL SELECTOR (*) 198 UNIVERSAL SELECTOR (elements ) 199 LOGICAL COMBINATIONS SELECTORS 200 LOGICAL COMBINATIONS SELECTORS ( :not ) 200 ATTRIBUTE SELECTORS 202 ATTRIBUTE SELECTORS ( .classname ) 202 ATTRIBUTE SELECTORS ( id) 203 ATTRIBUTE SELECTORS ([]) 205 ATTRIBUTE SELECTORS ( [attr=“value”] ) 206 ATTRIBUTE SELECTORS ( [attr=“value”] case-sensitive) 208 ATTRIBUTE SELECTORS ([foo~=“bar”]) 209 ATTRIBUTE SELECTORS ( [ foo^=”bar” ] ) 211 ATTRIBUTE SELECTORS ( [ foo$=“bar” ] ) 212 ATTRIBUTE SELECTORS ( [ foo*=“bar” ] ) 214 ATTRIBUTE SELECTORS ( [ foo|=“bar” ] ) 217 PSEUDO-CLASSES 218 PSEUDO-CLASSES (:dir(ltr) or :dir(rtl)) 218 PSEUDO-CLASSES (:any-link) 220 PSEUDO-CLASSES (:link) 222 PSEUDO-CLASSES (:target) 224 PSEUDO-CLASSES (:scope) 226 PSEUDO-CLASSES (:target) 227 PSEUDO-CLASSES (:hover) 229 PSEUDO-CLASSES (:focus) 231 PSEUDO-CLASSES (:enabled and :disabled) 233 PSEUDO-CLASSES (:read-only and :read-write) 234 PSEUDO-CLASSES (:placeholder-shown) 237 PSEUDO-CLASSES (:default) 238 PSEUDO-CLASSES (:checked) 240 PSEUDO-CLASSES (:indeterminate) 242 PSEUDO-CLASSES (:valid and :invalid) 244 PSEUDO-CLASSES (:in-range and :out-of-range) 246 PSEUDO-CLASSES (:required) 248 PSEUDO-CLASSES (:optional) 249 PSEUDO-CLASSES ( :root) 251 PSEUDO-CLASSES (:empty) 252 PSEUDO-CLASSES (:blank) 253 PSEUDO-CLASSES (:nth-child) 255 PSEUDO-CLASSES (:nth-last-child) 256 PSEUDO-CLASSES (:first-child) 258 PSEUDO-CLASSES (:only-child) 259 PSEUDO-CLASSES (:nth-of-type(odd) 260 PSEUDO-CLASSES (:nth-of-type(odd or even) 262 PSEUDO-CLASSES (:first-of-type, nth-of-type, nth-last-of-type(3)) 263 COMBINATORS SELECTORS 265 SELECTORSCOMBINATORS SELECTORS (E F) 265 COMBINATORS SELECTORS (E > F) 267 COMBINATORS SELECTORS (E + F) 269 GENERAL SIBLING SELECTOR (~) 271 GRID-STRUCTURAL SELECTORS (:nth-col()) 273 CHAPTER SUMMARY 275 CHAPTER 4: CSS Functions 276 INTRODUCTION 276 BASICS OF CSS FUNCTIONS 277 attr() 277 Usage of attr() 278 blur() 281 brightness() 283 calc() 285 circle() 287 How to Position the Circle 287 contrast() 294 counter() 296 counters() 298 cubic-bezier() 302 drop-shadow() 303 ellipse() 306 filter() 312 grayscale() 314 hsl() 317 How to Pick a Color 318 hsla() 320 hue-rotate() 324 How Does Hue Rotation Work? 324 inset() 326 linear-gradient() 329 How to Set the Angle of a Gradient 329 matrix() 332 matrix3d() 335 opacity() 337 perspective() 340 radial-gradient() 342 repeating-linear-gradient() 345 repeating-radial-gradient() 349 rgb() 354 rotate() 358 rotate3d() 362 rotateX() 365 rotateY() 366 rotateZ() 366 saturate() 371 scale() 373 scale3d() 376 scaleX() 378 scaleY() 380 scaleZ() 383 skew() 386 skewX() 390 CHAPTER SUMMARY 392 CHAPTER 5: CSS Plugins 394 VARIOUS CSS PLUGINS PostCSS BASED 395 AUTOPREFIXER 395 Write Pure CSS 396 Installing Autoprefixer in Your Project Folder 397 When Does It Run? 400 What is the Difference Between Autoprefixer and -Prefix-Free? 401 CSSnext 401 CSSnano 403 Installing PostCSS, the PostCSS-CLI, cssnext, and cssnano 403 Using the PostCSS-CLI 403 npm Script 404 PreCSS 404 Usage 405 Other Various Plugins 405 Various Options 406 Install Plugin 408 preserveEmpty 410 STYLELINT 410 Installing Stylelint 410 Usage 410 PostCSS ASSETS 411 Gulp (gulp-postcss) 411 Basic 411 Grunt 412 FONT MAGICIAN 413 LOST GRID 414 PostCSS 417 Features 417 POSTCSS-MODULES ( CSS MODULES ) 418 Naming (localsConvention) 419 Features 419 CSS MarqueeMenu PLUGIN 419 CHAPTER SUMMARY 429 APPRAISAL 430 BIBLIOGRAPHY 436 INDEX 440 Programming;,CSS,Plugins;,Coding;,CSS Programming,CSS Plugins,Coding,CSS "The book is a detailed guide for beginners to understand CSS with full-fledged introduction to web page and design to create a website. This book will teach you new features that can aid in the development and extension of your CSS skills. This book also explores animations, grids, flexboxes, masking, filtering, and compositing using CSS"-- Provided by publisher