Summary - Theme skeleton

Use basic selectors to build a theme skeleton.

Five selectors, one theme

In this group you learned five selector kinds: type (p), class (.card), id (#header), universal (*), and attribute ([href]). Each has a different job.

Comma grouping combines them in one declaration block. Specificity decides the winner when they clash. Now you will put all of this together in a theme skeleton.

Exercise Lay the base of the theme skeleton

Add two style blocks. First the universal selector * with box-sizing: border-box. Second the body type selector with font-family: sans-serif.

Show example solution

/* base of the theme skeleton */
* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}

Exercise Add three more selectors

Add three separate style blocks. First an #header id selector with background: navy. Second a .card class selector with padding: 1rem. Third an a[href] attribute selector with color: navy.

Show example solution

/* header, card and link styles */
#header {
  background: navy;
}
.card {
  padding: 1rem;
}
a[href] {
  color: navy;
}

Test yourself

If they clash on the same element, which wins?
```
#header { padding: 1rem; }
.header { padding: 2rem; }
header { padding: 3rem; }
```
- .header (class selector)
- header (type selector)
- #header (id selector)
- The one written earlier
Show answer

#header (id selector) — Correct. An id selector has higher specificity than class and type selectors.

Write the card class selector

____ {
  padding: 1rem;
  border-radius: 8px;
}

Show answer

.card {
  padding: 1rem;
  border-radius: 8px;
}

Next lesson: Project: My first stylesheet

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies