{"id":206,"date":"2023-10-26T11:04:03","date_gmt":"2023-10-26T11:04:03","guid":{"rendered":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/?p=206"},"modified":"2023-10-26T11:04:03","modified_gmt":"2023-10-26T11:04:03","slug":"css-styling","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/workshops\/css-styling\/","title":{"rendered":"CSS Styling"},"content":{"rendered":"\n<p>This week we focussed on CSS and how we could get certain parts of our webpage to animate. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"489\" src=\"http:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700-1024x489.jpg\" alt=\"\" class=\"wp-image-208\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700-1024x489.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700-300x143.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700-768x367.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700.jpg 1314w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"916\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115705-1-916x1024.jpg\" alt=\"\" class=\"wp-image-210\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115705-1-916x1024.jpg 916w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115705-1-268x300.jpg 268w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115705-1-768x858.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115705-1-1375x1536.jpg 1375w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115705-1.jpg 1430w\" sizes=\"(max-width: 916px) 100vw, 916px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"489\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700-1-1024x489.jpg\" alt=\"\" class=\"wp-image-211\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700-1-1024x489.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700-1-300x143.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700-1-768x367.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-115700-1.jpg 1314w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This code allowed us to hover over the heading and it change size and colour. In my case it changes from black to orange and goes from slim to bold. It also allows the background to change colour once is is clicked on. The paragraph text also animated in from the bottom of the page<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"252\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120244-1-1024x252.jpg\" alt=\"\" class=\"wp-image-215\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120244-1-1024x252.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120244-1-300x74.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120244-1-768x189.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120244-1-1536x378.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120244-1-2048x504.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"217\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120235-2-1024x217.jpg\" alt=\"\" class=\"wp-image-217\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120235-2-1024x217.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120235-2-300x64.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120235-2-768x163.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120235-2-1536x326.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120235-2-2048x435.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"259\" data-id=\"213\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120229-1024x259.jpg\" alt=\"\" class=\"wp-image-213\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120229-1024x259.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120229-300x76.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120229-768x194.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120229-1536x388.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2023\/10\/Screenshot-2023-10-26-120229-2048x517.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This week we focussed on CSS and how we could get certain parts of our webpage to animate. This code allowed us to hover over the heading and it change size and colour. In my case it changes from black to orange and goes from slim to bold. It also allows the background to change [&hellip;]<\/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":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/206"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/comments?post=206"}],"version-history":[{"count":1,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/206\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/206\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/media?parent=206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/categories?post=206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/tags?post=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}