PART-1 SET-UP BACKGROUND COLOR

PART 1 OF 2:
SETTING WARNA BACKGROUND

Sure! Let’s break down your code step by step 👇

<div style="background-color: #1e1e1e; 
            color: #d4d4d4; 
            font-family: Consolas, 'Courier New', monospace; 
            font-size: 14px; 
            line-height: 19px; 
            white-space: pre;">
</div>

This is an HTML <div> element with inline CSS styling to create a dark, code-like background.

---

🔎 What Each Part Does

1️⃣ <div>

A container element in HTML. It holds content like text, code, images, etc.

---

2️⃣ background-color: #1e1e1e;

• Sets the background color.

• #1e1e1e is a dark gray color (almost black).

• Makes the box have a dark theme.

---

3️⃣ color: #d4d4d4;

• Sets the text color.

• #d4d4d4 is light gray.

• This creates contrast with the dark background.

---

4️⃣ font-family: Consolas, 'Courier New', monospace;

• Sets the font style.

• Consolas → first choice

• 'Courier New' → fallback

• monospace → final fallback

• These are monospaced fonts, commonly used for code.

---

5️⃣ font-size: 14px;

• Sets text size to 14 pixels.

---

6️⃣ line-height: 19px;

• Controls vertical spacing between lines.

• Makes text easier to read.

---

7️⃣ white-space: pre;

• Preserves:

  • Spaces

  • Line breaks

  • Indentation

• Works like the <pre> tag.

• Very useful for displaying code formatting.

---

🎯 What This Code Is Used For

It creates a code editor-style block, similar to:

• VS Code dark theme

• Terminal window

• Code snippets on websites

---

✅ Example with Content

<div style="background-color: #1e1e1e; 
            color: #d4d4d4; 
            font-family: Consolas, 'Courier New', monospace; 
            font-size: 14px; 
            line-height: 19px; 
            white-space: pre; 
            padding: 15px;">
function hello() {
    console.log("Hello World");
}
</div>

👉 Adding padding makes it look nicer.

---

💡 Cleaner Way (Recommended)

Instead of inline style, use CSS:

<style>
.code-box {
  background-color: #1e1e1e;
  color: #d4d4d4;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 14px;
  line-height: 19px;
  white-space: pre;
  padding: 15px;
}
</style>

<div class="code-box">
Your code here
</div>

✔ Cleaner
✔ Reusable
✔ Easier to maintain