A Simple Analogy

CSS is like interior design. HTML provides the walls and structure; CSS makes it beautiful. You choose colors, fonts, spacing, and layout without changing the underlying structure.

---

What Is CSS?

CSS (Cascading Style Sheets) controls presentation and layout of HTML. It separates content (HTML) from appearance (CSS), enabling flexible, maintainable designs.

---

Why Learn CSS?

• Appearance: Make pages visually appealing
• Layout: Control positioning and spacing
• Responsive: Adapt to different screen sizes
• Consistency: Reusable styles across pages
• Maintenance: Separate style changes from content

---

Three Ways to Apply CSS

<!-- 1. Inline (not recommended) -->
<p style="color: blue;">Text</p>

<!-- 2. Internal (single page) -->
<style>
    p { color: blue; }
</style>

<!-- 3. External (recommended) -->
<link rel="stylesheet" href="styles.css">

---

Selectors and Properties

/* Element selector */
p { color: blue; }

/* Class selector */
.highlight { background: yellow; }

/* ID selector */
#main { width: 100%; }

/* Attribute selector */
input[type="email"] { border: 1px solid gray; }

/* Combinators */
nav a { color: white; }      /* Descendant */
div > p { margin: 10px; }    /* Child */

---

Box Model

┌─────────────────────────────────┐
│         Margin                  │
│  ┌──────────────────────────┐   │
│  │     Border               │   │
│  │  ┌────────────────────┐  │   │
│  │  │   Padding          │  │   │
│  │  │ ┌────────────────┐ │  │   │
│  │  │ │    Content     │ │  │   │
│  │  │ └────────────────┘ │  │   │
│  │  └────────────────────┘  │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

.box {
    content-width: 200px;
    padding: 10px;      /* Inside border */
    border: 2px solid;
    margin: 20px;       /* Outside border */
}

---

Flexbox (Layout)

.container {
    display: flex;
    justify-content: center;    /* Horizontal alignment */
    align-items: center;        /* Vertical alignment */
    gap: 10px;
}

.item {
    flex: 1;                    /* Equal width */
}

---

Responsive Design

/* Mobile first */
.container {
    font-size: 14px;
    width: 100%;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        font-size: 16px;
        width: 90%;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .container {
        font-size: 18px;
        width: 80%;
    }
}

---

Practical Example

/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Layout */
.header {
    background: #333;
    color: white;
    padding: 20px;
}

.nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}

.main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.card {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .nav a { margin: 0 5px; }
    .main { padding: 10px; }
}

---

Best Practices

1. Mobile first: Design for mobile, enhance for desktop
2. Reusable classes: Create utility classes
3. Avoid inline styles: Use external stylesheets
4. Consistent spacing: Use scale for margins/padding
5. Readable selectors: Avoid deeply nested selectors

---

Related Concepts to Explore

• CSS Grid (2D layouts)
• Animations and transitions
• Preprocessors (Sass, Less)
• CSS frameworks (Tailwind, Bootstrap)
• Typography and design systems

---

Summary

CSS transforms HTML structure into visually appealing, responsive layouts. Master selectors, the box model, flexbox, and responsive design to build professional websites.