{"id":152,"date":"2018-04-24T19:03:58","date_gmt":"2018-04-24T19:03:58","guid":{"rendered":"https:\/\/ucsbwebdev.fzilla.com\/?p=152"},"modified":"2018-04-24T22:33:28","modified_gmt":"2018-04-24T22:33:28","slug":"styling-exercises","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=152","title":{"rendered":"Styling Exercises"},"content":{"rendered":"

Making a button<\/h2>\n

\nSee the Pen ex-1-e by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n

Here is what is required:<\/p>\n

1. Change the type of element the anchor is. Currently it’s inline, we need it to be more!
\n2. Add the correct padding, ideally using shorthand
\n3. Change the color of the text from blue to black
\n4. Remove the underline decoration added by the browser
\n5. Add a black border<\/p>\n

See working version<\/a><\/p>\n

Dealing with background images and borders<\/h2>\n

\nSee the Pen ex-2-s by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n

Here is what is required:<\/p>\n

1. Add the needed borders to each box to match the final result below
\n2. Adjust the background image of .three so it does not repeat and is positioned at the bottom of the element<\/p>\n

See working version<\/a><\/p>\n

Text manipulation<\/h2>\n

\nSee the Pen ex-3-e by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n

Here is what is required:<\/p>\n

1. Make the font size of .title 30px
\n2. Adjust space between .title and .description to be 10px
\n3. Change the height of each line in .description to equal 1.6em<\/p>\n

See working version<\/a><\/p>\n

Advanced shorthand<\/h2>\n

\nSee the Pen ex-4-e by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n

Here is what is required:<\/p>\n

1. Adjust the background to be black
\n2. Position the background image 30px from the left and centered vertically
\n3. Adjust the text inside to be 70px from the left, 20px from the top and bottom, and 50px from the right<\/p>\n

See working version<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Making a button 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. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-152","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=152"}],"version-history":[{"count":6,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/152\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/152\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}