Mastering CSS: A Beginner's Guide (Mastering Computer Science)

✍ Scribed by Sufyan bin Uzayr

• Publisher: Taylor & Francis Group
• Year: 2023
• Tongue: English
• Leaves: 446
• 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

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 <link> 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