Section 11.26. there are no Dumb Questions

11.26. there are no Dumb Questions Q: Should I always use shorthand? A: Not necessarily. Some people find the long form more readable. Shorthands do have the advantage of reducing the size of your CSS files, and certainly they are more quickly entered because they require less typing. However, when there is a problem, they are a little more difficult to "debug" if you have incorrect values or the wrong order. So, you should use whichever form is more comfortable because they are both perfectly valid. Q: Shorthands are more complex because I have to remember the ordering and what is and isn't optional. How do I memorize it all? A: Well, you'll be surprised how quickly it becomes second nature, but those of us in the "biz" have a little secret we like to call a "reference manual." Just pick one up, and should you need to quickly look up property names or the syntax of a property, just grab your handy reference manual and look it up. We're particularly fond of the CSS Pocket Reference by Eric Meyer. It's tiny and makes a great reference. Make it Stick To remember the ordering of the padding and margin shorthand values, think of a clock labelled with top, right, bottom, and left. Then, always go in a clockwise direction: top to right to bottom to left. margin: 0pxtop 20pxright 30pxbottom 10px;left Exercise It's time to put all your new knowledge to work. You'll notice that at the bottom of the lounge, there's a small section with copyright information that acts as a footer for the page. Add a <div> to make this into its own logical section. After you've done that style it with these properties: font-size: 50%;Let's make the text really small. You know, FINE PRINT. text-align: center;And let's center the text. line-height: normal;We're also setting the line-height to be "normal", which is a keyword you haven't seen yet. "Normal" allows the browser to pick an appropriate size for the line-height, which is typically based on the font. margin-top: 30px;And let's add some top margin to give the footer a little breathing room. And while you're at it, have a look over the entire "lounge.css" file. Is there anywhere you might want to simplify things with shorthands? If so, go ahead and make those changes. I saw the nice job you did on the elixirs. Can you give us a hand with the music recommendations on the site? We don't need much, just some simple styling. The lounge's resident DJ. All the CD titles are in an italic font style. And all the artists are in bold. BRAIN POWER What do you think is the best way to style the CD and artists in the "What's playing at the Lounge" section? I was thinking we could just wrap <em> and <strong> elements around the CDs and artists. On most browsers that's going to give us italic and bold. Frank: Yeah, but that's kind of like using a <blockquote> just to indent text. What I mean is that we don't really want to emphasize and strongly emphasize the CD and artists. We just want italic and bold. Plus, what if someone changes the style for <em> and <strong>? That would show up on the CDs and artists too. Jim: Well, I actually thought about that, but I couldn't think of any other way to do it. I mean this is just text in the same list item. It's not like we have any way to style it. Frank: What do you mean? Jim: We can only style elements, and here we just have a bit of text, like, "Music for Airports, Brian Eno". We'd need an element around each piece of text to be able to style them differently. Frank: Oh, right, right. I see what you mean. Jim: I suppose we could use something like <div class="cd">Music for Airports</div> <div class="artist">Brian Eno</div>. But that's a block element, so that is going to cause linebreaks. Frank: Ahhh, I think you're on to something, Jim. There's another element like <div> that is for inline elements. It's called a <span >. That could work out perfectly. Jim: I'm game. How does it work? Frank: Well, a <span> gives you a way to create a grouping of inline characters and elements. Here, let's just give it a try...