WDI Fundamentals

WDI Fundamentals Unit 5


Your Turn Your Turn

In this exercise we'll take some time to play around with divs, spans, margin, and padding to create a lovely text layout.

Here's what the content will look like when you're finished styling it. Fancy!

If you don't see the JS Bin below, please refresh the page.

We won't touch the HTML, but take a look at it before you hop over to the CSS tab. To give yourself more space you can select the CSS and Output tabs. Also, we gave you the p style. You're welcome!

Box Model on jsbin.com

  1. Set the background-color of body to #333 and the background-color of div to #c0dec5.

  2. Add a margin of 64px on all four sides of the divs content (outside the pale blue box).

  3. Set the divs top padding to 32px, a left and right padding of 48px, and no padding on the bottom.

  4. Create a rule for span and set these three property-value pairs: a font-variant of small-caps, a font-family of Tahoma, sans-serif, and a letter-spacing of .25em.

  5. Set the spans padding to 0 3px. Set its background-color to rgb(100,150,150).

  6. On second thought, that color is a little dark. Let's practice with RGB and alpha and make it 50% translucent. Change the spans background-color from rgb to rgba and add a .5 alpha.

  7. In your HTML, the second p tag has a class attribute named source. Let's right-align that paragraph! Add the new style to your CSS.

Fabulous! You just rocked on a bunch of topics that can stump even professional web designers.

Stuck? Check out the solutions for assistance.


On to the next lesson.