Section 11.14. Test driving the new styles

11.14. Test driving the new styles Now it's time to add those new properties to your "lounge.css" file and reload the page. Let's check out the changes: the headings, the images, and the text are all centered in the <div> and have a little more breathing room now that there's some padding in place. We've also got a little decoration at the top with the tiled cocktail image. Wait just a sec... why does the text-align property affect the alignment of the images? Shouldn't it align only text? Seems like it should be called something else if it aligns images too. The tiled image looks nice, and it only tiles horizontally. We've got some padding here, and at the bottom and left... ... and everything's centered nicely. Good point... it doesn't seem right, does it? But the truth is that text-align will align all inline content in a block element. So in this case, we're setting the property on the <div> block element and all its inline content is nicely centered as a result. Just remember that text-align, despite its name, works on any kind of inline element. One other thing to keep in mind: the text-align property should be set on block elements only. It has no effect if it's used directly on inline elements (like <img>). That's interesting because I noticed the text inside the <div> is all inside other block elements, like <h2>, <h3>, and <p>. So, if textalign is aligning inline elements in the <div> block element, how is the text in these nested block elements getting aligned? Good catch. All the text inside the <div> element is in nested block elements, but it is all aligned now. That's because these block elements inherit the text-align property from the <div>. So here's the difference: rather than the <div> itself aligning the text in the headings and the paragraphs (which it won't do because these are block elements), the headings and paragraphs are inheriting the text-align value of "center", and then aligning their own content to center. So what? Well, if you think about it, this gives you a lot of leverage when you use a <div>, because you can wrap a section of content in a <div> and then apply styles to the <div> rather than each individual element. Of course, keep in mind that not all properties are inherited by default, so this won't work for all properties. Sharpen your pencil 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. Here are all the properties that relate to width. Your job is to figure out the total width of the elixirs <div>. border-width: thin; width: 200px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-left: 20px; Lemon Breeze The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day and all night. Chai Chiller Not your traditional chai, this elixir mixes maté with chai spices and adds an extra chocolate kick for a caffeinated taste sensation on ice. Black Brain Brew Want to boost your memory? Try our Black Brain Brew elixir, made with black oolong tea and just a touch of espresso. Your brain will thank you for the boost. Join us any evening for these and all our wonderful elixirs.