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; }