Mastering CSS: A Beginner's Guide

Description

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. Cover Half Title Series Page Title Page Copyright Page Dedication Contents About the Editor Acknowledgments Zeba Academy – Mastering Computer Science CHAPTER 1: CSS: Introduction INTRODUCTION HISTORY WHY DO WE NEED CSS? WHY DO WE USE CSS? DIFFERENT VERSION OF CSS MAJOR DIFFERENCES BETWEEN CSS, CSS2, AND CSS3 CSS SPECIFICATION CSS MODULES BASIC HTML Head Section Body Section STARTING WITH A SPECIFIC HTML LINKING YOUR HTML AND CSS FILES HOW CSS AND HTML WORK TOGETHER HOW DOES CSS WORK? CSS SYNTAX INHERITANCE CSS COMMENT TAGS DIFFERENT TYPES OF CSS YOU CAN USE CSS CLASSES CSS IDs WHAT IS THE DIFFERENCE BETWEEN ID AND CLASS? CSS DIVISION HOW TO USE CSS PROPERTIES CSS COLORS Names List of Color Values RGB COLOR How to Use RGB Colors in HTML Extended Color Keywords DIFFERENT TYPES OF SELECTORS Selector Name CSS BACKGROUND MULTIPLE BACKGROUNDS CSS BORDER Border CSS BORDER WIDTH AND COLOR CSS MARGINS CSS PADDING CSS BOX MODEL CSS TABLES CSS FONTS CSS TEXT CSS FUNCTIONS WHY FLEXBOX? CSS FLEXBOX CSS MEDIA TYPES INTRODUCTION TO MEDIA TYPES METHOD 1: USING @MEDIA AT-RULES METHOD 2: USING @IMPORT AT-RULES METHOD 3: USING THE ELEMENT DIFFERENT MEDIA TYPES MEDIA QUESTIONS AND RESPONSIVE WEB DESIGN MEDIA QUERIES BENEFITS YOU MAY KNOW CSS CONS CHAPTER SUMMARY CHAPTER 2: CSS Properties CSS LAYOUTS (PROPERTIES) CSS RULES THE @KEYFRAMES RULE CSS BACKGROUND PROPERTIES CSS BORDER PROPERTIES CSS COLOR PROPERTIES RGB Colors RGBA Colors CSS HEX Colors CSS DIMENSION PROPERTIES CSS GENERATED CONTENT PROPERTIES CSS FLEXIBLE BOX LAYOUT CSS FONT PROPERTIES CSS LIST PROPERTIES CSS MARGIN PROPERTIES CSS MULTI-COLUMN LAYOUT PROPERTIES CSS OUTLINE PROPERTIES CSS PADDING CSS PRINT PROPERTIES CSS TABLE PROPERTIES CSS TEXT PROPERTIES CSS TRANSFORM PROPERTIES 2D Transform Functions 3D Transform Functions CSS TRANSITIONS PROPERTIES CHAPTER SUMMARY CHAPTER 3: CSS Selectors INTRODUCTION UNIVERSAL SELECTOR (*) UNIVERSAL SELECTOR (elements ) LOGICAL COMBINATIONS SELECTORS LOGICAL COMBINATIONS SELECTORS ( :not ) ATTRIBUTE SELECTORS ATTRIBUTE SELECTORS ( .classname ) ATTRIBUTE SELECTORS ( id) ATTRIBUTE SELECTORS ([]) ATTRIBUTE SELECTORS ( [attr=“value”] ) ATTRIBUTE SELECTORS ( [attr=“value”] case-sensitive) ATTRIBUTE SELECTORS ([foo~=“bar”]) ATTRIBUTE SELECTORS ( [ foo^=”bar” ] ) ATTRIBUTE SELECTORS ( [ foo$=“bar” ] ) ATTRIBUTE SELECTORS ( [ foo*=“bar” ] ) ATTRIBUTE SELECTORS ( [ foo|=“bar” ] ) PSEUDO-CLASSES PSEUDO-CLASSES (:dir(ltr) or :dir(rtl)) PSEUDO-CLASSES (:any-link) PSEUDO-CLASSES (:link) PSEUDO-CLASSES (:target) PSEUDO-CLASSES (:scope) PSEUDO-CLASSES (:target) PSEUDO-CLASSES (:hover) PSEUDO-CLASSES (:focus) PSEUDO-CLASSES (:enabled and :disabled) PSEUDO-CLASSES (:read-only and :read-write) PSEUDO-CLASSES (:placeholder-shown) PSEUDO-CLASSES (:default) PSEUDO-CLASSES (:checked) PSEUDO-CLASSES (:indeterminate) PSEUDO-CLASSES (:valid and :invalid) PSEUDO-CLASSES (:in-range and :out-of-range) PSEUDO-CLASSES (:required) PSEUDO-CLASSES (:optional) PSEUDO-CLASSES ( :root) PSEUDO-CLASSES (:empty) PSEUDO-CLASSES (:blank) PSEUDO-CLASSES (:nth-child) PSEUDO-CLASSES (:nth-last-child) PSEUDO-CLASSES (:first-child) PSEUDO-CLASSES (:only-child) PSEUDO-CLASSES (:nth-of-type(odd) PSEUDO-CLASSES (:nth-of-type(odd or even) PSEUDO-CLASSES (:first-of-type, nth-of-type, nth-last-of-type(3)) COMBINATORS SELECTORS SELECTORSCOMBINATORS SELECTORS (E F) COMBINATORS SELECTORS (E > F) COMBINATORS SELECTORS (E + F) GENERAL SIBLING SELECTOR (~) GRID-STRUCTURAL SELECTORS (:nth-col()) CHAPTER SUMMARY CHAPTER 4: CSS Functions INTRODUCTION BASICS OF CSS FUNCTIONS attr() Usage of attr() blur() brightness() calc() circle() How to Position the Circle contrast() counter() counters() cubic-bezier() drop-shadow() ellipse() filter() grayscale() hsl() How to Pick a Color hsla() hue-rotate() How Does Hue Rotation Work? inset() linear-gradient() How to Set the Angle of a Gradient matrix() matrix3d() opacity() perspective() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() rgb() rotate() rotate3d() rotateX() rotateY() rotateZ() saturate() scale() scale3d() scaleX() scaleY() scaleZ() skew() skewX() CHAPTER SUMMARY CHAPTER 5: CSS Plugins VARIOUS CSS PLUGINS PostCSS BASED AUTOPREFIXER Write Pure CSS Installing Autoprefixer in Your Project Folder When Does It Run? What is the Difference Between Autoprefixer and -Prefix-Free? CSSnext CSSnano Installing PostCSS, the PostCSS-CLI, cssnext, and cssnano Using the PostCSS-CLI npm Script PreCSS Usage Other Various Plugins Various Options Install Plugin preserveEmpty STYLELINT Installing Stylelint Usage PostCSS ASSETS Gulp (gulp-postcss) Basic Grunt FONT MAGICIAN LOST GRID PostCSS Features POSTCSS-MODULES ( CSS MODULES ) Naming (localsConvention) Features CSS MarqueeMenu PLUGIN CHAPTER SUMMARY APPRAISAL BIBLIOGRAPHY INDEX