CSS Tutorial

🔰 1. Introduction to CSS

• What is CSS?

• Why CSS is used

• How CSS works with HTML

• Types of CSS: Inline, Internal, External

🧱 2. CSS Syntax & Selectors

• CSS syntax (selector, property, value)

• Universal selector (*)

• Element selector (p, h1, etc.)

• Class selector (.class)

• ID selector (#id)

• Grouping selectors

• Combinators (descendant, child, sibling)

🎨 3. CSS Colors, Backgrounds & Borders

• Color values: names, hex, RGB, HSL

• Background color and image

• Background position, repeat, size

• Borders: width, style, color, radius

• Opacity and RGBA colors

🅰️ 4. CSS Fonts & Text

• Font-family and web-safe fonts

• Font-size, weight, and style

• Line-height, letter-spacing

• Text-align, transform, decoration, shadow

📐 5. The CSS Box Model

• Understanding content, padding, border, margin

• Width, height, max/min values

• Overflow and box-sizing

🧭 6. CSS Positioning & Display

• static, relative, absolute, fixed, sticky

• z-index and layering

• display: block, inline, inline-block, none

• visibility vs display

🧲 7. CSS Flexbox (Responsive Layout)

• Flex container & items

• Properties: justify-content, align-items, flex-wrap, etc.

• One-dimensional layout control

• Creating navbars, cards with flex

🔲 8. CSS Grid (Advanced Layout)

• Grid container & items

• grid-template-columns, grid-gap, area

• 2D layout system

• Complex page structures

📱 9. Responsive Design & Media Queries

• Viewport and mobile-first design

• @media rules

• Breakpoints for different devices

• Hiding/showing elements

✨ 10. CSS Effects, Transitions & Animations

• hover, focus, and pseudo-classes

• Transitions (ease, duration, delay)

• Keyframes and animations

• Animation timing and chaining

🎭 11. Pseudo-classes & Pseudo-elements

• :hover, :first-child, :nth-child

• ::before and ::after

• Styling specific parts of elements

🔌 12. CSS Variables (Custom Properties)

• Declaring and using variables

• Scope and inheritance

• Benefits of using variables

📋 13. CSS Best Practices

• Writing clean and reusable CSS

• Naming conventions (BEM, SMACSS)

• Organizing CSS files

• Performance tips

🧪 14. Hands-on Projects

• Styled Portfolio Page

• Responsive Landing Page

• Product Card with Flexbox

• Grid-based Photo Gallery

• Animated Button and Modal