What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of an HTML document. It controls the layout, colors, fonts, spacing, and responsiveness of web pages.

1. Why Use CSS?

Separation of Content & Design: Keeps HTML clean by handling styling separately.
Consistency: Ensures uniform styling across multiple pages.
Efficiency: Allows styling multiple elements with a single rule.
Responsiveness: Enables designs to adapt to different screen sizes.

2. CSS Syntax

p {
    color: blue;  /* Text color */
    font-size: 16px; /* Font size */
}

3. Ways to Apply CSS

1. Inline CSS

<p style="color: red;">This is red text.</p>

2. Internal CSS

<style>
  p {
      color: green;
  }
</style>

3. External CSS

<link rel="stylesheet" href="styles.css">

4. CSS Selectors

Selector	Description	Example
Element	Targets all elements of a type	`p { color: blue; }`
Class (`.`)	Targets elements with a specific class	`.button { background: red; }`
ID (`#`)	Targets a unique element	`#header { font-size: 24px; }`

5. CSS Box Model

div {
    width: 200px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

6. CSS Positioning

.fixed-box {
    position: fixed;
    top: 10px;
    right: 10px;
}

7. CSS Flexbox (Responsive Layout)

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

8. CSS Grid (Advanced Layouts)

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

9. Media Queries (Responsive Design)

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

Conclusion

CSS is a powerful language that styles and formats web pages, making them visually appealing and responsive. Mastering CSS allows for professional, well-structured web designs.

Would you like examples for a specific CSS feature? 🚀