1. Introduction to CSS
- What is CSS?
- Why CSS is needed
- HTML vs CSS
- How browsers render styles
- Benefits of CSS
2. Adding CSS to HTML
Inline CSS
- style attribute
Internal CSS
- style tag
External CSS
- css file
- link tag
Priority Order
- Inline vs Internal vs External
3. CSS Syntax
- Selectors
- Properties
- Values
- Declaration blocks
- CSS comments
4. CSS Selectors
Basic Selectors
- Element selector
- ID selector
- Class selector
Advanced Selectors
- Group selector
- Universal selector
5. Colors
- Color names
- HEX
- RGB
- RGBA
- HSL
6. Backgrounds
- background-color
- background-image
- background-repeat
- background-position
- background-size
7. Borders
- border
- border-width
- border-style
- border-color
- border-radius
8. Margin
- What is margin?
- Individual margins
- Shorthand margin
9. Padding
- What is padding?
- Individual padding
- Shorthand padding
10. Box Model
- Content
- Padding
- Border
- Margin
- box-sizing
11. Width & Height
- width
- height
- min-width
- max-width
- min-height
- max-height
12. Text Styling
- color
- text-align
- text-decoration
- text-transform
- line-height
- letter-spacing
- word-spacing
13. Fonts
- font-family
- font-size
- font-weight
- font-style
- Google Fonts
14. Links Styling
- :link
- :visited
- :hover
- :active
15. Lists Styling
- list-style-type
- list-style-position
- custom list styles
16. Tables Styling
- border-collapse
- spacing
- striped tables
- hover effects
17. Display Property
- block
- inline
- inline-block
- none
18. Positioning
- static
- relative
- absolute
- fixed
- sticky
19. Overflow
- visible
- hidden
- scroll
- auto
20. Float & Clear
- float
- clear
- common use cases
- limitations
21. Flexbox
Flex Container
- display:flex
Main Axis
- justify-content
Cross Axis
- align-items
Flex Items
- flex-grow
- flex-shrink
- flex-basis
22. CSS Grid
Grid Container
- display:grid
Grid Properties
- grid-template-columns
- grid-template-rows
- gap
23. Pseudo Classes
- :hover
- :focus
- :active
- :first-child
- :last-child
- :nth-child()
24. Pseudo Elements
- ::before
- ::after
- ::first-letter
- ::first-line
25. Transitions
- transition
- duration
- timing function
26. Transform
- translate
- rotate
- scale
- skew
27. Animations
- @keyframes
- animation-name
- animation-duration
- animation-iteration-count
28. Responsive Design
Viewport
Media Queries
Mobile First Design
29. CSS Variables
- Creating variables
- Using variables
- Theme colors
30. CSS Best Practices
- Naming conventions
- Organizing CSS
- Reusable classes
- Avoiding duplicate code
Top comments (0)