Generation STEM
Learning LibraryWebsite Development LibraryKids

CSS basics: give your page colors and style

HTML builds your page. CSS dresses it up — colors, spacing, fonts, rounded corners. It's how a plain page becomes one that looks great.

The big idea

CSS is a set of style rules that change how your HTML looks, like its colors and spacing.

See it in code

1Start simple

CSS rules live inside a <style> tag. Each rule picks a tag and gives it a new look. This one picks h1 and paints it indigo:

html
<style>
  h1 { color: #4f46e5; }
</style>

<h1>My Space Page</h1>
One rule, and the heading changes color:

h1 { color: #4f46e5; } means 'make headings this color'. That's the whole shape of a rule: pick a tag, then set a look.

2A step further

Add more rules to style more of the page. Here body gets a soft background and a clean font, while the heading keeps its color:

html
<style>
  body { background: #f0f4ff; font-family: sans-serif; }
  h1 { color: #4f46e5; }
</style>

<h1>My Space Page</h1>
<p>Welcome! A page about planets and stars.</p>
The page gets a background and a font:

Each rule targets one tag. Stack up a few rules and the whole page starts to come to life.

3In our world

Now style the paragraph too. Give p some padding (space inside), a white background, and rounded corners:

html
<style>
  body { background: #f0f4ff; font-family: sans-serif; }
  h1 { color: #4f46e5; }
  p {
    color: #333;
    padding: 12px;
    background: white;
    border-radius: 10px;
  }
</style>

<h1>My Space Page</h1>
<p>Welcome! This paragraph has its own color, padding, and rounded corners.</p>
The same page, now with color and style:

Each rule says what to style and how. h1 { color: #4f46e5; } means 'make headings indigo'. Change a color or a number, and the look updates right away.

The same idea, everywhere

CSS styles every website you see. The colors of your favorite app, the spacing between buttons, the rounded photo corners — all CSS. HTML says what's on the page; CSS says how it looks.

Try it yourself

Change the background color to #fff0f0 for a soft pink page. Then make the heading bigger by adding font-size: 40px; to the h1 rule.

The common mistake

Forgetting the semicolon ; at the end of a style, or the curly braces { }. Each rule needs its braces, and each line inside ends with a semicolon. Miss one, and that style quietly won't work.

What it unlocks

CSS styles the tags you learned in HTML, and grows into full layouts with responsive design.

Older, or want more depth? Read the Teens version →

Related concepts