CSS Language — Syllabus
Explore the syllabus by level.
Learn CSS fundamentals, syntax, colors, and basic styling.
- Introduction to CSS
- Syntax, Selectors, and Rules
- Inline, Internal, and External CSS
- Colors, Backgrounds, Fonts
- Basic Text Styling (color, font-size, font-family, font-weight)
- Comments in CSS
- Basic borders, margins, padding
Master selectors, pseudo-elements, box models, and units.
- Advanced Selectors: id, class, element, grouping, descendant
- Pseudo-classes: :hover, :focus, :first-child, :last-child
- Pseudo-elements: ::before, ::after, ::first-letter
- Attribute selectors [attr], [attr=value]
- Box Model: width, height, padding, border, margin
- Units: px, %, em, rem, vh, vw
Create layouts using positioning, Flexbox, and Grid.
- Display: block, inline, inline-block, none
- Positioning: static, relative, absolute, fixed, sticky
- Floating elements: float, clear
- Z-index and stacking order
- CSS Flexbox: flex, justify-content, align-items, flex-wrap
- CSS Grid: grid, grid-template-columns, grid-template-rows
Enhance designs with gradients, shadows, and transitions.
- Backgrounds: background-color, background-image, background-repeat, background-size
- Gradients: linear-gradient, radial-gradient
- Borders: border-radius, border-style, border-color
- Shadows: box-shadow, text-shadow
- Transitions: transition-property, transition-duration
- Transformations: scale, rotate, translate, skew
Build responsive designs with animations and advanced selectors.
- Animations: @keyframes, animation-name, animation-duration
- Media Queries: @media, responsive design
- CSS Variables: --variable-name, var()
- Pseudo-classes & Pseudo-elements advanced usage
- Advanced Selectors: :nth-child(), :not(), :nth-of-type()
- Combinators: >, +, ~
Optimize CSS with advanced layouts, functions, and accessibility.
- CSS Grid advanced techniques
- CSS Flexbox advanced techniques
- CSS Functions: calc(), clamp(), min(), max()
- CSS Filters: blur(), brightness(), grayscale(), drop-shadow()
- CSS Clip-path & Masking
- CSS Houdini (custom properties, worklets)
- CSS for accessibility and performance optimization