Build a card with CSS

Task

Create a product card (image, title, price, button) and link an external styles.css file in the <head>.

Requirements

The <head> contains <link rel="stylesheet" href="styles.css">
The card is wrapped in <div class="card">
Inside the card there's an img, a heading, a price, and a button
No inline styling via the style attribute

Starter code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Product card</title>
</head>
<body>
</body>
</html>

▶ Open in HTML Editor

Hints

A link in head loads CSS before the browser starts painting body — that's the right place for it.
The card class is then styled in styles.css, not through style="..." on the element itself.

Show solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Product card</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <img src="product.jpg" alt="Wireless headphones">
    <h2>Wireless headphones</h2>
    <p class="price">$59</p>
    <button>Buy now</button>
  </div>
</body>
</html>

Related tools

HTML Editor Online

An online HTML editor with syntax highlighting, line numbers, and a live preview. No sign-up, no server.

Linking CSS

How to link an external CSS file or set styles directly in head.

CSS Minifier

Minify a CSS file online, see the before/after size and the percentage saved. No server.