Code Studio: Practice CSS Selectors
Practice every selector type from CSS Selectors on the portfolio page from the reading. You edit the stylesheet; the page is already loaded.
The type selectors are done for you. Add one rule for each of these, pressing Run after each so you can see exactly what it changes:
- Class: give every
.carda border, padding and margin. - Class: give the
.featuredcard a light background color. - ID: add letter spacing to
#site-title. - Attribute: underline only links that open in a new tab,
a[target="_blank"]. - Pseudo-class: change the color of
.nav-linkon:hover, and outline the email box on:focus. - Combinator: space out the links inside the navigation with
nav a.
Specificity challenge: add p { color: green; } and .lede { color: purple; }. Which color does the "quick overview" paragraph get, and why? Swap the order of the two rules and run it again.
Practice every selector type from CSS Selectors on the portfolio page from the reading. You edit the stylesheet; the page is already loaded.
The type selectors are done for you. Add one rule for each of these, pressing Run after each so you can see exactly what it changes:
- Class: give every
.carda border, padding and margin. - Class: give the
.featuredcard a light background color. - ID: add letter spacing to
#site-title. - Attribute: underline only links that open in a new tab,
a[target="_blank"]. - Pseudo-class: change the color of
.nav-linkon:hover, and outline the email box on:focus. - Combinator: space out the links inside the navigation with
nav a.
Specificity challenge: add p { color: green; } and .lede { color: purple; }. Which color does the "quick overview" paragraph get, and why? Swap the order of the two rules and run it again.