Trading Card

What this page does

1. It shows one trading card in the middle of the page.
2. The HTML is nine elements stacked one under another. On their own they would look like a plain list of text.
3. Every one of them has a class. The stylesheet finds them by that class. It turns the stack into a card.

A class is a label

<div class="card">

.card {
    width: 300px;
    padding: 1.25rem;
}

class is a name you put on an element. In the stylesheet, the dot in front of .card means any element with that class. A selector with no dot matches a tag name instead.

You can put the same class on as many elements as you like. That is the point of a class. Lesson 5 needs exactly that: three cards, one rule.

<div> and <span> are two tags with no meaning of their own. A <div> groups blocks and starts a new line. A <span> wraps a few words and stays on the same line. Neither one changes how the page looks until your CSS says so. They exist so you have something to put a class on.

The box model

Every element on a page is a box. Every box has four layers.

margin: 3rem auto;

Four values in margin go clockwise from the top: top, right, bottom, left. Two values mean top and bottom, then left and right. auto on the sides means share the leftover space equally. That centres the box. It only works when the box has a width. This card has one.

The two properties that make it look real

border-radius: 1rem;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);

• border-radius rounds the corners. 0 gives sharp corners. A big number makes a pill.
• box-shadow takes four values: how far right, how far down, how blurred, and what colour. Put the shadow slightly below the element. That makes the element look lifted off the page.

Build it step by step

Build the HTML first. Do not add a stylesheet yet. Add the CSS afterwards, one property at a time.

1. 1

   Make the page and the outer box

   Start a new index.html with ! and Tab. Inside <body>, add one <div> with class="card".

2. 2

   Fill the card

   Inside the div, add the rarity, the name, the art box, the quote, and a list of stats. Give each one a class. Reload the page. You get a plain stack of text. That is correct for now.

   <div class="card">
       <p class="rarity">Rare</p>
       <h1 class="name">Cinder Fox</h1>
       <div class="art">🦊</div>
       <p class="quote">Sleeps in warm ash. Wakes up grumpy.</p>
   </div>

3. 3

   Link the stylesheet

   Make index.css in the same folder. Add the <link> line inside <head>. Put one rule in the file to prove it is connected. Then reload the page.

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

4. 4

   Give the card a shape

   Write the .card rule with only width, background, and border. Reload the page. You get a box. It sits at the left edge of the page.

5. 5

   Move it and pad it

   Add margin: 3rem auto. The card jumps to the middle. Then add padding. The text stops touching the border.

6. 6

   Polish

   Add border-radius, then box-shadow, then text-align: center. Reload after each one. These three lines turn a box into a card.

7. 7

   Style the inside

   Write the rules for .rarity, .name, .art, .quote, and .stats. Do one rule at a time. Reload after each one.