Mastering CSS: A Beginner's Guide (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

COMBINATORS 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