CSE 154

Section 3: Selectors And The Box Model

Agenda

Review The DOM

Review Combinator Selectors

Debugging With The Chrome Inspector

The Box Model (margin/padding/border)

git comic

Section Goals

  • Understand how to traverse the DOM to select elements in CSS
  • Learn critical CSS debugging skills in the browser
  • Utilize the box model to control the positioning of elements on the page

Exercise 1: Combinator Selectors

GOT Selectors

Write a CSS selector here for:

  1. all h2 elements
  2. element with ID intro
  3. h2 elements inside intro
  4. h2 elements inside houses and footer
  5. p elements inside main
  6. p elements directly inside main
  7. elements with class bordered
  8. h2 elements with class bordered

GOT Selectors: Solutions

  1. all h2 elementsh2
  2. element with ID intro#intro
  3. h2 elements inside intro#intro h2
  4. h2 elements inside houses, footer#houses h2, footer h2
  5. p elements inside mainmain p
  6. p elements directly inside mainmain > p
  7. elements with class bordered.bordered
  8. h2 elements with class borderedh2.bordered

Debugging With The Chrome Inspector

Guide to using the Chrome Inspector

The Box Model

margin
(outside) space between different elements
border
(optionally visible) line that separates elements
padding
(inside) space between element content and border
the box model

Exercise 2: Boxes

Given boxes.html, write boxes.css to make the appearance below.

Note: Inspect/view page source on boxes.html to see the HTML code!

output

More details for this exercise are on the slide below.

Exercise 2: Expected Output Details

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)

Links for More Practice

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!