Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet urna gravida orci pharetra gravida tincidunt id nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut feugiat elementum massa, quis laoreet sem semper vitae. Quisque ligula dolor, dapibus non tempus eu, dapibus nec lacus. Aenean convallis dapibus magna varius tristique. Vivamus nunc felis, semper non sagittis a, pulvinar sit amet tellus. Aliquam interdum sem ac massa pellentesque feugiat. Nulla facilisi.

Praesent sem quam, lacinia ac gravida at, adipiscing vitae velit. Sed vitae erat et leo aliquet laoreet id nec mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam ligula, lobortis ornare tempor vitae, dignissim eu sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia, lorem id scelerisque semper, magna sapien pharetra ante, eget fringilla enim nunc vel tellus. Morbi tincidunt lacus in dolor tincidunt nec congue nibh euismod. Ut aliquet posuere metus, eu posuere tellus pretium ac. Morbi ultrices, leo sed rutrum tincidunt, lorem diam suscipit mi, ut suscipit dui lectus vel tellus.


Using Chrome's Inspect Element, do the following:

  1. Navigate to the paragraph whose id is "lorem." Click on it (the tag itself) to select it. Look at the "Styles" pane to the right and look at how the font-size is set by #lorem, .mypar and #wrap. You may need to scroll down a bit to see the #wrap selector.
  2. Add a 10px padding to the #wrap div. First select the element so that you can see its stylesheet to the right. You can add a property by clicking on the last existing property value and pressing return/enter to start a new line.
  3. Add a 5px margin to the #lorem paragraph.
  4. Add a 15px padding to the #praesent paragraph.
  5. Add a border to both paragraphs, like "1px solid red," using the "mypar" class. (Note that if you were doing this using a CSS file, you'd could also use a descendant selector, but we can't create those via this part of Inspector.)
  6. Add a yellow background color (background-color: yellow) to both paragraphs. What is and isn't colored yellow?
  7. How does the yellow background affect the hyperlink in the first paragraph? How is the hyperlink's color specified? It uses a pseudo-class.
  8. Set the width of the #wrap div to 500px. Set the width of the #lorem paragraph to 80%. Set the width of the #praesent paragraph to 60%. What are these percentages of? You can switch to the "Computed" tab in right-side of Inspector to see the box model.
  9. Compare adding a 25px padding-top to the div with adding a 25px margin-top to the #lorem paragraph. Is there a difference?
  10. Suppose you wanted 10px top/bottom padding on the #praesent paragraph and 30px left/right padding. There are (at least) three ways to do that. Try them whichever one you like best.
    1. padding: 10px 30px 10px 30px;
    2. padding: 10px 30px;
    3. padding-top: 10px; padding-bottom: 10px; padding-left: 30px; padding-right: 30px;
  11. A shorthand way to add a big line down the left side of the paragraphs is to add to the div: border-left: 3px solid red. The longhand way is border-width-left: 3px; border-style-left: solid; border-color-left: red Which do you like best?
  12. Let's look at inline elements. Try setting the width (say to 300px), margins (say to 50px), padding (50px again) and borders (say, 5px solid teal) for the #passage. Set the background color, too. Which of these are obeyed and which are ignored?
  13. Notice the :hover pseudo-class for the #passage. (Move the mouse over the second paragraph to see the effect.)
  14. Finally, let's look at margin collapse. Try setting a 60px margin-bottom for the #lorem paragraph and a 50px margin-top for the #praesent paragraph. How far apart are the two element borders? Read more about collapsing margins.