What is Writing reusable CSS?

CSSmarkup~5 mins

Writing reusable CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Reusable CSS helps you write styles once and use them many times. This saves time and keeps your website consistent.

You want to style buttons the same way across many pages.

You need a common layout style for multiple sections.

You want to apply the same font and colors to headings everywhere.

You want to avoid repeating the same CSS code again and again.

You want to make future changes easier by updating one place.

Syntax

CSS

.className {
  property: value;
}

/* Then use the class in HTML */
<div class="className">Content</div>

Use classes to create reusable styles that can be applied to many elements.

Avoid using IDs for reusable styles because IDs are unique and meant for single elements.

Examples

This class styles buttons with a blue background and white text. You can add class="btn" to any button to get this style.

CSS

.btn {
  background-color: #007BFF;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

This class centers text horizontally. Use class="text-center" on any element to center its text.

CSS

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

This class creates a simple card style with border and shadow. Apply class="card" to containers you want to look like cards.

CSS

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Sample Program

This example shows three reusable CSS classes: .btn for buttons, .text-center for centering text, and .card for a styled container. You can mix and match these classes on HTML elements to reuse styles easily.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Reusable CSS Example</title>
  <style>
    .btn {
      background-color: #28a745;
      color: white;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 0.3rem;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .btn:hover {
      background-color: #218838;
    }
    .text-center {
      text-align: center;
    }
    .card {
      border: 1px solid #ddd;
      padding: 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      max-width: 300px;
      margin: 1rem auto;
    }
  </style>
</head>
<body>
  <div class="card text-center">
    <h2>Welcome!</h2>
    <p>This is a card with centered text.</p>
    <button class="btn">Click Me</button>
  </div>
  <div class="card">
    <h3>Another Card</h3>
    <p>This card uses the same style but text is left aligned.</p>
    <button class="btn">Submit</button>
  </div>
</body>
</html>

OutputSuccess

Important Notes

Use meaningful class names that describe what the style does, like btn for buttons or text-center for centered text.

Combine multiple classes on one element to reuse different styles together.

Keep your reusable CSS small and focused on one purpose for easier maintenance.

Summary

Reusable CSS saves time and keeps your website consistent.

Use classes to write styles once and apply them many times.

Combine classes to create flexible and maintainable designs.