CSS Course Syllabus

Module 1: Introduction to CSS

• What is CSS?

• Advantages of CSS

• Types of CSS (Inline, Internal, External)

• CSS Syntax, Selectors, and Comments

Module 2: Colors, Backgrounds & Borders

• CSS Colors & Color Models (Hex, RGB, HSL)

• Background Properties (color, image, repeat, attachment)

• Borders (style, width, radius)

Module 3: Text and Fonts

• Text Formatting (color, alignment, spacing, decoration, transform)

• Fonts & Web Safe Fonts

• Google Fonts Integration

• Font-size Units (px, em, rem, %)

Module 4: CSS Box Model

• Margin, Border, Padding, Content

• Width & Height

• Box-sizing Property

Module 5: CSS Layouts

• Display Property (inline, block, inline-block)

• Position (static, relative, absolute, fixed, sticky)

• Float & Clear

• Overflow Property

• CSS Units (px, %, vh, vw, em, rem)

Module 6: Flexbox

• Flex Container & Flex Items

• Flex-direction, Justify-content, Align-items

• Flex-wrap & Align-content

• Creating Responsive Layouts with Flexbox

Module 7: CSS Grid

• Grid Container & Grid Items

• Grid-template-rows & columns

• Grid-gap

• Grid Areas

• Advanced Responsive Layouts with Grid

Module 8: CSS Transitions & Animations

• CSS Transitions (hover effects, smooth changes)

• CSS Animations (keyframes)

• Transform (scale, rotate, skew, translate)

Module 9: CSS Responsive Design

• Media Queries

• Mobile-first Design

• Relative Units (%, em, rem, vw, vh)

• CSS Framework Basics (Bootstrap / Tailwind Overview)

Module 10: Advanced CSS

• Pseudo-classes & Pseudo-elements

• CSS Variables

• CSS Shadows (box-shadow, text-shadow)

• Filters (blur, brightness, contrast)

• CSS Z-index & Stacking Context

Module 11: Project / Case Studies

• Personal Portfolio Website

• Responsive Landing Page

• Navigation Menu with Hover/Dropdown

• Mini Projects using Flexbox & Grid

12TH PASS