WDI Fundamentals

WDI Fundamentals Unit 4


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!

JS Bin on jsbin.com

1) Set the body's background to #333 and the div's background to #c0dec5.

2) Add a margin of 4em on all four sides of the div's content (outside the pale blue box).

3) Set the div's top padding to 2em, a right padding of 3em, no padding on the bottom, and 3em on the left.

4) Give the span three property-value pairs: a font-variant of small-caps, a font-family of Tahoma, sans-serif, and .25em of letter-spacing.

5) Set the span's padding to "0 .2em". 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 span's background color from RGB to rgba and add a .5 alpha.

7) In your HTML, the second p tag has a class attribute named "right". 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.


Onto the lesson.