Styling Exercises

Making a button

See the Pen ex-1-e by Angel Grablev (@agrublev) on CodePen.

Here is what is required:

1. Change the type of element the anchor is. Currently it’s inline, we need it to be more!
2. Add the correct padding, ideally using shorthand
3. Change the color of the text from blue to black
4. Remove the underline decoration added by the browser
5. Add a black border

See working version

Dealing with background images and borders

See the Pen ex-2-s by Angel Grablev (@agrublev) on CodePen.

Here is what is required:

1. Add the needed borders to each box to match the final result below
2. Adjust the background image of .three so it does not repeat and is positioned at the bottom of the element

See working version

Text manipulation

See the Pen ex-3-e by Angel Grablev (@agrublev) on CodePen.

Here is what is required:

1. Make the font size of .title 30px
2. Adjust space between .title and .description to be 10px
3. Change the height of each line in .description to equal 1.6em

See working version

Advanced shorthand

See the Pen ex-4-e by Angel Grablev (@agrublev) on CodePen.

Here is what is required:

1. Adjust the background to be black
2. Position the background image 30px from the left and centered vertically
3. Adjust the text inside to be 70px from the left, 20px from the top and bottom, and 50px from the right

See working version