Learn CSS : The Complete Step-by-Step Guide to Learning CSS from Scrath.

Description

This Complete CSS Tutorial is designed to take you from a beginner to an advanced level in Cascading Style Sheets (CSS), the language used to style and design web pages. Whether you are just starting or looking to refine your skills, this tutorial covers everything from the basics to complex techniques, including modern CSS features. By the end of this tutorial, you’ll be able to create visually stunning, fully responsive, and interactive web pages with CSS like a pro! 🚀

Table Of Contents

Chapter 1: CSS An Basic Introduction

• CSS: An Basic Introduction
• CSS Types : Internal, External And Inline - Uses, Advantages, Disadvantages, Priority Order

Chapter 2: Selectors and Combinators

• CSS Selectors And Its Types - Element, Universal, Class, ID, Attribute.
• CSS Combinators And Its Types - Descendant, Child, Adjacent Sibling, Subsequent Sibling

Chapter 3: Specifity

• CSS Specifity

Chapter 4: Inheritance

• CSS Inheritance - Inherited and Non-Inherited Properties
• CSS Global Keywords - Inherit, initial, unset, revert, revert layer

Chapter 5: Values and Units

• CSS Units - Absolute, Relative, Line Height, Resolution.
• Viewport Units
• CSS Function Values - calc(), min(), max(), clamp()

Chapter 6: Box Model

• CSS Box Model

Chapter 7: Spacing - Borders, Padding, Outlines, Margins

• CSS Padding
• CSS padding-top Property
• CSS Padding-right Property
• CSS Padding-left Property
• CSS Padding-bottom Property
• CSS Borders
• CSS border-width and Its Constituent Properties
• CSS border-style and Its Constituent Properties
• CSS border-color and Its Constituent Properties
• CSS Outlines
• CSS outline-width Property
• CSS outline-style Property
• CSS outline-color Property
• CSS Margin
• CSS margin-top Property
• CSS margin-right Property
• CSS margin-left Property
• CSS margin-bottom Property

Chapter 8: Colors

• CSS Colors
• CSS Named Colors
• CSS RGB Notation
• CSS Hexadecimal Notation
• CSS HSL Notation
• CSS HWB Notation

Chapter 9: Backgrounds

• Background Colors
• Background Images
• Background Repeat
• Background Size
• Background Position
• CSS background-clip Shorthand Property
• CSS background-origin Shorthand Property
• CSS background-attachment Shorthand Property
• CSS background Shorthand Property

Chapter 10: Gradients

• Linear Gradients
• Radial Gradients
• Conic Gradients

Chapter 11: Shadows

• Text Shadow
• Box Shadow

Chapter 12: Floating And Clearing

• CSS Float
• CSS Clear

Chapter 13: Positioning

• CSS Positioning And Its Types - static, relative, sticky, absolute, fixed.
• CSS top Property
• CSS left Property
• CSS right Property
• CSS bottom Property
• CSS inset Property

Chapter 14: Flexbox

• CSS Flexbox: An Basic Introduction
• CSS Flexbox Axes
• CSS Flexbox Direction
• CSS Flex Wrap
• CSS flex-flow Shorthand Property
• CSS Flexbox Writing Modes
• CSS Flexbox Direction
• Aligning Items in Flexbox Container
• CSS align-items Property
• CSS align-self Property
• CSS align-content Property
• CSS justify-content Property
• Gap Between Items
• CSS column-gap Property
• CSS row-gap Property
• CSS gap Shorthand Property
• Flex Items Properties
• CSS order Property
• CSS flex-basis Property
• CSS flex-grow Property
• CSS flex-shrink Property
• CSS flex Shorthand Property

Chapter 15: Grid

• CSS Grid: An Basic Introduction
• Grid Template Properties
• CSS grid-template-column Property
• CSS grid-template-row Property
• CSS grid-template-area Property
• CSS grid-template Shorthand Property
• Positioning Items By Line Number
• CSS grid-column-start Property
• CSS grid-column-end Property
• CSS grid-column Shorthand Property
• CSS grid-row-start Property
• CSS grid-row-end Property
• CSS grid-row Shorthand Property
• CSS grid-area Shorthand Property
• Gap Between Items
• CSS column-gap Property
• CSS row-gap Property
• CSS gap Shorthand Property
• Aligning Items
• CSS align-items Property
• CSS align-content Property
• CSS align-self Property
• CSS justify-items Property
• CSS justify-content Property
• CSS justify-self Property
• CSS Grid Auto Placement Algorithm
• Implicit Grid
• CSS grid-auto-column Property
• CSS grid-auto-row Property
• Grid Sizing
• min-content
• max-content
• fit-content()
• minmax()
• The fr unit
• auto-fit and auto-fill
• CSS Grid Writing Modes
• CSS Sub-Grid

Chapter 16: Tables

• Table Alignment
• Table Borders
• Table Sizing

Chapter 17: Fonts

• CSS Font Family
• CSS @font-face At-rule
• CSS Font Weight
• CSS Font Size
• CSS Font Style
• CSS Font Stretch
• CSS font Shorthand Property
• CSS System Fonts

Chapter 18: Text and Its Properties

• CSS Text Indentation
• CSS Text Alignment
• CSS Last Line Alignment
• CSS Word Spacing
• CSS Letter Spacing
• CSS Line Height
• CSS Vertical Alignment
• CSS Text Transformation
• CSS Whitespace
• CSS Hyphens
• CSS Word Break
• CSS Line Break
• CSS Writing Modes
• CSS Text Direction
• CSS text-decoration-line Property
• CSS text-decoration-thickness Property
• CSS text-decoration-color Property
• CSS text-decoration-style Property
• CSS text-decoration Shorthand Property
• CSS text-decoration-line Property
• CSS text-wrap Property
• CSS overflow-wrap Property

Chapter 19: Lists

• CSS list-style-type Property
• CSS list-style-image Property
• CSS list-style-position Property
• CSS list-style Shorthand Property
• CSS ::marker Pseudo-Element
• CSS Counters

Chapter 20: Transform

• CSS Transform
• CSS Transform - Translate() Function
• CSS Transform - Scale() Function
• CSS Transform - Rotate() Function
• CSS Transform - Skew() Function
• CSS Transform - Matrix() Function
• CSS Transform Box
• CSS Transform Origin
• CSS Transform Style

Chapter 21: Transitons

• CSS transition-duration Property
• CSS transition-timing-function Property
• CSS transition-delay Property
• CSS transition Shorthand Property

Chapter 22: Animations

• CSS Keyframes
• CSS animation-delay Property
• CSS animation-direction Property
• CSS animation-duration Property
• CSS animation-fill-mode Property
• CSS animation-iteration-count Property
• CSS animation-name Property
• CSS animation-play-state Property
• CSS animation-timeline Property
• CSS animation-timing-function Property
• CSS animation Shorthand Property

Chapter 23: Z-Index

• CSS Z-Index

Chapter 24: Filters

• CSS Filter: An Basic Introduction
• CSS blur() Filter Function
• CSS brightness() Filter Function
• CSS contrast() Filter Function
• CSS drop-shadow() Filter Function
• CSS grayscale() Filter Function
• CSS hue-rotate() Filter Function
• CSS invert() Filter Function
• CSS opacity() Filter Function
• CSS saturate() Filter Function
• CSS sepia() Filter Function

Chapter 25: Blend Modes

• CSS mix-blend-mode Property
• CSS background-blend-mode Property

Chapter 26: Overflows

• CSS overflow-x Property
• CSS overflow-y Property
• CSS overflow Shorthand Property

Chapter 27: Media Queries

• Media Types
• Media Features
• Media Query Operators

Chapter 28: Cascade

• CSS Cascade: An Basic Introduction
• CSS Cascade Layers

Chapter 29: Pseudo-Elements

• CSS Pseudo-elements: An Basic Introduction

Chapter 30: Pseudo-Classes

• CSS Pseudo-Classes: An Basic Introduction