Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall appearance of web pages. By separating content (HTML) from design (CSS), it allows for cleaner, more maintainable code and enables changes to be made across multiple pages by editing a single style sheet.

Key Concepts in CSS:

1. Selectors: Targets elements in the HTML that need styling. Common selectors include:

   • Element selectors (h1, p, etc.)
   • Class selectors (.class-name)
   • ID selectors (#id-name)
   • Attribute selectors ([type="text"])

2. Properties and Values: Each CSS rule contains a property (what you want to change) and a value (the new setting).

   • Example: color: blue; (property: color, value: blue)

3. Box Model: Refers to the structure of an HTML element and includes:

   • Content: The actual text or media.
   • Padding: Space between the content and the border.
   • Border: Surrounds the padding (optional).
   • Margin: Space outside the border between this element and others.

4. Layouts:

   • Flexbox: A layout model used for aligning items in rows or columns.
   • Grid: A two-dimensional layout system that organizes items into rows and columns.

5. Media Queries: Allows the application of different styles depending on the device’s characteristics (e.g., screen size).

   • Example:
     
     css

     @media (max-width: 600px) {
body {
background-color: lightblue;
}
}


6. Pseudo-classes and Pseudo-elements:

   • Pseudo-classes: Apply styles to elements in a specific state (e.g., :hover, :focus).
   • Pseudo-elements: Target parts of elements (e.g., ::before, ::after).

7. Inheritance and Specificity:

   • Inheritance: Some CSS properties are inherited from parent elements (e.g., text color).
   • Specificity: Determines which style rule applies when multiple rules could affect an element (IDs > Classes > Elements).