Lesson 2 — Paint the Bulletin Board

Howdy. Lesson 1 gave us a working page that looks like a school report. That is not a failure. HTML is only the bones. CSS is the paint.

We are going to make this Ranch Record Card look like it could hang in a sale barn office: warm paper, dark wood header, a table that reads like a clipboard. Same animals. Same words. New file.

What you are making

In the same folder as your page, create a second file and name it styles.css. Then, up in the head of your HTML file, add one line so the browser knows to use that paint:

<link rel="stylesheet" href="styles.css">

Save both files. If you skip that link, you can type CSS all day and the page will stay gray.

Here is the finished look

This is the same herd as Lesson 1, after the paint. Scroll it. Then come back and we will build that look in two steps.

Step 1 — ranch colors

Open styles.css and start with the whole page. Georgia is a serif typeface, closer to a printed record than a coding font. The background is a dusty paper color. The header is dark brown, like stained wood.

body {
  font-family: Georgia, "Times New Roman", serif;
  margin: 0;
  background: #f3ead3;
  color: #2b2118;
}
header {
  background: #3d2914;
  color: #f3ead3;
  text-align: center;
  padding: 32px 16px;
}
h1 { margin: 0 0 8px; }
.tagline { margin: 0; font-style: italic; }
main { max-width: 800px; margin: 0 auto; padding: 24px 16px; }
footer {
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  color: #5c4a3a;
}

Save, then refresh your browser. The top of the page should go dark and the type should feel more like a printout than a default web page. If nothing changed, the link line in the HTML is missing or the two files are not in the same folder.

Step 2 — the table as a card

Now the herd list. We want one card, not a grid of browser-blue lines. Cream background, brown header row, a little shadow so it sits on the paper.

table {
  width: 100%;
  border-collapse: collapse;
  background: #fffaf0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e2d3b3;
}
th {
  background: #6b4f2a;
  color: #fffaf0;
}
tr:hover td { background: #f6e7c1; }

Save and refresh again. Hover a row. If it warms up like a highlighter on a clipboard, you are done with Lesson 2.

You did not change the herd. You only changed how a person feels when they look at it. That is CSS.

Next lesson, the page starts doing the arithmetic so you do not have to.