❓What is CSS?
CSS stands for Cascading Style Sheets.
It’s what makes your plain HTML look beautiful.
If HTML is the structure of a house (walls, windows, doors), CSS is the paint, decoration, layout, and styling.
<div class="infographic-house">
<style>
.infographic-house {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #faf8f4;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft: #e3ebfd;
--accent-deep: #1d4ed8;
--line: #ddd6c9;
--display-font: 'Fraunces', serif;
--body-font: 'Inter', sans-serif;
--mono-font: 'IBM Plex Mono', monospace;
font-family: var(--body-font);
color: var(--ink);
margin: 0 auto;
box-sizing: border-box;
}
.infographic-house * { box-sizing: border-box; }
.ihouse-title {
font-family: var(--display-font);
font-size: clamp(1.7rem, 5vw, 2.2rem);
margin: 0 0 0.3rem;
text-align: center;
}
.ihouse-title code { font-family: var(--mono-font); color: var(--accent); }
.ihouse-sub {
color: var(--ink-soft);
font-size: 0.9rem;
text-align: center;
margin: 0 0 1.75rem;
}
.ihouse-stage {
padding: 1.5rem 1rem 0;
display: flex;
justify-content: center;
}
.ihouse-svg-wrap {
width: 100%;
max-width: 450px;
}
/* Wireframe state: flat lines only, no fill, no color */
.ihouse-svg-wrap svg .wall,
.ihouse-svg-wrap svg .roof,
.ihouse-svg-wrap svg .door,
.ihouse-svg-wrap svg .window-frame,
.ihouse-svg-wrap svg .chimney,
.ihouse-svg-wrap svg .ground {
fill: none;
stroke: var(--ink-soft);
stroke-width: 1.5;
transition: fill 0.4s ease, stroke 0.4s ease, opacity 0.4s ease;
}
.ihouse-svg-wrap svg .window-pane,
.ihouse-svg-wrap svg .door-knob,
.ihouse-svg-wrap svg .roof-line,
.ihouse-svg-wrap svg .grass-blade,
.ihouse-svg-wrap svg .sun,
.ihouse-svg-wrap svg .shadow {
opacity: 0;
transition: opacity 0.4s ease, fill 0.4s ease;
}
/* Styled state: CSS applied */
.infographic-house.is-styled .ihouse-svg-wrap svg .wall { fill: #fbeee0; stroke: #c9a875; }
.infographic-house.is-styled .ihouse-svg-wrap svg .roof { fill: var(--accent-deep); stroke: var(--accent-deep); }
.infographic-house.is-styled .ihouse-svg-wrap svg .roof-line { opacity: 1; }
.infographic-house.is-styled .ihouse-svg-wrap svg .door { fill: var(--accent); stroke: var(--accent-deep); }
.infographic-house.is-styled .ihouse-svg-wrap svg .door-knob { opacity: 1; fill: #f4c84e; }
.infographic-house.is-styled .ihouse-svg-wrap svg .window-frame { fill: #ffffff; stroke: var(--accent-deep); }
.infographic-house.is-styled .ihouse-svg-wrap svg .window-pane { opacity: 1; }
.infographic-house.is-styled .ihouse-svg-wrap svg .chimney { fill: #c9a875; stroke: #9c7d4f; }
.infographic-house.is-styled .ihouse-svg-wrap svg .ground { fill: #cfe6c4; stroke: #9fc98a; }
.infographic-house.is-styled .ihouse-svg-wrap svg .grass-blade { opacity: 1; stroke: #6fa356; }
.infographic-house.is-styled .ihouse-svg-wrap svg .sun { opacity: 1; fill: #f4c84e; }
.infographic-house.is-styled .ihouse-svg-wrap svg .shadow { opacity: 1; fill: rgba(0,0,0,0.07); }
@media (prefers-reduced-motion: reduce) {
.ihouse-svg-wrap svg * { transition: none !important; }
}
.ihouse-toggle-row {
display: flex;
justify-content: center;
padding: 1.25rem 0;
}
.ihouse-toggle {
font-family: var(--mono-font);
font-size: 0.85rem;
font-weight: 600;
background: var(--paper);
border: 1px solid var(--line);
padding: 0.65rem 1.4rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ihouse-toggle:hover { border-color: var(--accent); }
.infographic-house.is-styled .ihouse-toggle {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.ihouse-tags {
display: flex;
justify-content: center;
gap: 0.5rem;
font-family: var(--mono-font);
font-size: 0.78rem;
color: var(--ink-soft);
margin-top: -0.5rem;
}
.ihouse-tags .is-on { color: var(--accent); font-weight: 700; }
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Inter:wght@400;500&family=IBM+Plex+Mono:wght@500;700&display=swap" rel="stylesheet">
<div class="ihouse-stage">
<div class="ihouse-svg-wrap">
<svg viewBox="0 0 300 260" xmlns="http://www.w3.org/2000/svg">
<!-- sun -->
<circle class="sun" cx="255" cy="40" r="18" />
<!-- ground -->
<rect class="ground" x="0" y="220" width="300" height="40" />
<!-- shadow under house -->
<ellipse class="shadow" cx="150" cy="222" rx="95" ry="6" />
<!-- grass blades -->
<path class="grass-blade" d="M20 220 q3 -10 6 0" />
<path class="grass-blade" d="M40 220 q3 -12 6 0" />
<path class="grass-blade" d="M255 220 q3 -10 6 0" />
<path class="grass-blade" d="M270 220 q3 -8 6 0" />
<path class="grass-blade" d="M10 220 q3 -8 6 0" />
<!-- chimney -->
<rect class="chimney" x="205" y="60" width="18" height="40" />
<!-- roof -->
<polygon class="roof" points="150,55 230,115 70,115" />
<line class="roof-line" x1="150" y1="55" x2="150" y2="115" stroke="#163a8f" stroke-width="1" />
<!-- main wall -->
<rect class="wall" x="80" y="115" width="140" height="105" />
<!-- door -->
<rect class="door" x="135" y="165" width="30" height="55" />
<circle class="door-knob" cx="158" cy="193" r="2.2" />
<!-- left window -->
<rect class="window-frame" x="95" y="140" width="28" height="28" />
<line class="window-pane" x1="109" y1="140" x2="109" y2="168" stroke="#1d4ed8" stroke-width="1.2" />
<line class="window-pane" x1="95" y1="154" x2="123" y2="154" stroke="#1d4ed8" stroke-width="1.2" />
<!-- right window -->
<rect class="window-frame" x="177" y="140" width="28" height="28" />
<line class="window-pane" x1="191" y1="140" x2="191" y2="168" stroke="#1d4ed8" stroke-width="1.2" />
<line class="window-pane" x1="177" y1="154" x2="205" y2="154" stroke="#1d4ed8" stroke-width="1.2" />
</svg>
</div>
</div>
<div class="ihouse-toggle-row">
<button class="ihouse-toggle" id="ihouseToggle">Apply CSS</button>
</div>
<div class="ihouse-tags">
<span id="ihouseTagHtml">HTML: structure</span>
<span>·</span>
<span id="ihouseTagCss">CSS: not applied</span>
</div>
<script>
(function () {
const root = document.querySelector('.infographic-house');
const btn = document.getElementById('ihouseToggle');
const tagCss = document.getElementById('ihouseTagCss');
btn.addEventListener('click', () => {
const isStyled = root.classList.toggle('is-styled');
btn.textContent = isStyled ? 'Remove CSS' : 'Apply CSS';
tagCss.textContent = isStyled ? 'CSS: applied' : 'CSS: not applied';
tagCss.classList.toggle('is-on', isStyled);
});
})();
</script>
</div>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});Master Code Block (This will be used for further examples)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Basics</title>
<style>
<!--All CSS content to be added here-->
</style>
</head>
<body>
<!--All HTML content to be added here-->
</body>
</html>✨ Why Do We Need CSS?
HTML is all about the content, but CSS handles the appearance.
📕 Without CSS:
<h1>Hello</h1>
<p>This is a paragraph.</p>📗 With CSS:
<style>
h1 {
color: royalblue;
font-size: 60px;
text-align: center;
}
p {
font-family: Arial;
line-height: 1.6;
text-align: center; /* Center align the paragraph */
font-size: 40px; /* Increase font size */
}
</style>
<h1>Hello</h1>
<p>This is a paragraph.</p><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Before After Demo</title>
<style>
.infographic-cssdemo {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
box-sizing: border-box;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--paper);
color: var(--ink);
border-radius: 14px;
overflow: hidden;
}
.infographic-cssdemo[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.ha-toggle {
display: flex;
background: var(--paper-alt);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.25rem;
margin-bottom: 1.25rem;
gap: 0.25rem;
}
.ha-toggle button {
flex: 1;
border: none;
background: transparent;
color: var(--ink-soft);
font-family: inherit;
font-size: 0.82rem;
font-weight: 700;
padding: 0.55rem 0.8rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.ha-toggle button.ha-on {
background: var(--accent);
color: #fff;
}
.ha-browser {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--paper);
}
.ha-browser-bar {
background: var(--paper-alt);
padding: 0.5rem 0.7rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid var(--line);
}
.ha-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.ha-tab {
background: var(--paper);
border: 1px solid var(--line);
border-bottom: none;
border-radius: 6px 6px 0 0;
font-size: 0.72rem;
color: var(--ink-soft);
padding: 0.25rem 0.6rem;
}
.ha-urlrow {
background: var(--paper-alt);
padding: 0.35rem 0.7rem 0.6rem;
font-size: 0.72rem;
color: var(--ink-soft);
font-family: "SFMono-Regular", Consolas, monospace;
}
.ha-screen {
background: #ffffff;
color: #111;
padding: 2rem 1.4rem;
min-height: 190px;
}
/* default browser styling (no css) */
.ha-out-h1 {
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
font-size: 2em;
margin: 0 0 0.6rem;
text-align: left;
color: #111;
transition: color 0.3s ease, font-size 0.3s ease, text-align 0.3s ease;
}
.ha-out-p {
font-family: Georgia, "Times New Roman", serif;
font-size: 1em;
line-height: 1.4;
text-align: left;
margin: 0;
color: #111;
transition: font-family 0.3s ease, font-size 0.3s ease, text-align 0.3s ease, line-height 0.3s ease;
}
/* with css applied */
.ha-screen.ha-styled .ha-out-h1 {
color: royalblue;
font-size: 2.6rem;
text-align: center;
font-family: Georgia, "Times New Roman", serif;
}
.ha-screen.ha-styled .ha-out-p {
font-family: Arial, sans-serif;
line-height: 1.6;
text-align: center;
font-size: 1.5rem;
color: #111;
}
</style>
</head>
<body>
<div class="infographic-cssdemo" id="ha-root">
<div class="ha-inner">
<div class="ha-toggle">
<button id="btn-off" class="ha-on">Without CSS</button>
<button id="btn-on">With CSS</button>
</div>
<div class="ha-browser">
<div class="ha-browser-bar">
<span class="ha-dot"></span><span class="ha-dot"></span><span class="ha-dot"></span>
<div class="ha-tab">🌐 127.0.0.1:5500/basicstructure.htm</div>
</div>
<div class="ha-urlrow">127.0.0.1:5500/basicstructure.html</div>
<div class="ha-screen" id="ha-screen">
<h1 class="ha-out-h1">Hello</h1>
<p class="ha-out-p">This is a paragraph.</p>
</div>
</div>
</div>
</div>
<script>
(function () {
const wrapper = document.getElementById('ha-root');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
})();
(function () {
const screen = document.getElementById('ha-screen');
const btnOn = document.getElementById('btn-on');
const btnOff = document.getElementById('btn-off');
btnOn.addEventListener('click', () => {
screen.classList.add('ha-styled');
btnOn.classList.add('ha-on');
btnOff.classList.remove('ha-on');
});
btnOff.addEventListener('click', () => {
screen.classList.remove('ha-styled');
btnOff.classList.add('ha-on');
btnOn.classList.remove('ha-on');
});
})();
</script>
</body>
</html>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});🧩 CSS Basic Structure
selector {
property: value;
}Selector → What you're styling (e.g.,
h1,p,.class,#id)Property → What aspect you want to change (e.g.,
color,font-size)Value → The new value you want to apply (e.g.,
blue,16px)
♦ Quick Chart – CSS Selectors
Selector Type | Example | What It Targets |
|---|---|---|
Element | p | All <p> tags |
Class | .btn | All elements with class="btn” |
ID | #header | The element with id="header” |
Grouping | h1, p | All <h1> and <p> elements |
Universal | * | Targets everything |
☘ Example: Styling a Button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button Anatomy</title>
<style>
.infographic-btnanatomy {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
box-sizing: border-box;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--paper);
color: var(--ink);
border-radius: 14px;
overflow: hidden;
}
.infographic-btnanatomy[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.ha-layout { display: flex; flex-direction: column; gap: 1.5rem; }
.ha-code {
background: #0b0b0b;
border: 1px solid #2a2a2a;
border-radius: 10px;
padding: 1rem 0.9rem;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.82rem;
line-height: 1.85;
overflow-x: auto;
}
.ha-line {
display: block;
white-space: pre;
color: #8a8a8a;
border-radius: 5px;
padding: 0.05rem 0.4rem;
}
.ha-line.ha-clickable {
cursor: pointer;
color: #e5e5e5;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ha-line.ha-clickable:hover { background: #1c2333; }
.ha-line.ha-active {
background: #1c2333;
box-shadow: inset 3px 0 0 #5b8def;
color: #ffffff;
}
.ha-tag { color: #60a5fa; font-weight: 700; }
.ha-attr { color: #f2b96b; }
.ha-str { color: #9ece6a; }
.ha-comment { color: #5c6370; font-style: italic; }
.ha-prop { color: #c586c0; }
.ha-val { color: #ce9178; }
.ha-sel { color: #f472b6; font-weight: 700; }
.ha-browser {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--paper);
}
.ha-browser-bar {
background: var(--paper-alt);
padding: 0.5rem 0.7rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid var(--line);
}
.ha-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.ha-tab {
background: var(--paper);
border: 1px solid var(--line);
border-bottom: none;
border-radius: 6px 6px 0 0;
font-size: 0.72rem;
color: var(--ink-soft);
padding: 0.25rem 0.6rem;
}
.ha-urlrow {
background: var(--paper-alt);
padding: 0.35rem 0.7rem 0.6rem;
font-size: 0.72rem;
color: var(--ink-soft);
font-family: "SFMono-Regular", Consolas, monospace;
}
.ha-screen {
background: #ffffff;
color: #111;
padding: 1.3rem 1.4rem 1.6rem;
min-height: 90px;
}
.ha-out-wrap {
display: inline-block;
border-radius: 8px;
padding: 0.25rem;
margin-left: -0.25rem;
transition: background 0.2s ease, outline 0.2s ease;
}
.ha-out-btn {
background-color: gray;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ha-out-lit {
background: var(--accent-soft);
outline: 2px solid var(--accent);
}
</style>
</head>
<body>
<div class="infographic-btnanatomy" id="ha-root">
<div class="ha-inner">
<div class="ha-layout">
<div class="ha-code">
<span class="ha-line ha-comment"><!-- HTML Part --></span>
<span class="ha-line ha-clickable" data-part="html"><<span class="ha-tag">button</span> <span class="ha-attr">class</span>=<span class="ha-str">"btn"</span>>Click Me</<span class="ha-tag">button</span>></span>
<span class="ha-line"> </span>
<span class="ha-line ha-comment"><!-- CSS Part --></span>
<span class="ha-line"><<span class="ha-tag">style</span>></span>
<span class="ha-line ha-clickable" data-part="css"> <span class="ha-sel">.btn</span> {</span>
<span class="ha-line ha-clickable" data-part="css"> <span class="ha-prop">background-color</span>: <span class="ha-val">gray</span>;</span>
<span class="ha-line ha-clickable" data-part="css"> <span class="ha-prop">color</span>: <span class="ha-val">white</span>;</span>
<span class="ha-line ha-clickable" data-part="css"> <span class="ha-prop">border</span>: <span class="ha-val">none</span>;</span>
<span class="ha-line ha-clickable" data-part="css"> <span class="ha-prop">padding</span>: <span class="ha-val">10px 20px</span>;</span>
<span class="ha-line ha-clickable" data-part="css"> <span class="ha-prop">font-size</span>: <span class="ha-val">16px</span>;</span>
<span class="ha-line ha-clickable" data-part="css"> <span class="ha-prop">border-radius</span>: <span class="ha-val">5px</span>;</span>
<span class="ha-line ha-clickable" data-part="css"> <span class="ha-prop">cursor</span>: <span class="ha-val">pointer</span>;</span>
<span class="ha-line ha-clickable" data-part="css"> }</span>
<span class="ha-line"></<span class="ha-tag">style</span>></span>
</div>
<div class="ha-browser">
<div class="ha-browser-bar">
<span class="ha-dot"></span><span class="ha-dot"></span><span class="ha-dot"></span>
<div class="ha-tab">🌐 127.0.0.1:5500/basicstructure.htm</div>
</div>
<div class="ha-urlrow">127.0.0.1:5500/basicstructure.html</div>
<div class="ha-screen">
<span class="ha-out-wrap" id="out-wrap">
<button class="ha-out-btn" id="out-btn">Click Me</button>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
(function () {
const wrapper = document.getElementById('ha-root');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
})();
(function () {
const wrapOut = document.getElementById('out-wrap');
const lines = document.querySelectorAll('.ha-line.ha-clickable');
lines.forEach(line => {
line.addEventListener('click', () => {
const part = line.getAttribute('data-part');
document.querySelectorAll('.ha-line').forEach(l => {
l.classList.toggle('ha-active', l.getAttribute('data-part') === part);
});
wrapOut.classList.add('ha-out-lit');
});
});
})();
</script>
</body>
</html>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});🌱 How to Add CSS (3 Ways)
Method | Description | Where it goes |
|---|---|---|
Inline CSS | Styles written directly in HTML elements | Not recommended |
Internal CSS | CSS inside a <style> tag in the HTML <head> | Good for small sites |
External CSS | CSS in a separate .css file | Best practice |
✅ CSS in One Line
CSS controls how your webpage looks — colors, fonts, spacing, layout, animations — all the visual stuff!