CSS Properties

Creating a CSS Class

A CSS class allows you to reuse a style on multiple elements.

.button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Usage in HTML

<button class="button">Click me</button>
<button class="button">Or me</button>

Essential first styles

Text color: `color`

Applies a purple color to the text.

.title {
  color: purple;
}

Background color: `background-color`

Gives a light gray background to the element.

.box {
  background-color: lightgray;
}

Corner rounding: `border-radius`

Makes corners rounded.

.card {
  border-radius: 15px;
}

Center text: `text-align`

Aligns text to the center.

.center-text {
  text-align: center;
}

Guided practice: User card

Basic HTML

<div class="card">
  <h2 class="title">John Doe</h2>
  <p class="text">Passionate web developer.</p>
</div>

Associated CSS

.card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 24px;
  color: #333;
}

.text {
  font-size: 16px;
  color: #666;
}

Expected result

A nice user card with a light background, rounded corners, and a light shadow. Une jolie carte d'utilisateur avec un fond clair, des coins arrondis, et une ombre légère.