CSS in Practice

Uploaded : 3 months ago Updated : 3 months ago beginner

Take The Quiz

Let’s style for real

Apply what you learned: you’ll style a profile card from scratch and pick up a clean, maintainable workflow.

Project: a profile card

Write the HTML: a container with an image, a name and a short bio.
Link an external stylesheet and add a class on the card.
Style the box: padding, border-radius and a subtle shadow.
Use Flexbox to centre the card on the page.

The CSS

.card {
  max-width: 320px;
  margin: 40px auto;
  padding: 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  text-align: center;
}
.card img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

Use the browser DevTools

Right-click → Inspect. You can tweak CSS live and see changes instantly before editing your file.

Good habits vs. common mistakes

Do ✓	Don’t ✗
Reuse classes for repeated styles	Repeat the same rules everywhere
Use `rem` / % / Flexbox / Grid	Hard-code pixel positions
Keep one external stylesheet	Scatter inline `style` attributes
Use `box-sizing: border-box`	Fight unexpected widths

Watch out for these

A misspelled property is silently ignored, a missing unit (width: 100 instead of 100px) breaks layout, and overusing !important makes CSS unmaintainable.

The details are not the details. They make the design.Charles Eames

Why isn’t my CSS applying?

Check the <link> path, look for a typo in the selector or property, and inspect specificity — a more specific rule may be winning.

How do I centre a div?

With Flexbox on the parent: display:flex; justify-content:center; align-items:center;.

What’s next after CSS?

JavaScript — it makes your styled page interactive.

CSS in Practice

Project: a profile card

The CSS

Good habits vs. common mistakes

Keep going

Comments