Color Keywords, Hex Colors, and Font Families3:13 with Joy Kesten
Learn about color keywords, hexadecimal colors, and how to change the fonts on your web page.
In our CSS, we've used a lot of helpful properties to add color to the page. 0:00 Such as color, background color, and border. 0:05 CSS uses a few different ways to identify color. 0:09 Two types are color keywords like red, green and blue and hexadecimal colors. 0:13 We'll learn more about those in a minute. 0:19 Color keywords are black, silver, gray, white, 0:22 maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal and aqua. 0:27 RGB stands for red, green and blue. 0:34 And when you're using a hexadecimal number to write these colors, 0:37 you represent each color with two number or letters. 0:42 So two for red, two for green, and two for blue. 0:46 Hex colors always begin with a hash or pound, followed by rrggbb, or 0:50 the abbreviated version of just rgb. 0:55 An abbreviated three digit form is sometimes used when each pair of 1:01 colors repeat the same character. 1:05 For example, if the color is 0099cc, we could just write the shorthand of 09c. 1:08 In our code, you can see a few examples of each. 1:16 Here at the top, we have a six digit hex color, 1:19 and here in our body, we have a three digit hex color. 1:22 When you position your mouse over the color, 1:25 you should be able to get a preview in the workspace like this. 1:27 The next important feature I want to talk about is the font family. 1:33 Fonts are an important part of the design aesthetic. 1:37 Text, whether on the web or in print conveys a particular message. 1:40 And your choice of fonts can greatly reinforce that message. 1:44 Bring out the personality of your website. 1:48 When features of CSS were first implemented into the browser. 1:52 The technology became available to display fonts that weren't installed in 1:55 your computer. 2:00 This means you can now choose from a much larger selection of fonts for 2:01 your webpage. 2:05 Then you could just a few years ago. 2:07 In order to take full advantage of this, 2:09 let's use Google web fonts to access a wide range of fonts for your web page. 2:11 If you follow the link in the teacher's notes to pick your Google fonts you can 2:17 browse the different fonts available. 2:22 I'll show you how it works. 2:24 Begin by choosing a font. 2:26 I'll choose Oswald, add it to my collection. 2:28 And here, I can see I've Oswald in my collection and press Use. 2:33 You scroll down a touch. 2:38 You can see the link that we have here for 2:40 our Google font, the same one with a different font family. 2:43 That we used here in our index.html. 2:49 In the line for font family, that we should write into our CSS. 2:52 And this is where we wrote it into our CSS. 2:58 You should pick any font you want and replace it with the one I have. 3:01 Well that about wraps it up for colors and fonts in our stylesheet. 3:05 Stay tuned for a quick quiz before the last video in this course. 3:09
You need to sign up for Treehouse in order to download course files.Sign up