{"id":6652,"date":"2017-02-17T15:36:39","date_gmt":"2017-02-17T15:36:39","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=6652"},"modified":"2020-11-12T13:27:00","modified_gmt":"2020-11-12T13:27:00","slug":"dear-developers-css-structures-colour-spectrums-check","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/","title":{"rendered":"Dear Developers, CSS Structures and Colour Spectrums? Check."},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here we are, entry three of the \u2018Dear Developers\u2019 series and so far I\u2019ve explained <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-the-universe-is-telling-me-to-code\/\">why I\u2019m learning to code<\/a>, asked my stupid questions and have done the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-basic-body-language-code\/\">first basic few lines of code<\/a> which are building the first page of my website.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I\u2019ve been excited this week - not just because my website is currently looking as bland as a pile of concrete - but also because tailoring the way your elements look is much more exciting than just building the structure. In this entry I\u2019m going to give you a quick run down of the fundamentals of CSS code and a glimpse into the spectrum of colour.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">(After revising colours in CSS for the past week I find myself losing sight of who I am and writing out the word as \u2018color\u2019. It\u2019s hard to grasp. )<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here\u2019s a brief chapter layout if you want to skip some bits!<\/p>\n<section class=\"long-post-content\">\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part1\">Starting a new language:<\/a><\/strong> Forming your CSS document.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part2\">Back to basi-css:<\/a><\/strong>The fundamentals of CSS structure and the jargon that comes with it.<\/li>\n<div id=\"part1\"><\/div>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part3\">True colours:<\/a><\/strong> Intro to the importance of colour and how to add named colours, rgb, hex colour codes and hsl.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part4\">Opacity: <\/a><\/strong>Adding a little more to your colours.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part5\">Round Up: <\/a><\/strong>An overview of lessons I've learnt the last couple of weeks.<\/li>\n<\/ul>\n<\/section>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Starting a new language<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I gave a brief overview in my first article, but just as a reminder, these Cascading Stylesheets are the central system which describes the presentation of your web page, including fonts, colours and layout.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To start styling your HTML there is the option to write some CSS code within the same document. However, it\u2019s not really recommended as your work can start to get quite messy, and maybe a lil unnecessarily long. If you\u2019re sharing your document with someone else, this might end up with your fellow developer might find your code difficult to follow.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Despite this being the case, you can still make a note of how to do it. To add CSS to your HTML document you add <code class=\"fontSize-s language-css centered\">&lt;style&gt;<\/code> opening and closing tags within the <code class=\"fontSize-s language-css centered\">&lt;head&gt;<\/code> element. All your CSS should sit within the <code class=\"fontSize-s language-css centered\">&lt;style&gt;<\/code> tags.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Like so:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6689 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-15.07.06.png\" alt=\"screen-shot-2017-02-17-at-15-07-06\" width=\"637\" height=\"187\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-15.07.06.png 637w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-15.07.06-600x176.png 600w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now for the right way! It\u2019s recommended that you start a new document within Sublime (or ATOM) and giving it a name which wraps up in \u2018.css\u2019. You can see I\u2019ve done that in the above image as well. This way you keep your two languages separate and your documents neat, tidy and easy to read.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So, how will the browser know that this CSS document refers to this specific HTML doc?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Simples, we link it! Slightly different to how we add hyperlinks in HTML - some familiar attributes popping up but a new anchor tag. The anchor tag is <code class=\"fontSize-s language-css centered\">&lt;link&gt;<\/code> which is self closing and there are three attributes to allocate to this element.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Type<\/strong>: This refers to, you got it, the \u2018type\u2019 of document the browser will be reading. To link a CSS document, the value is always \u201ctext\/css\u201d<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Rel:<\/strong> This attribute refers to the relationship of the two documents and the value for this action is always \u201cstylesheet\u201d<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Href:<\/strong> You\u2019ll recognise this one, this attribute requires the value that is the URL of the doc<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Luckily, if you make your stylesheet within the same text editor as your HTML document and save it in the same place, you don\u2019t have to worry about entering the entire link. Simply add the name of the doc as the value for <code class=\"fontSize-s language-css centered\">href<\/code>, so in my case \u201cstyle.css\u201d. (Shortcut: In Sublime if you type <code class=\"fontSize-s language-css centered\">&lt;link<\/code> and hit enter, it fills out everything you need automatically.)<\/p>\n<div id=\"part2\"><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6659 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-11.48.24.png\" alt=\"screen-shot-2017-02-17-at-11-48-24\" width=\"638\" height=\"149\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-11.48.24.png 638w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-11.48.24-600x140.png 600w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Back to basi-css<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As you\u2019d imagine, CSS has it's differences to HTML and a whole bunch of lingo that goes along with it. Let's shed some light on that here with a beautiful little infographic made by one of our lovely designers, Oleg.<\/p>\n<div id='gallery-1' class='gallery galleryid-6652 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/colour-breakdown.png'><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"1024\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/colour-breakdown.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/colour-breakdown.png 1440w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/colour-breakdown-600x427.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/colour-breakdown-768x546.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The infographic above outlines the properties of a CSS rule. Here\u2019s the essentials of what it\u2019s made up of in a little more detail!<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A selector:<\/strong> This is the part where you state exactly which element you would like to style. Simply by beginning the rule with <code class=\"fontSize-s language-css centered\">p<\/code> for the <code class=\"fontSize-s language-css centered\">&lt;p&gt;<\/code> element, <code class=\"fontSize-s language-css centered\">h1<\/code> for the <code class=\"fontSize-s language-css centered\">&lt;h1&gt;<\/code> element, <code class=\"fontSize-s language-css centered\">body<\/code> for <code class=\"fontSize-s language-css centered\">&lt;body&gt;<\/code>etc.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Curly braces:<\/strong> Similar to the tag function in HTML, the <code class=\"fontSize-s language-css centered\">{<\/code> and <code class=\"fontSize-s language-css centered\">} <\/code>open and close CSS rules, which include a property and a value.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Property:<\/strong> This small phrase indicates what you will be changing about the element you selected. Such as font-family, font-size or colour.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Value:<\/strong> The value of each property will provide in detail what should change in that element.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A few small pointers:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Always add a space between the selector and the opening curly brace<\/li>\n<li>A value is always closed with a semi-colon<\/li>\n<li>A property along with its value is called a CSS declaration<\/li>\n<li>Start each new CSS declaration on a new line and with an indent - you can add several declarations to a rule!<\/li>\n<li>When you\u2019ve completed the declarations and closed with the curly brace, this is called a CSS rule<\/li>\n<li>For easy reading leave a space between each CSS rule<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So, just by adding a CSS rule as simple as this, you can start to see your HTML document show entirely differently in the browser.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">h1 {\r\n\tfont-size: 34px;\r\n\tfont-family: Arial;\r\n\tcolor: Peru;\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I mean, I'm not going to sugarcoat it, changing the colour of my heading still leaves my website looking plain as hell, but we have to start with the basics right. This is something I feel is key to staying motivated, is that you can\u2019t let the small steps demotivate you. They\u2019re all part of a bigger picture. And to be honest, right now I\u2019m less fussed about how my first website is looking but more on whether I understand how I actually got it to look this way.<\/p>\n<div id=\"part3\"><\/div>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"You can't let the small steps demotivate you. They're all part of a bigger picture.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">True colours<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">However, things are about to get a little more interesting as we move on to the wonderful world of colour. My mother once told me that a great outfit will never consist of more than three colours, whilst that continues to be challenged in the fashion industry it seems to be the basis of a rule outlined by interior designers. The technique is known as the 60-30-10 rule refers to 60% + 30% + 10% proportion and is meant to give balance to colours used within a colour scheme.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Colour is not something to be overlooked - it\u2019s really not just a case of picking your favourites.\" <\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Each colour has it\u2019s own connotations, both bad and good. Which is why it\u2019s crucial to tie in a suitable colour which helps portray the message of your brand. If you\u2019re launching a social network type thing and make the main marketing colours red, your users are probably going to be expecting to fall in love on it. Just saying.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For a lil\u2019 more exposure on the matter, here\u2019s some colour codes outlined by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.prototypr.io\/how-to-use-colors-in-ui-design-16406ec06753#.yobys9oi8\">Wojciech Zieli\u0144ski<\/a>:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Red: Passion, Love, Danger<\/li>\n<li>Blue: Calm, Responsible, Safe<\/li>\n<li>Black: Mystery, Elegance, Evil<\/li>\n<li>White: Purity, Silence, Cleanliness<\/li>\n<li>Green: New, Fresh, Nature<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In CSS there are plenty of ways to throw some colour on it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">First up, it\u2019s good to note that you can change the colour of the element using the <code class=\"fontSize-s language-css centered\">color<\/code> property and the background of the element using <code class=\"fontSize-s language-css centered\">background-color<\/code>.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Named Colours<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These babies are real easy to grasp. There are 147 colours in CSS which are names and supported across most modern browsers in the most recent CSS language CSS3, which you are 100% not expected to memorise, don\u2019t worry. (Although you might surprise yourself, the way I have with remembering the emoji clauses on Slack). There are plenty of sites, <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/colours.neilorangepeel.com\/\">like this one<\/a>, which give you the full rundown of the colours you can add to your css.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I'm using <code class=\"fontSize-s language-css centered\">h1<\/code> as the selector for each of the following, just because. Here's how you'd attribute named colours:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">h1 {\r\n\tcolor: Peru;\r\n\tcolor: Salmon;\r\n\tcolor: DimGray;\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">RGB<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This delightful colour system is based on telling the computer which amounts of red, green and blue are in a colour. With this combination, it gives you a wild colour palette consisting of over 16 million shades. Each of these three colours (R, G, and B) has the possibility of taking on a figure between 1 and 256. (Which gives you exactly 16, 777, 216 possible colours).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here\u2019s how to use RGB in CSS values:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">h1 {\r\n\tcolor: rgb(123, 20, 233);\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The numbers which follow <code class=\"fontSize-s language-css centered\">rgb<\/code> in the brackets represent the value for each colour, red green and blue, in that order. Note that you can use <code class=\"fontSize-s language-css centered\">rgb()<\/code> for background colours as well. Remember to leave no space between <code class=\"fontSize-s language-css centered\">rgb<\/code> and it\u2019s brackets.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Hex Colour Codes<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You might be familiar with these. \u2018Hex\u2019 comes from the more technical term Hexadecimal. When you\u2019re specifying an RGB color mixture, the values are in base 10 whereas the hex color codes use base 16, or hexadecimal base (hence the name).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Writing colours in this format means you get just the same number of possible colours as you do with using RGB. The two are actually very similar and you can convert back and forth between both RGB values and hex colour codes.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The same colour as the RGB value represents above would be written this way in a Hex Code:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">h1 {\r\n\tcolor: #7B14E9;\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.codecademy.com\">Codecademy<\/a> explains that if a hex color code is made up of entirely the same characters, the hex color can be abbreviated, like so:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">h1 {\r\n\tcolor: #FFFFFF;\r\n\tcolor: #FFF; \/* This is the same color as above *\/\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">\r\nh1 {\r\n\tcolor: #AA33BB;\r\n\tcolor: #A3B; \/* This is the same color as above *\/\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">HSL<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Last but not least, there\u2019s <code class=\"fontSize-s language-css centered\">hsl<\/code>, which stands for Hue, Saturation, and Lightness. Hue is what we understand as colour, but is the technical term for it - in <code class=\"fontSize-s language-css centered\">hsl<\/code> it\u2019s represented on a colour wheel and can have values between 0 and 360. Saturation is the amount of grey in each colour, and it\u2019s value is a percentage between 0%-100% (with 0% being the least amount of saturation and 100% the highest). Similarly, lightness is represented in the same way except it refers to the amount of white in a given colour, with 50% being normal.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can use <code class=\"fontSize-s language-css centered\">hsl<\/code> colours in your CSS like this:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">h1 {\r\n\tcolor: hsl(358, 72%, 28%);\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<div id=\"part4\"><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Opacity<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Before I wrap up on my introduction to colour, let\u2019s introduce opacity. It\u2019s very common for developers to include opacity to their colour choice, however only RGB and HSL specifications can factor it in. Leaving hex colour codes and named colours out of it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To factor in opacity, simply add <code class=\"fontSize-s language-css centered\">a<\/code> to the end of <code class=\"fontSize-s language-css centered\">rgb<\/code> and <code class=\"fontSize-s language-css centered\">hsl<\/code>. This a represents opacity and stands for \u2018alpha\u2019. The value of opacity will always be a number between and including 0 and 1, so you\u2019ll often see it written as a decimal.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">rgb<\/code> and <code class=\"fontSize-s language-css centered\">hsl<\/code> can both factor opacity in. Hex colour code cannot.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So CSS offers <code class=\"fontSize-s language-css centered\">rgba()<\/code> and <code class=\"fontSize-s language-css centered\">hsla()<\/code>.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">h1 {\r\n\tcolor: rgba(123, 20, 233, 0.5);\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<div id=\"part5\"><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the example above, the alpha value has been set to 0.5 which indicates that the heading colour will be set to 50% of its normal opacity.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Round Up<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are some useful takeaways from this week\u2019s lesson. The first being that it\u2019s key to remember that many of the older browsers do not support RGBa, HSL or HSLa. There are ways around this, by simply introducing two CSS declarations with <code class=\"fontSize-s language-css centered\">color<\/code> properties, one with just <code class=\"fontSize-s language-css centered\">rgb<\/code> and the other with <code class=\"fontSize-s language-css centered\">rgba<\/code>. That way your website is accessible for everyone.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Even if you're a person who lacks in taste when it comes to colour, it doesn't matter! There are so many sites, like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/coolors.co\/\">this one<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.materialpalette.com\/\">this one<\/a>, that designers use to guide their colour palettes and retrieve these 16 million colour spectrum. The internet is a beautiful thing.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"The internet is a beautiful thing.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I am finding that even at these early stages, I\u2019m thinking differently when navigating around websites and browsers. Reminding myself of HTML elements that might have been used to control this and CSS elements that might have been used to create that. Already I feel like I have more questions to ask and have a new found respect for developers who sit there day in and day out at their screens writing and running new lines of code. It really takes it out of you! There is a lot of mental exercise going on here.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"I've found that sometimes there isn\u2019t time to stick to the time allocations you\u2019ve set yourself. The key thing is to not beat yourself up about it! If you\u2019re enjoying it and want to learn, you\u2019ll find an hour here and there, but there\u2019s no pressure, and that\u2019s the great thing about teaching yourself a new skill.<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In learning CSS this week, I had the first experience where I felt a bit thrown or out of place. The hexidecimal colour codes with their being based to the round of 16 is not a sentence that really computes with me. I self declare that I am not a numbers person. I run from numbers and I\u2019ve ran from them since I dropped maths at the age of 17. However, I am confronting it and trying to get my head around the things that I\u2019m not comfortable with. So, for all the others that feel like that, I\u2019m right there with you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here we are, entry three of the \u2018Dear Developers\u2019 series and so far I\u2019ve explained why I\u2019m learning to code, asked my stupid questions and have done the first basic few lines of code which are building the first page of my website. I\u2019ve been excited this week &#8211; not just because my website is currently looking as bland as&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":12,"featured_media":6679,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[504],"tags":[],"class_list":["post-6652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dear Developers, CSS Structures and Colour Spectrums? Check. | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Here we are, entry three of the \u2018Dear Developers\u2019 series and so far I\u2019ve explained why I\u2019m learning to code, asked my stupid questions and have done the first basic few lines of code which are building the first page of my website. I\u2019ve been excited this week - not just because my website is currently looking as bland as... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-17T15:36:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T13:27:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/colours.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"9 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/colours.jpg\",\"width\":2000,\"height\":1500},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/\",\"name\":\"Dear Developers, CSS Structures and Colour Spectrums? Check. | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/#primaryimage\"},\"datePublished\":\"2017-02-17T15:36:39+00:00\",\"dateModified\":\"2020-11-12T13:27:00+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\"},\"headline\":\"Dear Developers, CSS Structures and Colour Spectrums? Check.\",\"datePublished\":\"2017-02-17T15:36:39+00:00\",\"dateModified\":\"2020-11-12T13:27:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/#primaryimage\"},\"articleSection\":\"Web Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/dear-developers-css-structures-colour-spectrums-check\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\",\"name\":\"Naomi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c520343b1feb2f69cca53916bf57f5c457b3a2640d405e0f9f20a8f8e8bb7ca7?s=96&d=mm&r=g\",\"caption\":\"Naomi\"},\"description\":\"Writing for Marvel. Writing for fun. Eating everywhere, all the time.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/6652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=6652"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/6652\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/6679"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=6652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=6652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=6652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}