(window.webpackJsonp=window.webpackJsonp||[]).push([[68],{567:function(e,o,t){"use strict";t.r(o);var a=t(56),s=Object(a.a)({},(function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"colours-in-css-color-and-background-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colours-in-css-color-and-background-color"}},[e._v("#")]),e._v(" Colours in CSS: "),t("code",[e._v("color")]),e._v(" and "),t("code",[e._v("background-color")])]),e._v(" "),t("p",[e._v("In this lecture we're going to talk in depth about two properties — "),t("code",[e._v("color")]),e._v(" and "),t("code",[e._v("background-color")]),e._v(" — and we're also going to cover several different ways to specify colours in CSS.")]),e._v(" "),t("h2",{attrs:{id:"the-color-property"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-color-property"}},[e._v("#")]),e._v(" The "),t("code",[e._v("color")]),e._v(" property")]),e._v(" "),t("p",[e._v("We've seen the "),t("code",[e._v("color")]),e._v(" propery a number of times so far in the course. It's used to change the text color of a given element. However, there's a little bit more to the "),t("code",[e._v("color")]),e._v(" property, so that's talk about some of those less obvious behaviours.")]),e._v(" "),t("h3",{attrs:{id:"text-decoration"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#text-decoration"}},[e._v("#")]),e._v(" "),t("code",[e._v("text-decoration")])]),e._v(" "),t("p",[e._v("One thing which may not be immediately obvious is that the "),t("code",[e._v("color")]),e._v(" property also changes the colour of text decorations. That means things like underlines and strikethroughs.")]),e._v(" "),t("p",[e._v("We can can set this property separately if we want to change this behaviour. For example, we can specify that the text recoration should be red for this element, regardless of the color like this:")]),e._v(" "),t("div",{staticClass:"language-css extra-class"},[t("pre",{pre:!0,attrs:{class:"language-css"}},[t("code",[t("span",{pre:!0,attrs:{class:"token property"}},[e._v("text-decoration-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" red"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),t("p",[e._v("This might be useful if you're trying to show spelling and grammar issues in a piece of content, where the decoration style and colour is important.")]),e._v(" "),t("p",[e._v("You can find more about text decoration "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration",target:"_blank",rel:"noopener noreferrer"}},[e._v("here"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("h3",{attrs:{id:"currentcolor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#currentcolor"}},[e._v("#")]),e._v(" "),t("code",[e._v("currentcolor")])]),e._v(" "),t("p",[e._v("Setting the "),t("code",[e._v("color")]),e._v(" property also sets the value of a keyword called "),t("code",[e._v("currentcolor")]),e._v(". This acts like a variable, and we can use it in place of a colour value.")]),e._v(" "),t("p",[e._v("This can be useful if you want something like the element's border to match the colour of the text. This saves you having to write out colour definitions twice, which helps reduce bugs.")]),e._v(" "),t("h2",{attrs:{id:"the-background-color-property"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-background-color-property"}},[e._v("#")]),e._v(" The "),t("code",[e._v("background-color")]),e._v(" property")]),e._v(" "),t("p",[e._v("The "),t("code",[e._v("background-color")]),e._v(" property is new to us, but it's very straightforward. As you might imagine, it sets the background colour for the elements which we specify.")]),e._v(" "),t("p",[e._v("One subtlety to be aware of is the amount of space an element takes up. For example, if you set the background color on an "),t("code",[e._v("<h1>")]),e._v(" or "),t("code",[e._v("<p>")]),e._v(" element, the background is going to reach from one side of the screen to the other, unless there are constraints on the size of these elements. For a "),t("code",[e._v("<span>")]),e._v(" or "),t("code",[e._v("<em>")]),e._v(" element, the background is going to stop at the limits of the text by default.")]),e._v(" "),t("p",[e._v("This is due to the default display properties of these elements.")]),e._v(" "),t("p",[t("code",[e._v("<h1>")]),e._v(" and "),t("code",[e._v("<p>")]),e._v(" elements have a default style of "),t("code",[e._v("display: block;")]),e._v(", and so they fill up the width of their containers.")]),e._v(" "),t("p",[t("code",[e._v("<span>")]),e._v(" and "),t("code",[e._v("<em>")]),e._v(" elements have a defauly style of "),t("code",[e._v("display: inline;")]),e._v(", and these take up only the space required to acommodate the element's content.")]),e._v(" "),t("p",[e._v("Play around with the "),t("code",[e._v("background-color")]),e._v(" and "),t("code",[e._v("display")]),e._v(" properties of different elements to see this in action.")]),e._v(" "),t("h2",{attrs:{id:"different-ways-to-specify-colours-in-css"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#different-ways-to-specify-colours-in-css"}},[e._v("#")]),e._v(" Different ways to specify colours in CSS")]),e._v(" "),t("p",[e._v("There are many ways to specify colours in CSS, with the most widely used formats being hexadecimal, RGB, and HSL. If you're not familiar with these colour models, refer back to the previous lecture.")]),e._v(" "),t("p",[e._v("All of these colour representations have variants that allow for transparency.")]),e._v(" "),t("p",[e._v("in CSS, we also have special keywords and named colours that we can make use of, such as "),t("code",[e._v("white")]),e._v(", "),t("code",[e._v("black")]),e._v(", and "),t("code",[e._v("red")]),e._v(".")]),e._v(" "),t("h3",{attrs:{id:"named-colours"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#named-colours"}},[e._v("#")]),e._v(" Named colours")]),e._v(" "),t("p",[e._v("Let's start with named colours, since we've seen several examples of these already.")]),e._v(" "),t("p",[e._v("The number of named colours in CSS is surprisingly large, and has grown with each new version of CSS. We can use any of these specially defined names in place of a colour defined in, say, RGB.")]),e._v(" "),t("p",[e._v("Some of these colour names are aliases for other colours. Most notably "),t("code",[e._v("gray")]),e._v(" and "),t("code",[e._v("grey")]),e._v(" can be swapped freely in any colour names which include them.")]),e._v(" "),t("p",[e._v("You can find a complete list of named colours "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords",target:"_blank",rel:"noopener noreferrer"}},[e._v("here"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("h3",{attrs:{id:"rgb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rgb"}},[e._v("#")]),e._v(" RGB")]),e._v(" "),t("p",[e._v("As we learnt previously, RGB represents colours using three channels — red, green, and blue — and each of these channels takes a value between "),t("code",[e._v("0")]),e._v(" and "),t("code",[e._v("255")]),e._v(".")]),e._v(" "),t("p",[e._v("In CSS, we can specify an RGB colour by writing "),t("code",[e._v("rgb()")]),e._v(". Inside the parenthese, we place the values for the different channels in order, separated by commas.")]),e._v(" "),t("p",[e._v("Pure red would therefore look like this: "),t("code",[e._v("rgb(255, 0, 0)")]),e._v(". Black would be "),t("code",[e._v("rgb(0, 0, 0)")]),e._v(", and white would be "),t("code",[e._v("rgb(255, 255, 255)")]),e._v(".")]),e._v(" "),t("p",[e._v("We can specify any combination of values we like, as long as they fall within the accepted range.")]),e._v(" "),t("h3",{attrs:{id:"hexadecimal-values"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hexadecimal-values"}},[e._v("#")]),e._v(" Hexadecimal values")]),e._v(" "),t("p",[e._v("As we know, we can also represent RGB values using hexadecimal, and this is perfectly valid in CSS. It's actually usually preferable, as hexadecimal representations of colours use fewer characters, and this makes our stylesheets smaller. Reducing the size of our stylesheets helps our pages load faster!")]),e._v(" "),t("p",[e._v("Whe specifying a hexadecimal colour in CSS, we need to write "),t("code",[e._v("#")]),e._v(" before the values.")]),e._v(" "),t("p",[e._v("To use the same examples as before, pure red would be "),t("code",[e._v("#ff0000")]),e._v("; black would be "),t("code",[e._v("#000000")]),e._v("; and white would be "),t("code",[e._v("#ffffff")]),e._v(".")]),e._v(" "),t("p",[e._v("In case you're wondering, the case of the characters doesn't matter. You can write "),t("code",[e._v("#FF0000")]),e._v(", for example, if you prefer.")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Hexadecimal shorthand")]),e._v(" "),t("p",[e._v("In some cases we can represent an RGB colour with fewer values, such as when the values repeat.")]),e._v(" "),t("p",[e._v("For example, let's look at the representation of white, which is "),t("code",[e._v("#ffffff")]),e._v(" in hexadecimal. Since each pair is the same value twice, we can cut this down to just "),t("code",[e._v("#fff")]),e._v(" and this is an understood shorthand for the longer "),t("code",[e._v("#ffffff")]),e._v(".")]),e._v(" "),t("p",[e._v("We can do the same for black, which is just "),t("code",[e._v("#000")]),e._v(".")])]),e._v(" "),t("h3",{attrs:{id:"hsl"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hsl"}},[e._v("#")]),e._v(" HSL")]),e._v(" "),t("p",[e._v("We start an HSL colour definition in much the same way as an RGB colour: "),t("code",[e._v("hsl()")]),e._v(".")]),e._v(" "),t("p",[e._v("Inside the parentheses, we need to provide three comma separated values. The first value is an angle, and the other two are percentages, representing the saturation and lightness levels respectively.")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Specifying the angle")]),e._v(" "),t("p",[e._v("One thing to note is that we don't need to write the "),t("code",[e._v("°")]),e._v(" symbol when writing HSL values. If you want to be explicit about the fact that this is a degree measurement, however, you can add "),t("code",[e._v("deg")]),e._v(" directly after the angle value.")]),e._v(" "),t("p",[e._v("You can also specify values in radians if you prefer, adding "),t("code",[e._v("rad")]),e._v(" after the value.")])]),e._v(" "),t("p",[e._v("A saturation level of "),t("code",[e._v("100%")]),e._v(" represents maximum saturation, as you might expect, and "),t("code",[e._v("0%")]),e._v(" represents the lowest posible level of saturation. This will give you a shade of grey.")]),e._v(" "),t("p",[e._v("For lightness, "),t("code",[e._v("100%")]),e._v(" will give you pure white, and "),t("code",[e._v("0%")]),e._v(" will give you black. A lightness level of "),t("code",[e._v("50%")]),e._v(" is normal lightness.")]),e._v(" "),t("p",[e._v("Here is a representation of the CSS named colour "),t("code",[e._v("purple")]),e._v(" in HSL as an example: "),t("code",[e._v("hsl(300, 100%, 25%)")]),e._v(".")]),e._v(" "),t("h2",{attrs:{id:"transparency-and-opacity"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transparency-and-opacity"}},[e._v("#")]),e._v(" Transparency and opacity")]),e._v(" "),t("p",[e._v("Both RGB and HSL can be extended to also include an alpha channel, which represents opacity. If you want to use this additional value, you need to write "),t("code",[e._v("rgba")]),e._v(" or "),t("code",[e._v("hsla")]),e._v(" as appropriate when defining the colour.")]),e._v(" "),t("p",[e._v("After doing this, you'll be able to provide a fourth value as either a percentage or a decimal, which represents how opaque you want the colour to be. This allows you to create layers of colour for overlapping elements.")]),e._v(" "),t("p",[e._v("A value of "),t("code",[e._v("100%")]),e._v(" or "),t("code",[e._v("1")]),e._v(" is fully opaque, which "),t("code",[e._v("0%")]),e._v(" or "),t("code",[e._v("0")]),e._v(" is completely transparent.")]),e._v(" "),t("p",[e._v("We can also provide opacity when using hexadecimal representations of RGB by adding a 7th and 8th digit. However, browser support for this feature is not universal, so some colours may not be displayed correctly. It really depends on which browser your users access your site through. This is mostly a problem for mobile browsers, so keep that in mind.")]),e._v(" "),t("p",[e._v("You can find support statistics "),t("a",{attrs:{href:"https://caniuse.com/#feat=css-rrggbbaa",target:"_blank",rel:"noopener noreferrer"}},[e._v("here"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("Instead of using the "),t("code",[e._v("rgba")]),e._v(" or "),t("code",[e._v("hsla")]),e._v(" definitions, you can also specify a property called "),t("code",[e._v("opacity")]),e._v(" which will change the opacity for an entire element. This is useful if you want the opacity effects to apply to all aspects of the element.")]),e._v(" "),t("p",[e._v('There\'s also a named "colour" called '),t("code",[e._v("transparent")]),e._v(" which can be used to create a full transparent component. This is roughly equivalent to writing an "),t("code",[e._v("rgba")]),e._v(" or "),t("code",[e._v("hsla")]),e._v(" colour with an alpha value of "),t("code",[e._v("0")]),e._v(".")])])}),[],!1,null,null,null);o.default=s.exports}}]);