Mastering CSS: A Beginner's Guide

✍ Scribed by Sufyan bin Uzayr

• Publisher: CRC Press
• Year: 2023
• Tongue: English
• Leaves: 447
• Series: master computer science
• Category: Library

✦ Synopsis

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.

✦ Table of Contents

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