🤖

Kodi's Code Clubhouse

Learn HTML, CSS & JavaScript — and build your first website!

A Koinder Global Limited production

🔒

This lesson is part of Kodi Premium

Unlock unlimited access to HTML, CSS, JavaScript, the Website Project, Python, and unlimited questions to Kodi.

🎨 CSS — Bobo's Clothes

Remember Bobo? His body (HTML) already exists — arms, legs, head. But right now he might be walking around with no style at all!

CSS is exactly like choosing Bobo's clothes. The same body can wear a red shirt or a blue shirt, big shoes or small shoes — the body underneath never changes, only how it LOOKS.

CSS always follows the pattern: selector { property: value; } — think of it as "which part of Bobo" + "what are we changing about it."

Try changing hotpink below to gold or skyblue and watch Bobo's shirt change instantly!

🏆 Meet the Man Who Invented CSS
HL

Håkon Wium Lie

In 1994, working at CERN — the very place the web was born — he noticed every website tangled "what things are" and "how they look" into one messy pile. He proposed keeping them completely separate.

That one idea became CSS (Cascading Style Sheets) — a whole language whose only job is "how things look," leaving HTML to just say "what things are." That's exactly why you can change Bobo's shirt color without ever touching his body!

🔤 Why Does the Code Look Like THIS? Look at .bobo-torso-el { background: hotpink; } — every symbol has a job:

Curly braces { } wrap up ALL the styling rules for one part of Bobo together — like a labeled folder that only contains torso instructions.

The colon ( : ) connects a property to its value, almost like saying "this equals that" — background: hotpink means "the background property equals hotpink."

The semicolon ( ; ) marks the end of one instruction, like a full stop at the end of a sentence, before the next rule begins.

Håkon chose curly braces and semicolons because they were already familiar symbols from other languages at the time — reusing a shared "alphabet" instead of inventing a brand new one from scratch.

🎨 Common CSS Properties — One at a Time

Just like HTML tags, CSS properties click faster with repetition. Here are the ones you'll use constantly.

color: hotpink;
color changes the color of TEXT.
Hello!
background: gold;
background changes the color BEHIND something — like Bobo's shirt.
Box
padding: 20px;
padding adds space INSIDE a box, between its edge and its content.
Padded
border-radius: 20px;
border-radius rounds off sharp corners — the bigger the number, the rounder!
font-size: 28px;
font-size makes text bigger or smaller.
Big!
text-align: center;
text-align lines text up left, center, or right.
Centered

👉 Try changing Bobo's colors in the playground below — mix and match these properties!

🛠️ Your Playground

HTML
CSS
JavaScript
👀 Your Website

🎉 Bobo's looking sharp now!

He's still frozen though — ready to bring him to life with movement?

✨ Next: JavaScript — Bobo Comes Alive →
🏅

An Official Koinder Skills Academy Programme

Kodi's Code Clubhouse is produced by Koinder Global Limited. Koinder Global Limited is licensed by the FCT Department of Mass Education to provide vocational skills training and run Non-Formal Education programmes.

Lead Tutor & Curriculum Developer: Glory N. Nweke

`; previewFrame.srcdoc = doc; } [htmlBox, cssBox, jsBox].forEach(box => box.addEventListener('input', renderPreview)); htmlBox.value = `

My Colorful Page

\n

CSS makes things pretty!

\n
I'm a box
`; cssBox.value = `h1 { color: hotpink; }\n.box {\n background: gold;\n padding: 20px;\n border-radius: 12px;\n width: 150px;\n margin: 0 auto;\n}`; jsBox.value = ``; renderPreview(); markLessonSeen('css'); document.getElementById('cssIntroSpeakBtn').addEventListener('click', ()=>{ speakText("Remember Bobo? His body, HTML, already exists, arms, legs, head. But right now he might be walking around with no style at all! CSS is exactly like choosing Bobo's clothes. The same body can wear a red shirt or a blue shirt, big shoes or small shoes, the body underneath never changes, only how it looks. In 1994, working at CERN, Hakon Wium Lie noticed every website tangled what things are and how they look into one messy pile. He proposed keeping them completely separate. That one idea became CSS."); });