Example 1

Selector Tour

A single button, styled in six different ways to demonstrate various selector types.

<button class="btn-primary" id="contact-submit" type="submit" data-track="cta">
  Send message
</button>

/* Tag — every <button> on the page */
button { font-family: var(--body-font-family); }

/* Class — anything with .btn-primary */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  padding: var(--btn-space);
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
}

/* ID — only #contact-submit */
#contact-submit { width: 100%; }

/* Attribute (presence) */
[data-track] { cursor: pointer; }

/* Attribute (value) */
[type="submit"] { font-weight: 600; }

/* Pseudo-class */
.btn-primary:hover { background: var(--color-primary-deep); }

Example 2

Specificity Showdown

Three rules, all targeting the same button. Which colour wins?

<button>Send message (Tag)</button>
<button class="e2-btn-primary">Send message (Class)</button>
<button id="e2-contact-submit" class="e2-btn-primary">Send message (ID)</button>

button { color: gray; } /* 0,0,1 */
.e2-btn-primary { color: blue; } /* 0,1,0 */
#e2-contact-submit { color: red; } /* 1,0,0 */

Example 3

Inheritance in Action

Styling a parent element and seeing how children inherit those styles.

Welcome

This is a paragraph inside the hero.

A link

<section class="hero">
  <h1>Welcome</h1>
  <p>This is a paragraph inside the hero.</p>
  <a href="#">A link</a>
</section>

/* Inheritable properties (color, font-family) flow from .hero
   down into the h1, p, and a. */
.hero {
  color: var(--color-primary);
  font-family: var(--heading-font-family);
}

/* Note: <a> tags inherit font-family but NOT color —
   browsers apply their own default link colour first.
   Inheritance has gaps. */

Example 4

The Four Layers, Side by Side

One button styled by four different layers: browser defaults, framework class, entity CSS, and per-module %local% — each one stacked on top of the last.

/* Layer 1 — Browser defaults
   You write nothing. The user-agent stylesheet
   gives <button> its border, padding, focus
   ring, and inherits font-family from <body>. */

/* Layer 2 — Framework class (provided by Copperfox) */
.button {
  display: inline-block;
  padding: 0.6875rem 1.5rem;
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

/* Layer 3 — Entity CSS (this template's polished button) */
.e4-cta {
  background: var(--color-emphasis);
  color: var(--text-color-title);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: transform 250ms var(--ease-2),
              box-shadow 250ms var(--ease-2);
}

.e4-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-m);
}

/* Layer 4 — Per-module %local% (this exact button — the hero CTA) */
%local% {
  background: linear-gradient(135deg,
              var(--color-primary), var(--color-primary-deep));
  color: var(--color-text-on-brand);
  box-shadow:
    0 4px 20px color-mix(in srgb, var(--color-primary), transparent 60%),
    0 0 0 1px color-mix(in srgb, var(--color-primary-light), transparent 80%);
}

%local%:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg,
              var(--color-primary-light), var(--color-primary));
  box-shadow:
    0 8px 30px color-mix(in srgb, var(--color-primary), transparent 45%),
    0 0 0 1px color-mix(in srgb, var(--color-primary-light), transparent 60%);
}

Example 5

Source Order — Last Rule Wins

Two rules, identical specificity. The browser uses the one defined later as the tiebreaker.

<button class="src-btn">Send message</button>

/* Both rules have identical specificity (0,0,1,0).
   The second one wins because it is defined later. */

.src-btn {
  display: inline-block;
  padding: var(--btn-space);
  border-radius: var(--radius-s);
  border: 0;
  cursor: pointer;
  font-weight: 600;
  color: white;
  background: blue;     /* loses */
}

/* Same selector, different declaration block. */
.src-btn {
  background: red;      /* wins */
}

Example 6

Style Source Showdown

One button, four competing styles. Watch the cascade pick just one.

<button class="e6-btn-primary e6-important-button"
        id="e6-contact-submit"
        style="background: purple;">
  Send message
</button>

/* Class — specificity (0,0,1,0) */
.e6-btn-primary {
  background: var(--color-primary);
  color: white;
}

/* ID — specificity (0,1,0,0) — beats the class */
#e6-contact-submit {
  background: var(--color-secondary);
}

/* Inline style — specificity (1,0,0,0) — beats the ID */
/* style="background: purple" */

/* Class with !important — beats them all */
.e6-important-button {
  background: orange !important;
}