HTML and CSS Reference
In-Depth Information
Here's a box that has all the widths labeled. Your job was to
figure out the width of an entire box. Here's the solution.
30 + 2 + 5 + 200 + 10 + 2 + 20 = 269 pixels
So now that you understand widths, what's the total width of the elixirs box? To start with,
we know the content area is 200 pixels. We've also set some left and right padding that
affects the width, as well as a border that's set to “thin”. Just assume a thin border is 1 pixel
thick, like it is on most browsers. And what about margins? We set a left margin value, but
no right margin value, so the right margin is 0 pixels by default.
Your job was to figure out the total width of the elixirs <div>. Here's the solution.
20 + 20 + 200 + + + 0 + 20 = 262
Your turn. Write the selector that selects only <h3> elements inside the elixirs
<div>. In your rule, set the color property to #d12c47. Also label the elements
in the graph below that are selected. Here's the solution.
#elixirs h3 {
color: #d 2c47;
html
}
body
h1
h2
div id="elixirs"
div id="calendar"
h2
h3
h3
h3
h1
h2
h3
