[codecademy]css

Great work! You've learned the basics of CSS structure and syntax. We'll continue to build on these basics as you learn more about CSS.

Let's review what you've learned so far:

1. A CSS selector targets an HTML element.

2. CSS declarations style HTML elements. Declarations must contain the following two things:

• property - the property you want to style.
• value - the value for the property you are styling.

3. CSS declarations must end in a semicolon (;)

4. A CSS rule consists of a CSS selector and the declarations inside of the selector.

5. Multiple element selectors can be used to style multiple elements at once.

6. Comments keep code easy to read and allow you to experiment with new code without having to remove old code.

7. CSS follows certain best practices for spacing and indentation:

• One line of spacing between a selector and the opening curly brace.
• No spacing between CSS declarations and the opening and closing curly braces of the CSS rule.
• Two spaces of indentation for CSS declarations.
• One line of spacing between CSS rules.

 

Color:

The current revision of CSS, CSS3 (at the time of this writing), introduces a new way to specify colors using HSL colors.

HSL stands for Hue, Saturation, and Lightness. Specifically, this is what each means:

1. Hue - the technical term that describes what we understand as "color." In HSL, hue is represented on a color wheel. It can take on values between 0 and 360.

2. Saturation - the amount of gray in a given color. In HSL, saturation is specified using a percentage between 0% and 100%. The percentage 0% represents a shade of gray, whereas 100% represents full saturation.

3. Lightness - the amount of white in a given color. Similar to saturation, lightness is specified using a percentage between 0% and 100%. The percentage 0% represents black, whereas 100% represents white. 50% is normal.

You can use HSL colors in your CSS like this:

h1 { color: hsl(182, 20%, 50%); }

Notice that using HSL is very similar to using RGB.

Note: Because HSL is a part of CSS3, older browsers may not support it. In a later exercise, you'll learn how to work around support issues for colors.

 

RGB colors, hex color codes, and HSL colors offer web developers an extraordinary amount of color customization options. As these properties become more advanced, however, it's important to keep in mind that not all users browse the Internet with the same browser, let alone the same version of a given browser.

How does this affect web development? Newer revisions of HTML and CSS affect older browsers. Older browsers, over time, will become dated (possibly obsolete) and not be able to support newer CSS features. For example, many older browsers do not support RGBa, HSL, or HSLa.

Because of this, we must include redundant color options in our CSS code that can cater to a wide audience of different browsers.

Specifically, we can add multiple CSS color declarations, just in case a user's browser can't support a certain declaration.

h1 { color: rgb(22, 34, 88); color: rgba(22, 34, 88, 0.4); }

In CSS, the latter of multiple declarations takes priority. In the example above, if the user's browser supports rgba(), then that color will be applied to the heading. If it does not, then CSS will use the first rgb() color declaration, as a backup.

Using redundant declarations allow you to support as many users as possible across multiple versions of different Internet browsers.

 

reat job! You've learned how to style an important aspect of the user experience: color.

Let's review what you've learned so far:

1. Foreground color refers to the actual color of an element, styled with the color property.
2. Background color refers to the color behind an element, styled with the background-colorproperty.
3. There are 147 named colors available.
4. RGB and hexadecimal colors offer over 16 million color possibilities.
5. HSL is a new way of defining colors in CSS3.
6. You can modify the opacity of a color with RGBa or HSLa colors.
7. Not all browsers support newer CSS features, like opacity or HSL, so additional declarations should be made to support a wide audience of users.
8. There are many color picker resources available on the Internet to help you select specific colors, as well as provide colors in different formats.