Class Selector Card

A product card gains spacing, border color, typography, and an action style as class selectors match the same markup.

Program

CSS class selectors let one named rule style every element that carries that class. The markup stays stable while presentation changes.

class_selector_card.html

<style>
.card { padding: 22px; }
.card { border: 3px solid #0f766e; }
.card h2 { color: #7c2d12; }
.action { background: #1d4ed8; color: white; }
</style>

<article class="card">
  <h2>Launch Window</h2>
  <p>Systems green for the evening release.</p>
  <button class="action">Review</button>
</article>

class selector A class selector such as .card matches elements with that class name.

descendant selector A selector such as .card h2 matches an h2 only when it is inside .card.