CSS3

1. Introduction to CSS3

What is CSS
How CSS works with HTML
Types of CSS (Inline, Internal, External)
Advantages of CSS3
Browser compatibility
Course project overview

2. CSS Syntax and Selectors

CSS syntax
Comments
Element selectors
Class selectors
ID selectors
Universal selector
Grouping selectors
Attribute selectors
Pseudo-classes
Pseudo-elements

3. CSS Colors and Backgrounds

Color formats (HEX, RGB, RGBA, HSL, HSLA)
Background colors
Background images
Background position
Background repeat
Background size
Background attachment
Multiple backgrounds

4. Typography

Font families
Web-safe fonts
Google Fonts
Font size
Font weight
Font style
Text alignment
Text decoration
Text transformation
Letter spacing
Word spacing
Line height
Text shadows

5. The CSS Box Model

Content
Padding
Border
Margin
Width and height
Box-sizing
Overflow
Outline

6. Borders and Shadows

Border styles
Border radius
Border images
Box shadows
Text shadows
Creating modern UI effects

7. Display Properties

Block elements
Inline elements
Inline-block
Display none
Visibility
Opacity

8. Positioning

Static positioning
Relative positioning
Absolute positioning
Fixed positioning
Sticky positioning
Z-index
Layer stacking

9. CSS Units

Pixels (px)
Percent (%)
em
rem
vw
vh
vmin
vmax
ch
Choosing the right unit

10. Flexbox Layout

Display flex
Flex direction
Justify content
Align items
Align content
Flex wrap
Gap
Order
Flex grow
Flex shrink
Flex basis
Building responsive layouts

11. CSS Grid Layout

Display grid
Grid container
Grid items
Grid columns
Grid rows
Grid template areas
Gap
Auto-fit and auto-fill
Responsive grids

12. Responsive Web Design

Mobile-first design
Media queries
Responsive typography
Responsive images
Responsive layouts
Breakpoint strategies

13. CSS Transitions

Transition properties
Duration
Timing functions
Delay
Hover animations
Interactive effects

14. CSS Animations

Keyframes
Animation properties
Infinite animations
Animation timing
Loading animations
Practical animation examples

15. CSS Transformations

Translate
Rotate
Scale
Skew
Transform origin
Combining transforms

16. Lists and Tables

Styling unordered lists
Styling ordered lists
Custom bullets
Table styling
Striped tables
Responsive tables

17. Forms Styling

Input styling
Textarea styling
Select menus
Checkboxes
Radio buttons
Buttons
Focus states
Placeholder styling

18. Images and Media

Responsive images
Object-fit
Object-position
Image filters
Rounded images
Image hover effects

19. CSS Variables (Custom Properties)

Creating variables
Using variables
Global variables
Local variables
Theme colors
Dark mode basics

20. Advanced Selectors

Child selectors
Adjacent sibling selectors
General sibling selectors
:nth-child()
:not()
:is()
:where()
:has() (browser support considerations)

21. Modern CSS Features

Aspect ratio
Clamp()
Min()
Max()
Calc()
Scroll behavior
Scroll snapping

22. Gradients

Linear gradients
Radial gradients
Conic gradients
Gradient backgrounds
Gradient overlays

23. CSS Filters and Effects

Blur
Brightness
Contrast
Grayscale
Sepia
Drop shadow
Backdrop filter

24. CSS Best Practices

CSS architecture
Naming conventions (BEM)
Code organization
Reusable classes
Performance optimization
Cross-browser compatibility

25. CSS Debugging

Using Browser Developer Tools
Inspecting elements
Finding layout issues
Debugging Flexbox
Debugging Grid
Common CSS mistakes

26. Building Real Website Sections

Navigation bar
Hero section
Services section
Cards layout
Pricing table
Testimonials
Contact section
Footer

27. Mini Projects

Landing Page
Personal Portfolio
Pricing Cards
Responsive Navigation Menu
Animated Login Form
Image Gallery
Product Card

28. Final Project

Students will build a complete responsive website using modern CSS3 techniques, including:

Responsive layout with Flexbox and Grid
Custom typography and color scheme
Animations and transitions
Styled forms
Responsive navigation
Modern UI components
Mobile-first design
Clean, maintainable, and reusable CSS code