{"id":33,"date":"2024-01-29T15:17:13","date_gmt":"2024-01-29T15:17:13","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/a_reynolds\/?p=33"},"modified":"2024-01-29T15:17:14","modified_gmt":"2024-01-29T15:17:14","slug":"margins-padding-and-styling","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/a_reynolds\/2024\/01\/29\/margins-padding-and-styling\/","title":{"rendered":"Margins, Padding, and styling."},"content":{"rendered":"\n<p>If  your html website is looking a bit boring.. try using CSS to style up your website!! we can use CSS to change things like margins, padding, and borders, which can help us space things out. We can even change the size of elements, different fonts, colors, and many more. <\/p>\n\n\n\n<p>Here&#8217;s an example of  how I used CSS to spruce up my website:<\/p>\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 fetchpriority=\"high\" decoding=\"async\" width=\"713\" height=\"499\" data-id=\"37\" src=\"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/html.png\" alt=\"\" class=\"wp-image-37\" srcset=\"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/html.png 713w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/html-300x210.png 300w\" sizes=\"(max-width: 713px) 100vw, 713px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"623\" height=\"581\" data-id=\"35\" src=\"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/Css.png\" alt=\"\" class=\"wp-image-35\" srcset=\"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/Css.png 623w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/Css-300x280.png 300w\" sizes=\"(max-width: 623px) 100vw, 623px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Here is my website before CSS:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"450\" src=\"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/before-css-2-1024x450.png\" alt=\"\" class=\"wp-image-39\" srcset=\"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/before-css-2-1024x450.png 1024w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/before-css-2-300x132.png 300w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/before-css-2-768x337.png 768w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/before-css-2-1536x674.png 1536w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/before-css-2.png 1877w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>AFTER CSS!!:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"463\" src=\"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/website-1-1024x463.png\" alt=\"\" class=\"wp-image-40\" srcset=\"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/website-1-1024x463.png 1024w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/website-1-300x136.png 300w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/website-1-768x347.png 768w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/website-1-1536x695.png 1536w, https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-content\/uploads\/2024\/01\/website-1.png 1806w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>As you can see CSS can really improve apron a website <\/p>\n","protected":false},"excerpt":{"rendered":"<p>If your html website is looking a bit boring.. try using CSS to style up your website!! we can use CSS to change things like margins, padding, and borders, which can help us space things out. We can even change the size of elements, different fonts, colors, and many more. Here&#8217;s an example of how [&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":[],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":41,"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/posts\/33\/revisions\/41"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_reynolds\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}