🎓 A1Learner
🔍

CSS Project: Style a Page

This project styles the whole practice page with one stylesheet. Every technique in it was taught in this course.

The palette

Two variables hold the colour scheme. The heading and the box read them straight away.

:root {
  --main: #2e7d32;
  --soft: #e8f5e9;
}
h1 {
  color: var(--main);
}
.box {
  background-color: var(--soft);
}

The navigation bar

The list becomes a green bar with its items in a row. Each item is padded white text.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  background-color: #2e7d32;
}
li {
  color: white;
  padding: 8px 12px;
}

The full stylesheet, narrow screen

The closing example uses this exact stylesheet. This render pins the width at 500 pixels, and the media query stacks the bar into a column.

:root {
  --main: #2e7d32;
  --soft: #e8f5e9;
}
h1 {
  color: var(--main);
  text-align: center;
}
p.intro {
  font-size: 18px;
}
.box {
  background-color: var(--soft);
  border: 2px solid var(--main);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 6px gray;
}
.box h2 {
  color: var(--main);
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  background-color: var(--main);
}
li {
  color: white;
  padding: 8px 12px;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid gray;
  padding: 8px;
}
th {
  background-color: var(--main);
  color: white;
}
.pic {
  border-radius: 12px;
}
button {
  background-color: var(--main);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}
#demo {
  color: var(--main);
  text-align: center;
}
@media (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}

Example

:root {
  --main: #2e7d32;
  --soft: #e8f5e9;
}
h1 {
  color: var(--main);
  text-align: center;
}
p.intro {
  font-size: 18px;
}
.box {
  background-color: var(--soft);
  border: 2px solid var(--main);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 6px gray;
}
.box h2 {
  color: var(--main);
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  background-color: var(--main);
}
li {
  color: white;
  padding: 8px 12px;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid gray;
  padding: 8px;
}
th {
  background-color: var(--main);
  color: white;
}
.pic {
  border-radius: 12px;
}
button {
  background-color: var(--main);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}
#demo {
  color: var(--main);
  text-align: center;
}
@media (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}

Key points

  • Read a long stylesheet in groups, one element at a time
  • Variables come first, so the colours are set before any rule reads them
  • A colour scheme ties separate elements into one design
  • A media query at the end adjusts the layout for narrow screens
  • Deeper layout work and more effects build on this foundation

In this example, the :root rule stores the green scheme in two variables. The heading reads the main green and centres its text. The introduction gets a larger size. The box becomes a card with the soft background, a green border, rounded corners, padding and a shadow. The list becomes a horizontal bar on the main green, with padded white items. The table collapses its borders and paints its header row green. The image gets rounded corners, and the button matches the scheme. The final media query stacks the bar into a column on narrow screens.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What changes across the page if --main is set to navy on :root?