⚡ 0 XP
Step 1 of 2
Your first CSS rule
HTML says what things are. CSS says how they look. A CSS rule has a selector and declarations:
h1 { color: crimson; }h1 is the selector — it picks every <h1>color is a property and crimson is its value- each declaration ends with a semicolon
;
In these challenges you only write CSS; the HTML page is already made for you.
h1 {
color: crimson;
}
body {
background-color: lightyellow;
}
🎯 Challenge: Colour Gupta Sweets +10 XP
Write CSS so that:
- the
h1 text has a colour (not black) - the
body has a light background colour (not white)
Try twice to unlock the solution (0/2)
style.cssCtrl ⏎
Console
Output from console.log appears here.
Checklist
Press Run to check your code.
Lesson notes (text version)
1. Your first CSS rule
HTML says what things are. CSS says how they look. A CSS rule has a selector and declarations:
h1 { color: crimson; }h1 is the selector — it picks every <h1>color is a property and crimson is its value- each declaration ends with a semicolon
;
In these challenges you only write CSS; the HTML page is already made for you.
h1 {
color: crimson;
}
body {
background-color: lightyellow;
}
Challenge: Colour Gupta Sweets
Write CSS so that:
- the
h1 text has a colour (not black) - the
body has a light background colour (not white)
2. Classes and ids
A tag selector styles every tag of that kind. To style only some elements, give them names in HTML:
class="veg" — many elements can share a class. Select it with a dot: .veg { … }id="today" — an id is unique on the page. Select it with a hash: #today { … }- an element can have several classes:
class="veg special"
Prefer classes for styling; use ids for one-of-a-kind things.
.veg {
color: green;
}
#today {
background-color: gold;
}
Challenge: Udupi café menu
Style the menu using selectors:
- every
.veg item gets a colour (not black) — the coffee line without a class must stay black - the
.special item is bold (font-weight: bold) #today gets a background colour