CSS SYLLABUS

🎨 Module 1: Introduction to CSS

• What is CSS?

• CSS Syntax: Selectors, Properties, Values

• Ways to Apply CSS:

  • Inline

  • Internal

  • External

• Comments in CSS

🎯 Module 2: CSS Selectors

• Basic Selectors (*, element, .class, #id)

• Grouping Selectors

• Combinators (descendant, child, sibling)

• Pseudo-classes: :hover, :first-child, etc.

• Pseudo-elements: ::before, ::after

🧱 Module 3: Working with Text & Fonts

• Font Properties: font-family, font-size, font-weight, etc.

• Text Styling: color, text-align, text-decoration, text-transform

• Google Fonts Integration

📐 Module 4: Box Model

• Margin, Border, Padding, Content

• Width & Height

• box-sizing Property

• Outline vs Border

🎭 Module 5: Backgrounds and Borders

• background-color, background-image

• Background Repeat, Size, Position

• Border Styles, Rounded Corners (border-radius)

• Box Shadows

🔲 Module 6: Display and Positioning

• display Property: block, inline, inline-block, none, flex, grid

• position: static, relative, absolute, fixed, sticky

• z-index and Layering

📏 Module 7: Flexbox

• What is Flexbox?

• display: flex, flex-direction, justify-content, align-items

• flex-wrap, gap, order, align-self

• Flexbox layout examples

🔳 Module 8: Grid Layout

• display: grid

• Grid Columns & Rows

• Grid Gap

• Grid Areas

• Grid vs Flexbox (comparison)

📱 Module 9: Responsive Design

• Viewport & Media Queries

• Mobile-first Design

• Breakpoints

• Responsive Text & Images

• Units: px, %, em, rem, vh, vw

🧩 Module 10: Advanced Styling

• CSS Variables (Custom Properties)

• Transitions and Animations

• transform, scale, rotate, translate

• Keyframes

• Hover Effects

💡 Module 11: Practical CSS Techniques

• Navigation Bars

• Cards & Grids

• Buttons with Hover Effects

• Forms Styling

• Image Gallery

🧪 Module 12: Final Project

• Responsive Website Using HTML + CSS

• Layout: Header, Footer, Navigation, Sections

• Real-world components: Hero, Gallery, Contact Form