CSS NOTES

This repository contains the basic and essential topics and their notes to learn the CSS as beginner.

Refer the below contents, To kick start the learning of CSS. which gives you step by step approach to the CSS.
 

☰ CONTENTS

1. Usage

2. Introduction

   • What is CSS?
   • How CSS works with HTML?
   • Basic syntax and structure
   • Selectors:
     • Element selectors
     • Class selectors
     • ID selectors
     • Universal selector
     • Descendant selectors
     • Child selectors
     • Adjacent sibling selectors
     • General sibling selectors
     • Attribute selectors
   • Pseudo Selectors:
     • Structural Pseudo Selectors
     • State Pseudo Selectors
     • Content Pseudo Selectors

3. Properties and Values:

   • Understanding properties
   • Setting values
   • Common properties:
     • color
     • background
     • font
     • margin
     • padding
     • border
     • display
     • position
     • float
     • width
     • height
     • overflow

4. CSS Units:

   • Pixels (px)
   • Percentages (%)
   • Ems (em)
   • Rems (rem)
   • Viewport units (vw, vh, vmax, vmin)

5. Text Styling:

   • Font families
   • Font sizes
   • Font weights
   • Text decoration
   • Text alignment
   • Text transforms

6. Color and Background:

   • Color models (RGB, HSL, HEX)
   • Color Opacity,
   • Background color
   • Background images
   • Background positioning
   • Background repetition
   • Background attachment
   • Gradient Text

7. Layouts:

   • Block-level elements
   • Inline elements
   • Inline-block elements
   • Flexbox layout
   • Grid layout
   • Positioning
   • Floating elements

8. Borders and Outlines:

   • Border width
   • Border style
   • Border color
   • Outlines
   • Box Shadow

9. Responsive Design:

   • Media queries
   • Flexible layouts
   • Responsive images
   • Fluid typography
   • Flexbox or Grid
   • Important Key Points

10. CSS Animations:

    • Keyframes
    • Animation properties
    • Animation timing functions
    • Animation delay
    • Animation iteration count
    • Animation direction

11. CSS Transitions:

    • Transition properties
    • Transition duration
    • Transition timing functions
    • Transition delay
    • Shorthand Transition Property
    • Resize Property

12. CSS Filters:

    • Blur
    • Brightness
    • Contrast
    • Grayscale
    • Hue-rotate
    • Invert
    • Opacity
    • Sepia
    • Multiple Filters Effect

13. CSS Clip Path Topics

    • Basic Clip Path:
      • Common shape functions
        • circle
        • ellipse
        • polygon
        • inset
    • Advanced Clip Path:
      • Path Function
      • URL Function
    • Clip Rule property
      • nonzero
      • evenodd
    • Use Cases and Examples:
      • Creating custom shapes
      • Masking elements
      • Creating unique visual effects
      • Combining with other CSS properties

⚑ Contribution

Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request. Make sure to follow the existing coding style and provide clear documentation for your changes.

⚑ License

This reference licensed under the MIT license. Feel free to use, modify, and distribute it as per the terms of the license.

⚑ Contact

If you have any questions or need further assistance, please feel free to reach me by referring My Github Profile

Thanks for reviewing this reference notes!