🔍 Selector — What You're Targeting
Think of the selector as pointing at an element and saying "I want to style this."
Examples:
p→ targets every<p>tag.title→ targets any element withclass="title"#main→ targets the single element withid="main"
🎨 Property — What Aspect You're Changing
Once something's selected, the property decides which visual trait gets touched.
Examples:
color→ text colorfont-size→ text sizebackground-color→ background fillmargin→ spacing outside the element
🎯 Value — How You Want It Changed
Every property needs a value — the actual setting that defines the new look.
Examples:
red,blue,#333,rgb(255, 0, 0)→ color values16px,2em,100%→ size valuescenter,left,bold→ alignment/text-style values
🧱 Putting It All Together (Basic Syntax)
selector {
property: value;
}Real example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Teal Heading Anatomy</title>
<style>
.infographic-tealheading {
--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-tealheading[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-wrap {
background: #0b0b0b;
border: 1px solid #2a2a2a;
border-radius: 10px;
overflow: hidden;
}
.ha-filetabs {
display: flex;
background: #161616;
border-bottom: 1px solid #2a2a2a;
}
.ha-filetab {
border: none;
background: transparent;
color: #8a8a8a;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.78rem;
font-weight: 700;
padding: 0.6rem 1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ha-filetab:hover { color: #e5e5e5; }
.ha-filetab.ha-tab-on {
color: #ffffff;
border-bottom-color: #5b8def;
background: #0b0b0b;
}
.ha-code {
padding: 1rem 1.8rem 1rem 0.9rem;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.8rem;
line-height: 1.85;
overflow-x: auto;
}
.ha-codepane { display: none; }
.ha-codepane.ha-pane-on { display: block; }
.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-sel { color: #f9a8d4; font-weight: 700; }
.ha-prop { color: #c586c0; }
.ha-val { color: #ce9178; }
.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.6rem 1.4rem;
min-height: 90px;
}
.ha-out-h1 {
font-family: Georgia, "Times New Roman", serif;
color: teal;
font-weight: 700;
font-size: 1.5rem;
text-align: center;
margin: 0;
padding: 0.15rem 0.4rem;
border-radius: 6px;
transition: background 0.2s ease, outline 0.2s ease;
}
.ha-out-lit {
background: var(--accent-soft);
outline: 2px solid var(--accent);
}
</style>
</head>
<body>
<div class="infographic-tealheading" id="ha-root">
<div class="ha-inner">
<div class="ha-layout">
<div class="ha-code-wrap">
<div class="ha-filetabs">
<button class="ha-filetab ha-tab-on" id="tab-html">index.html</button>
<button class="ha-filetab" id="tab-css">style.css</button>
</div>
<div class="ha-code">
<div class="ha-codepane ha-pane-on" id="pane-html">
<span class="ha-line"><<span class="ha-tag">body</span>></span>
<span class="ha-line ha-clickable" data-part="h1"> <<span class="ha-tag">h1</span>>This is a centered teal heading</<span class="ha-tag">h1</span>></span>
<span class="ha-line"></<span class="ha-tag">body</span>></span>
</div>
<div class="ha-codepane" id="pane-css">
<span class="ha-line ha-clickable" data-part="h1"><span class="ha-sel">h1</span> {</span>
<span class="ha-line ha-clickable" data-part="h1"> <span class="ha-prop">color</span>: <span class="ha-val">teal</span>;</span>
<span class="ha-line ha-clickable" data-part="h1"> <span class="ha-prop">font-size</span>: <span class="ha-val">32px</span>;</span>
<span class="ha-line ha-clickable" data-part="h1"> <span class="ha-prop">text-align</span>: <span class="ha-val">center</span>;</span>
<span class="ha-line ha-clickable" data-part="h1">}</span>
</div>
</div>
</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">🌐 Page Title</div>
</div>
<div class="ha-urlrow">127.0.0.1:5500/basicstructure.html</div>
<div class="ha-screen">
<h1 class="ha-out-h1" id="out-h1">This is a centered teal heading</h1>
</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 tabHtml = document.getElementById('tab-html');
const tabCss = document.getElementById('tab-css');
const paneHtml = document.getElementById('pane-html');
const paneCss = document.getElementById('pane-css');
tabHtml.addEventListener('click', () => {
tabHtml.classList.add('ha-tab-on');
tabCss.classList.remove('ha-tab-on');
paneHtml.classList.add('ha-pane-on');
paneCss.classList.remove('ha-pane-on');
});
tabCss.addEventListener('click', () => {
tabCss.classList.add('ha-tab-on');
tabHtml.classList.remove('ha-tab-on');
paneCss.classList.add('ha-pane-on');
paneHtml.classList.remove('ha-pane-on');
});
const outH1 = document.getElementById('out-h1');
document.querySelectorAll('.ha-line.ha-clickable').forEach(line => {
line.addEventListener('click', () => {
document.querySelectorAll('.ha-line').forEach(l => l.classList.remove('ha-active'));
line.classList.add('ha-active');
outH1.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!');
});This will:
Target all <h1> elements
Make the text teal, 32px, and centered
✅ Quick Summary
Term | Meaning | Example |
|---|---|---|
Selector | What you're styling | p, .box, #nav |
Property | What part you're changing | color, margin |
Value | How you want it to look | Blue, 20px |