Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
In this chapter, we'll take a look at some of the new features and techniques involving color in CSS3. The CSS color module Level 3 is one of the more polished CSS3 modules and at the time of this recording is about to enter Proposed Recommendation status. What that means more than anything else is that implementation is rather far along and most of what we'll see in this chapter is ready to use right now. In this movie, I want you to give you a brief overview of how color works in CSS, then take a more detailed look at the new color formats available to us in CSS3.
How we apply color really hasn't changed from CSS2 to CSS3. We can still define color as part of the foreground, background, and border properties of an element. Foreground colors are defined using the color property, which is defined in the color module. The Level 3 module introduces the new opacity property, which allows you to specify the transparency of an element. We're going to take a closer look at the opacity property a little bit later on. Now in the past, if you specified color in CSS, chances are you've used hexadecimal notation or color keyword.
Defining colors using RGB values was available to us in CSS2. But due to a uneven support early on, few people actually used it. All of these are still valid ways of defining color in CSS3. In fact, the SVG 1.0 color keyword names have been added to the module. Giving you about say 160 color keywords all total to use, including, now I'm not making this up, Dodger blue. If you want to see a complete list of these keywords along with their hexadecimal and RGB color breakdowns, check out the specification.
Okay, so what's new? Well, now, in addition to being able to define color as RGB values, we can define color using our RGBA, HSL, and HSLA. Okay, so what's all that? Now RGBA is a mixture of RGB values, plus an alpha setting for transparency. HSL stands for hue, saturation, and lightness. As with RGB, there is a variation on this that allows you to pass an alpha value. There is a very big difference between using the opacity property versus these alpha declarations and we'll explore that more a little later on as we look at both methods of dealing with element transparency.
You'll also notice that CMYK is listed here. We'll talk a little more about that in a moment as well. For right now, let's take a closer look at defining color using these color formats. We have a few syntax options for defining RGB colors and to understand them will help you to know a little bit about the format itself. RGB is an additive color model that mixes red, green, and blue together to form literally millions of colors. RGB is the standard color format for all screen display devices, including the one you're looking at now.
When defining RGB color values in CSS, each color can be defined as a value between 0 and 255. Remember that RGB is additive. So if you define a color as 0, 0, 0, you'll get black. 255, 255, 255, however, would give you white. You can also define RGB values as percentages. Here you can see sort of a salmon color red. RGB is 69%, 9%, and 12%. Now it's worth pointing out here that hexadecimal notation is another way of writing RGB values.
This chart shows how hex values are used to look up the actual RGB value of a color. Now even though I've been using RGB for years and years, it's still not the most intuitive color system in the world. I'll give an example. Off the top of your head, give me the RGB value for a light pink. Any idea? No, well, I don't have one either. RGB is designed with your eyes in mind, not your head. A hue, saturation, and lightness on the other hand is actually pretty easy to grasp, once you understand it.
Hue can be thought of like a big color wheel. Like any circle, it has 360 degrees. So its value can be specified anywhere between 0 to 360. Lightness refers to the grayscale value of the color. It's brightness if you will. 100% would give you a white, while 0% would give you black. Saturation refers to how much color of this hue is added. 100% would mean an intense a color as you can represent, while 0 would represent no color, a neutral grey value.
I mix all of three of those together and it's very easy to see how hue, saturation, and lightness can be used to define the color you want back. In fact, the trickiest part is remembering which values to use to get the hue you want. I'll give you a hint. On the wheel, 0 or 360 give you red. 90 degrees gives you green, 180 degrees gives you cyan, and 270 gives you violent or purple. Now the rest, you can work through if you just remember your ROYGBIV from grade school. Using this, it's actually pretty easy to figure out how you get a light pink by using a Hue of say 0 degrees, that's a red, Saturation of around 10, pretty light, not a lot of color on it, and a Lightness value around 95, so a fairly bright.
It's also much easier to tweak those colors to get the shade you're looking for than it is with RGB. Okay, so now we know a little bit more about it, how do you define colors with HSL in CSS3? The syntax is actually exactly what we've been doing. The first value is the hue. Any value between 0 and 360 is accepted. The next two, saturation and lightness respectively, are defined as percentages. That's pretty simple, right? Now, I mention the use of alpha a little bit earlier. If you want to add a value for transparency to either RGB or HSL values, you simply pass one more comma separated value.
Alpha is defined from zero to 100% by using a zero or a one for zero to 100, and then decimals for any percentages in between. 50% would be defined as .5 for example. We'll experiment with dealing with alpha transparency a little later on. I'll also want to point out how you add an A to the actual declaration itself, so RGBA or HSLA. Very, very important. Now you may have heard that CMYK is available in CSS3, and it is. It's just now part of the color module.
CMYK is defined in the Generated Content for Paged Media specification. Sounds fun, right? It is generally intended for print, not web. CMYK values are passed as comma separated values as well, with zero to one and decimals indicating the desired percentage values. Now current support for the new color module and syntax is generally good. But take notice of the lack of support in Internet Explorer. This is especially problematic when dealing with alpha, as we'll see a little bit later on.
Now that we've gone over a brief overview of color in CSS and the new color formats available to us, we'll begin to explore those in more detail in our next movie as we discuss defining transparency for elements in CSS3.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.