Embedded Files
🔹 1. Introduction to CSS
• What is CSS?
• Role of CSS in web design
• HTML vs. CSS
• Types of CSS:
o Inline
o Internal
o External
• Syntax of a CSS rule
________________________________________
🔹 2. CSS Selectors
• Element selector (h1, p, etc.)
• Class selector (.classname)
• ID selector (#idname)
• Grouping selectors
• Universal selector (*)
• Descendant & child selectors
________________________________________
🔹 3. CSS Colors & Backgrounds
• Color names, HEX, RGB, RGBA, HSL
• background-color
• background-image
• background-repeat, background-size, background-position
• Gradient backgrounds (linear, radial)
________________________________________
🔹 4. Text and Font Styling
• color
• font-family
• font-size
• font-style, font-weight
• text-align, text-decoration, text-transform, letter-spacing
________________________________________
🔹 5. Box Model
• Content, padding, border, margin
• width and height
• box-sizing: border-box
• Visual diagram and real-time example
________________________________________
🔹 6. Borders and Outline
• border-width, border-style, border-color
• Rounded corners: border-radius
• outline and its differences from border
________________________________________
🔹 7. Padding, Margin, and Spacing
• Shorthand notation
• Individual directions: top, right, bottom, left
• Collapsing margins
________________________________________
🔹 8. CSS Display & Visibility
• display: block, inline, inline-block, none
• visibility: hidden
• overflow: hidden/scroll/auto
________________________________________
🔹 9. Positioning Elements
• Static (default)
• Relative
• Absolute
• Fixed
• Sticky
• Using z-index
________________________________________
🔹 10. Floating and Clearfix
• float: left/right
• Clearing floats
• Clearfix hack (with class)
________________________________________
🔹 11. CSS Units
• px, em, rem, %, vh, vw
• Relative vs. absolute units
________________________________________
🔹 12. Pseudo-classes and Pseudo-elements
• :hover, :focus, :active, :visited, :first-child, etc.
• ::before, ::after, ::placeholder
________________________________________
🔹 13. Lists and Tables Styling
• Styling <ul>, <ol>, <li>
• Custom bullets and numbering
• Table borders, spacing, hover effects
________________________________________
🔹 14. Forms Styling
• Styling inputs, buttons, textareas
• Focus and hover effects
• Placeholder styling
________________________________________
🔹 15. Transitions and Animations
• transition-property, transition-duration, ease, linear
• Simple @keyframes animations
• Animation properties
________________________________________
🔹 16. Responsive Design Basics
• Introduction to media queries
• Mobile-first approach
• max-width, min-width concepts
________________________________________
🔹 17. Flexbox (Basics)
• display: flex
• justify-content, align-items, flex-direction
• Creating responsive layouts
________________________________________
🔹 18. Grid Layout (Basics)
• display: grid
• grid-template-columns, grid-gap
• Simple grid example
________________________________________
🔹 19. Linking CSS to HTML
• Inline: style=""
• Internal: <style> tag in <head>
• External: <link rel="stylesheet" href="style.css">
________________________________________
🔹 20. Developer Tools for CSS
• Inspecting elements
• Live editing CSS in browser
• CSS debugging tips
________________________________________
🔹 21. Best Practices
• Naming conventions (BEM basics)
• Avoid inline styles
• Reusability using classes
• Keeping CSS modular
________________________________________
🔹 22. Mini Projects & Assignments
• Styled personal resume page
• Responsive card layout
• Animated button and navigation bar
• Form design with focus effects
Page updated
Google Sites
Report abuse