Review The DOM
Review Combinator Selectors
Debugging With The Chrome Inspector
The Box Model (margin/padding/border)
GOT Selectors
Write a CSS selector here for:
h2
elementsintro
h2
elements inside intro
h2
elements inside houses
and footer
p
elements inside main
p
elements directly inside main
bordered
h2
elements with class bordered
h2
elementsh2intro
#introh2
elements inside intro
#intro
h2h2
elements inside houses, footer
#houses h2, footer h2p
elements inside main
main pp
elements directly inside main
main > pbordered
.borderedh2
elements with class bordered
h2.borderedGiven boxes.html
, write
boxes.css
to make the appearance below.
Note: Inspect/view page source on boxes.html to see the HTML code!
More details for this exercise are on the slide below.
The outer padding of the box is teal with a width of 50 pixels.
The inner border of the box is pink with a width of 50 pixels.
The inner background color of the box is salmon with a width and height of 200 pixels.
The overall box has a total width and height of 400 pixels.
Solution: (result page) (CSS)
CodeStepByStep has some more practice problems for selectors and layout (some of which were from past exams!) Here are a few (keep an eye out for recommended problems on the calendar too!)
Check out this CSS selector game mentioned from lecture too!