This page shows the CSS tools you use to build cards and simple webpages. You do not need to memorize everything. Use it while building.
These are the 11 essential CSS properties. If you can build cards using only these, your foundation is strong.
| Property | Example | What it does |
|---|---|---|
| color | color: white; | Text color |
| background-color | background-color: black; | Background color |
| width | width: 200px; | Element width |
| height | height: 50px; | Element height |
| border-color | border-color: red; | Border color |
| border-width | border-width: 3px; | Border thickness |
| border-style | border-style: solid; | Makes border visible |
| border-radius | border-radius: 8px; | Rounded corners |
| font-size | font-size: 18px; | Text size |
| font-weight | font-weight: bold; | Text thickness |
| font-family | font-family: Arial; | Font style |
| Concept | Example | What it does |
|---|---|---|
| div | <div> | A box |
| span | <span> | Inline text |
| class | .card {} | Styles many |
| id | #main {} | Styles one |
| padding | padding: 15px; | Space inside |
| margin | margin: 20px; | Space outside |
| text-align | text-align: center; | Align text |
| width: 100% | width: 100%; | Fill parent |
| border | border: 2px solid black; | Border shorthand |
| linear-gradient | background: linear-gradient(to bottom, navy, crimson, orange); |
Blends multiple colors smoothly |
| box-shadow | box-shadow: 0 8px 18px rgba(0,0,0,0.25); |
Adds depth under a card |
| aspect-ratio | aspect-ratio: 3 / 4; | Card shape |
The display property decides how a box behaves.
| Value | Meaning |
|---|---|
block | Big box, own line (default for div) |
inline | Acts like text (no width or height) |
inline-block | Box that sits in a row (best for cards) |
Each card is on its own line.
Inline elements act like text.
They ignore width and height, so cards break.
Cards stay boxes and sit in a row.
color: #1F214D;
background-color: rgb(30, 30, 60);
box-shadow: 0 8px 18px rgba(0,0,0,0.18);
rgb() uses numbers from 0–255.
rgba() adds transparency (alpha).
Hex is a short color code starting with #.
background: linear-gradient(to bottom, #1F214D, #BF3475, #FFCE61);
Gradients blend colors smoothly. 2–3 colors is usually enough.
Padding = space inside the box (content moves inward)
Margin = space outside the box (the box moves away from other things)
/* ONE number – all sides */
padding: 10px;
Adds 10px of space on all four sides inside the box. The content moves inward evenly.
/* TWO numbers – vertical, horizontal */
padding: 10px 20px;
10px on top and bottom
20px on left and right
This is very common for buttons and cards.
/* FOUR numbers – top, right, bottom, left */
padding: 10px 0 30px 20px;
This follows the clock rule:
Top = 10px
Right = 0px
Bottom = 30px
Left = 20px
margin: 20px;
Adds 20px of space outside the box on all sides. The box moves away from other elements.
margin: 10px 30px;
10px top and bottom
30px left and right
Useful when spacing cards horizontally.
margin: 10px 0 30px 20px;
Top = 10px
Right = 0px
Bottom = 30px
Left = 20px
margin: auto;
Tells the browser to automatically center the box horizontally.
Works only when the element has a width.
Memory tip:
4 numbers always go like a clock:
top → right → bottom → left
(12 → 3 → 6 → 9)
Order is like a clock: top → right → bottom → left
A shadow makes a card feel lifted off the page.
box-shadow: 7px 0 0 black;
7px moves the shadow to the right.
Negative numbers move it left.
box-shadow: 0 7px 0 black;
7px moves the shadow downward.
Negative numbers move it upward.
box-shadow: 0 8px 18px rgba(0,0,0,0.25);
Explanation of each part:
Why use rgba for shadows?
Real shadows are not solid black.
Transparency makes them look soft and natural.
Good rule of thumb:
Small X, medium Y, soft blur, transparent black.
aspect-ratio: 3 / 4;
Set width OR height — not both. The browser keeps the shape.
You are not expected to remember everything. This page is your toolbox.