Your page has structure. It still looks like a browser default. This lesson attaches CSS, the language that controls how HTML looks, and proves the attachment with one visible colour change.
The concept
Here is your page as it stands. Run it:
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<meta charset="UTF-8" />— Sets how the browser decodes the text. Taught in lesson 6.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.
Everything is readable. Nothing is designed. Default fonts, default colours, default spacing. HTML answered what each piece is. It never answered how those pieces should look.
Here is a bare heading. Run it:
Now the same heading after one short instruction. Run it:
The words did not change. The colour did. That instruction is CSS: Cascading Style Sheets, the language browsers use to paint HTML. Cascading will matter later, when more than one rule targets the same thing. For this lesson, hold onto the simpler fact: CSS is how you describe look.
The syntax
CSS lives in a <style> element, usually placed inside <head>, next to <title>:
<head>
<meta charset="UTF-8" />
<title>Your Name</title>
<style>
h1 {
color: darkslateblue;
}
</style>
</head>Inside <style>, you write rules. A rule has two parts:
- A selector, naming which elements the rule applies to. Here,
h1means every<h1>on the page. - A pair of braces
{ }holding one or more declarations. Each declaration is a property, a colon, a value, and a semicolon:color: darkslateblue;.
Read that rule aloud as: "For every h1, set the text colour to dark slate blue."
color is a CSS property, not an HTML attribute. It belongs inside the style block, not on the <h1> tag itself.
A minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>First rule</title>
<style>
h1 {
color: darkslateblue;
}
</style>
</head>
<body>
<h1>Your Name</h1>
</body>
</html>One rule. One visible change. That is enough to prove CSS is attached.
Common mistakes
Your heading stays its default colour. If you wrote color="darkslateblue" on the <h1> tag the way attributes worked in Act I, colour is in the wrong place. It is not an HTML attribute on headings. It is a CSS property, and it belongs inside a rule in <style>.
You Run, and nothing changes, with no error message. Read the property name character by character. A typo like colr: darkslateblue; instead of color is ignored in silence. Unknown properties do not stop the rest of the page; they do nothing.
The colour still will not apply, even though the spelling looks right. Check for missing braces or a missing colon: h1 color: darkslateblue; with no { }, or h1 { color darkslateblue; } with no colon. The browser cannot parse that rule and skips it without saying so. A working rule always has a selector, braces, and property: value; inside.
Try it yourself
Your profile page is still wearing browser defaults. Give the main heading a colour.
- Run the starting code below. Confirm your name at the top looks like ordinary default text, not a colour you chose.
- Inside
<head>, under the<title>, add a<style>block. - Inside that block, write a rule that selects
h1and setscolorto a named colour you can recognise, such asdarkslateblueorteal. - Run it. Confirm your name changes colour. That is the check that CSS is attached.
- Break it on purpose: change
colortocolr, leave everything else the same, and Run. Confirm the heading falls back to the default colour with no error message. Putcolorback and watch the chosen colour return.
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<meta charset="UTF-8" />— Sets how the browser decodes the text. Taught in lesson 6.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
Your page now has one deliberate look: a coloured name. The structure from Act I is unchanged. Next: aim CSS more precisely than every heading on the page, so About, Skills, and Contact can take different styles without colliding.