CSS Syllabus

What is CSS and why it’s used

Types of CSS: Inline, Internal, External

Syntax: selectors, properties, values

Linking CSS to HTML

Basic selectors (element, .class, #id)

Grouping and nesting selectors

Attribute selectors

Pseudo-classes (:hover, :focus, :nth-child)

Pseudo-elements (::before, ::after)

Color values (name, HEX, RGB, HSL)

Background properties (color, image, repeat, position, size)

Gradients (linear, radial)

Font properties (font-family, font-size, font-weight)

Text properties (color, text-align, text-decoration, line-height)

Google Fonts and custom fonts

Content, padding, border, margin

box-sizing property

Border styles and radius

Shadows (box-shadow, text-shadow)

Display types (block, inline, inline-block, none)

Positioning (static, relative, absolute, fixed, sticky)

Float and clear

Overflow handling

Flex container properties (display: flex, flex-direction, justify-content, align-items)

Flex item properties (flex-grow, flex-shrink, flex-basis)

Common layouts with flexbox

Grid container properties (display: grid, grid-template-rows, grid-template-columns)

Grid item properties (grid-row, grid-column)

Gap, alignment, and responsive grids

CSS transitions (transition-property, transition-duration, transition-timing-function)

Keyframe animations (@keyframes)

Animation properties (animation-name, animation-duration, animation-iteration-count)

Media queries

Relative units (em, rem, %, vh, vw)

Mobile-first design principles

Responsive images and typography

Variables (--custom-property)

CSS functions (calc(), var())

Filters and blend modes

CSS frameworks overview (Bootstrap, Tailwind basics)

Organizing CSS files

Naming conventions (BEM methodology)

Performance optimization

Accessibility considerations