All Level Sign in Sign Up

CSS Language — Syllabus

Explore the syllabus by level.

Learn CSS fundamentals, syntax, colors, and basic styling.

  1. Introduction to CSS
  2. Syntax, Selectors, and Rules
  3. Inline, Internal, and External CSS
  4. Colors, Backgrounds, Fonts
  5. Basic Text Styling (color, font-size, font-family, font-weight)
  6. Comments in CSS
  7. Basic borders, margins, padding

Master selectors, pseudo-elements, box models, and units.

  1. Advanced Selectors: id, class, element, grouping, descendant
  2. Pseudo-classes: :hover, :focus, :first-child, :last-child
  3. Pseudo-elements: ::before, ::after, ::first-letter
  4. Attribute selectors [attr], [attr=value]
  5. Box Model: width, height, padding, border, margin
  6. Units: px, %, em, rem, vh, vw

Create layouts using positioning, Flexbox, and Grid.

  1. Display: block, inline, inline-block, none
  2. Positioning: static, relative, absolute, fixed, sticky
  3. Floating elements: float, clear
  4. Z-index and stacking order
  5. CSS Flexbox: flex, justify-content, align-items, flex-wrap
  6. CSS Grid: grid, grid-template-columns, grid-template-rows

Enhance designs with gradients, shadows, and transitions.

  1. Backgrounds: background-color, background-image, background-repeat, background-size
  2. Gradients: linear-gradient, radial-gradient
  3. Borders: border-radius, border-style, border-color
  4. Shadows: box-shadow, text-shadow
  5. Transitions: transition-property, transition-duration
  6. Transformations: scale, rotate, translate, skew

Build responsive designs with animations and advanced selectors.

  1. Animations: @keyframes, animation-name, animation-duration
  2. Media Queries: @media, responsive design
  3. CSS Variables: --variable-name, var()
  4. Pseudo-classes & Pseudo-elements advanced usage
  5. Advanced Selectors: :nth-child(), :not(), :nth-of-type()
  6. Combinators: >, +, ~

Optimize CSS with advanced layouts, functions, and accessibility.

  1. CSS Grid advanced techniques
  2. CSS Flexbox advanced techniques
  3. CSS Functions: calc(), clamp(), min(), max()
  4. CSS Filters: blur(), brightness(), grayscale(), drop-shadow()
  5. CSS Clip-path & Masking
  6. CSS Houdini (custom properties, worklets)
  7. CSS for accessibility and performance optimization