CSS is what makes websites colorful, big, small, pretty, and fun.
HTML builds the house 🏠 — CSS paints and decorates it 🎨.

Example

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

h1 {
  color: #2c3e50;
}

🧪 Exercise

1. Create style.css

2. Change:

   • Background color
   • Font size
   • Text color

3. Link CSS to HTML

<link rel="stylesheet" href="style.css" />

✅ Goal: Learn separation of structure and style

If you want to learn other concepts in CSS, below is the link from MDN.

MDN CSS Tutorials — structured from beginner basics to advanced topics, with examples and explanations. CSS Tutorials (MDN) https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials

Box Example

Live Editor

<>
  <div
    style={{
      backgroundColor: "orange",
      padding: "20px",
      border: "2px solid black",
      width: "200px",
      textAlign: "center"
    }}
  >
    I am a box
  </div>
</>

Result

Loading...

---

Button Hover Example

Live Editor

<>
  <button
    style={{
      backgroundColor: "green",
      color: "white",
      padding: "10px 20px",
      border: "none",
      cursor: "pointer"
    }}
    onMouseOver={e => e.target.style.backgroundColor = "orange"}
    onMouseOut={e => e.target.style.backgroundColor = "green"}
  >
    Hover Me
  </button>
</>

Result

Loading...