Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
In this video we're going to talk about the five ways to define color in CSS. The first one, you've already seen, or at least if you've watched the preview video, that's keywords, things like black, or White, or teal, or orange, just very civil names describe the color that they are creating. There's a limited list of those, which we'll see in just a moment. We also have a Hex, or hexadecimal, which there's an example here of CC3300 and then the short hexadecimal version. You can show things down basically, under certain circumstances, and we also have our RGB Decimal notation.
For RGB values, you have the RGB with parentheses and inside of these parentheses you put the actual color that you want, in this case the decimal 204, 51, 0, or if you're going to use percentages, use something like 80%, 20%, 0%. Let's look at the keywords for a moment, there's a list of 17 keywords in CSS 2.1. In previous to CSS 2.1 there was actually a list of 16, but 2.1 added orange. So, sometimes we refer to CSS 2.1 as CSS, now with orange.
You can see here in this image that we took from the CSS 2.1 specification, these are the 17 named colors and their hexadecimal equivalents. Any browser that claims to be CSS conformant, has to be able to deal with these color names. Now, as you can see, these have hexadecimal equivalents, for example, red is ff0000, which basically means all the red you can give me and no green and no blue. White all ffffff, black all zeros.
The keywords are great if you just need one of the 17 colors and have no need for any more precise color then that, but you probably will need more precise color than that, as an example something that you might pick out of a color picker, like the one we see here from Adobe Photoshop. You can see right near the bottom of the dialog box, sort of to the right and center, there's a hexadecimal value right there, CC3300. That describes this particular color that's showing up in the preview box and right above that hexadecimal value, there's an RGB of 204, 51 and 0. Those are decimal RGB numbers.
So this particular shade of orange red CC3300, or 204, 51, 0, those are two different ways of expressing exactly the same color. Now, the other stuff there, you see the HSB, the Lab, HSB, the Lab, the CMYK. Those are the things that Photoshop allows you to do. You can't specify CSS colors using HSB, Lab, or CMYK notation, at least not yet. Maybe one day, but not right now. So let's go back to our list of keywords and there's our CC3300. In hexadecimal notation, each pair of digits describes the given color level. So, the first two digits, CC, that's two-digit hexadecimal number that describes how much red there's going to be and that's on a scale of 002ff, the hexadecimal being in the counting system that goes from zero to f and then starts over. So, the 33, is that level of green and then 00 is that level of blue, which would be none. So, in hexadecimal all white is all Fs and all black is all zeros.
CSS offers a short hexadecimal notation, where if you have a value that consists of two repeating pairs, like CC3300, you can short it down to just C30. Now, if we had CA3701, there's no way to take it down to the short hexadecimal notation, only if you have these explosive pairs, because when a browser sees C30, it says, oh ok, I have to expend this to CC3300. Now, is one better than the other to use.
Only if you like one better than the other. From a browser point of view, from my results point of view, these are functionally equivalent. C30 would give you exactly the same color that CC3300 does. So it really comes down to which one you prefer. You would rather have colors written out even when there are working in pairs. If you want them in the six digit notation, then that's fine, do that. If you like to compress it down to the shorter Hex, then go for it. Now, I said that the hexadecimal pairs go in the region 00 to FF. That's equivalent to the decimal range zero to 255, which is why the RGB decimal notation uses that range. White in RGB decimal is 255, 255, 255, black is 0, 0, 0.
So the equivalent of CC3300 is 204, 51, 0, just like we saw on our Photoshop color picker, CC3300, 24, 52, 0. Hexadecimal value CC is exactly equivalent to the decimal value 204. 33 in hexadecimal is 51 in decimal. So that's where RGB decimal come from, it's a base 10 decimal way of representing hexadecimal values, because not everyone can comfortably think in hexadecimal. Strange but true, so RGB decimal is there to make things a little easier and easier still is RGB percent, which in equivalence to our RGB 204, 51, 0 is an RGB of 80%, 20%, 0%.
RGB percentages go with a range as you might expect, 0% to 100%. White is all 100%, black is 0%. as we can see here. So how to get from RGB decimal to RGB percentage, is to divide each of the decimal values by 255. So our 204, 51, 0, 204 divided by 255 is 0.8 which is 80%, 51 divided by 255 is 0.2, that's 20% and zero divided by 255 of course is zero or 0%.
There're many people who find it much easier to think in terms of color percentages than they do in terms of decimal values on a rage, 0 to 255 or hexadecimal on a range 00 to FF. The drawback is that because of the way browsers are, percentages are a little bit courser, you should be in theory able to use the decimal fractions with the RGB percent, things like 66.67% and 42.5%, but browsers don't always handle that very well. Some of them will round down those fractions, so 66.67% becomes 66%. There are others that do or may in the future, round to the nearest whole number so the 66.67% will become 67%. So you get these slight differences in colors possibly between browsers if you use percentage fractions. So, if you prefer to use percentages, that's great.
By all means, do so. If you prefer to use the RGB decimal because they are a little bit more precise instead of basically a hundred points from 0-100, you have 255 points, from zero to 255. You can do that, or hexadecimal. Whatever you like. In a lot of cases, honestly, you're probably going to pick a color with a color picker or on a color wheel of some kind, once you find the color values that you want, you can get them out of your program if you're using Photoshop or if your sampling colors off of images, whatever it is you're doing, your tool will tell you, and probably in one of several ways what those color values are, you can probably get a six digit hexadecimal value out of it, or RGB 's from zero to 255 or even percentages.
So, you know, you can make some up in your style sheet, however you want to do them. There's no one that's objectively better than another. It's really just what makes you the most comfortable and as I say what your tools yield for you. If you use a Photoshop color picker, and it's got that little six digit Hex box right at the bottom, you can just select it and copy it and paste it in your style sheet and there you go. But, however you do it, not only can you apply these colors to text as we saw in a previous video, but also to backgrounds of elements as we'll see in the next video.
There are currently no FAQs about CSS Web Site Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.