WDI Fundamentals Unit 5
In this exercise we'll take some time to play around with
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!
#333 and the
64px on all four sides of the
divs content (outside the pale blue box).
32px, a left and right
48px, and no
padding on the bottom.
Create a rule for
span and set these three property-value pairs: a
Tahoma, sans-serif, and a
0 3px. Set its
On second thought, that color is a little dark. Let's practice with RGB and alpha and make it 50% translucent. Change the
rgba and add a
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.