Module 9: A Touch of CSS · Lesson 6 of 6
How to Style a Business Card with HTML and CSS
All lessons in Module 9
Goal: Turn a plain business card into a styled one with everything from this module.
Learn
You need less CSS than you might think. A card that looks professional usually takes four things:
- A page background and a readable font-family on
body, which the whole page inherits. - A class on the card, so a single rule can style it.
- The box model on that class, as practised in the box model lesson: a fixed width, padding inside, a border, a margin to center it, and a background color of its own so it stands out from the page.
- An accent color for the name.
Go in small steps and look at the preview after each declaration. If nothing changes, check the punctuation. One missing colon, semicolon or brace and the browser skips the rule.
The short version
- Text properties such as
color,font-familyandfont-sizeare inherited, so you set them once onbody. - Box properties such as
padding,border,marginandbackground-colordon't inherit. Every box sets its own. - A single class rule can hold everything a component needs, and the HTML only needs
class="card". - A missing semicolon breaks the next declaration. A missing brace can break every rule after it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Card</title>
<style>
body {
background-color: #eef2f5;
font-family: Verdana, sans-serif;
}
.badge {
width: 220px;
padding: 12px;
border: 1px solid #99a;
margin: 20px auto;
background-color: white;
}
</style>
</head>
<body>
<div class="badge">Hello, my name is Sam</div>
</body>
</html>Your task
Ada Park is an illustrator, and her business card should look like it. With a <style> element in the head:
- Give
bodyabackground-colorand afont-family. - Add
class="card"to the<div>. - In a
.cardrule, set awidth,padding, aborderwith a style likesolid, amarginand abackground-color. - Give the
h1acolor.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
h1 {
font-family: Verdana, sans-serif;
}
p {
font-family: Verdana, sans-serif;
}
a {
font-family: Verdana, sans-serif;
}Right
body {
font-family: Verdana, sans-serif;
}Fonts inherit, so a single body rule covers every element inside it and leaves one place to change later.
Wrong
.card {
width: 280px;
padding: 20px;
h1 {
color: #c0392b;
}Right
.card {
width: 280px;
padding: 20px;
}
h1 {
color: #c0392b;
}With the closing brace missing, the browser reads the h1 rule as part of .card, and the styles after it fail.
Go deeper
Two small properties make a card look far more polished. border-radius: 8px; rounds the corners, and border-radius: 50%; on the photo turns a square image into a circle. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); lifts the card off the page with a soft shadow. Keep shadows subtle; heavy ones look dated. Both properties come from the W3C CSS Backgrounds and Borders (opens in a new tab) spec.
Think about small screens as well. Swap width: 280px for max-width: 280px and the card shrinks on narrow phones and stops overflowing. The viewport tag from Module 7 makes phones use their real width.
Then look at the link. The email address is the one thing visitors act on, so give it a color with good contrast (opens in a new tab) against the card, plus an underline or another obvious sign that it is clickable.
Working developers often build a small, self-contained piece like this first, called a component, and reuse it. The same .card rule could style a team page with ten people on it. Before you copy it into another project, an online CSS editor and formatter (opens in a new tab) can tidy or minify it.
Take a screenshot after each step. Side by side, they show what each property added, and next time you will know which one to reach for.
Frequently asked questions
How do I make a business card in HTML and CSS?
Start with the content in HTML: a wrapping <div class="card"> holding a photo, the name in a heading, a short role line and a contact link. Then style it. Put a page background and font on body, and write a .card rule with a width, padding, border, margin (auto left and right to center it) and a background color of its own. Last, give the name an accent color.
Which CSS properties are inherited?
Mostly the text ones: color, font-family, font-size, font-weight, line-height, text-align and their relatives. Box and layout properties such as width, padding, border, margin and background-color don't inherit. So text styles go on body and box styles go on a class. Links are the odd one out, because browsers give them a default color of their own.
Why is my CSS not working?
Round up the usual suspects. A typo in a property name. A missing colon, semicolon or brace. A value without a unit. A selector that doesn't match (.Card versus class="card", say). Or another rule that wins by being more specific or coming later. Select the element in DevTools: invalid declarations carry a warning icon and overridden ones are crossed out. The W3C CSS Validation Service (opens in a new tab) also lists every syntax error with its line number.