CSS Overview
1. Introduction to CSS
History of CSS: CSS (Cascading Style Sheets) was introduced in 1996 to separate the presentation
of a web page from its content.
Characteristics of CSS: CSS defines how HTML elements should be displayed, providing control
over the layout, colors, fonts, and spacing of web pages.
CSS Syntax: CSS rules consist of selectors and declarations, where a selector targets an HTML
element, and the declaration specifies style properties.
2. CSS Selectors
Basic Selectors: CSS provides basic selectors like element, class (.classname), and ID (#idname)
selectors.
Combinators: CSS supports combinators like descendant selectors (div p), child selectors (div > p),
and adjacent sibling selectors (div + p).
Pseudo-Classes and Pseudo-Elements: CSS provides pseudo-classes (e.g., :hover, :focus) and
pseudo-elements (e.g., ::before, ::after) for styling elements in specific states or adding content.
3. CSS Box Model
Introduction to the Box Model: Every HTML element is represented as a box consisting of content,
padding, border, and margin.
Padding and Margin: Padding defines the space between content and border, while margin defines
the space between the element and surrounding elements.
Borders: CSS allows setting borders with properties like border-width, border-style, and
border-color.
4. CSS Layouts
CSS Flexbox: The Flexible Box Layout (Flexbox) provides a modern way to layout elements in a row
or column with automatic spacing and alignment.
CSS Grid: The CSS Grid Layout provides a two-dimensional grid system for placing elements in
1. Introduction to CSS
History of CSS: CSS (Cascading Style Sheets) was introduced in 1996 to separate the presentation
of a web page from its content.
Characteristics of CSS: CSS defines how HTML elements should be displayed, providing control
over the layout, colors, fonts, and spacing of web pages.
CSS Syntax: CSS rules consist of selectors and declarations, where a selector targets an HTML
element, and the declaration specifies style properties.
2. CSS Selectors
Basic Selectors: CSS provides basic selectors like element, class (.classname), and ID (#idname)
selectors.
Combinators: CSS supports combinators like descendant selectors (div p), child selectors (div > p),
and adjacent sibling selectors (div + p).
Pseudo-Classes and Pseudo-Elements: CSS provides pseudo-classes (e.g., :hover, :focus) and
pseudo-elements (e.g., ::before, ::after) for styling elements in specific states or adding content.
3. CSS Box Model
Introduction to the Box Model: Every HTML element is represented as a box consisting of content,
padding, border, and margin.
Padding and Margin: Padding defines the space between content and border, while margin defines
the space between the element and surrounding elements.
Borders: CSS allows setting borders with properties like border-width, border-style, and
border-color.
4. CSS Layouts
CSS Flexbox: The Flexible Box Layout (Flexbox) provides a modern way to layout elements in a row
or column with automatic spacing and alignment.
CSS Grid: The CSS Grid Layout provides a two-dimensional grid system for placing elements in
