Week 8 Learn & Practice - Color

Textbook

Chapter 13: Colors and Backgrounds
- Like a Rainbow (Gradients) is optional

Image Source: The Ultimate Guide to CSS Colors (2020 Edition)

Color Values

There are multiple ways of specifying colors in CSS.

Color names
RGB color values
RGBa color
Hexadecimal values
HSL color values
HSLa values
CMYK color values

Color Names

We have been using predefined color names so far in this course. As of now, there are 140 defined color names.

RGB Color Values

To be able to choose from millions of different colors, we can specify the color values in RGB. Computer monitors and any digital device creates colors by combining Red (R), Green (G), and Blue (B). The RGB color model mixes different light "channels" that, when mixed in different combinations create the color you see.

Each channel (red, green, or blue) takes a value between 0 - 255.
If all channels are 255, you have white rgb(255, 255, 255);
If all channels are 0, you have black. rgb(0, 0, 0);

Download the week08Demo_part02_color file and open the website in VS Code and your browser.
Spend a moment studying the HTML structure and CSS.
Type in "Color Picker" in the Chrome web browser.
You can play with picking any color and copy the RGB values below.

Choose a color you like and apply it to color the <h1> element.

h1 {
    font: bold 1.5em Georgia, serif;
    text-shadow: .1em, .1em, .2em, grey;
    color: rgb(84, 33, 69);
}

There are many different color pickers on the web to use. If you recall from our lecture on the Developer Tools, you even have a color picker there!

Hexadecimal Values

You can write the RGB values in a hexadecimal (hex) format. Hexadecimal numbers are a 16-based number system. It uses 16 digits (0-16) and A-F to represent the quantities. The hex system is commonly used in computing because it reduces the space it takes to store certain information.

Most color pickers provide the hex value along with the RGB values. The values are proceeded by the pound/hash symbol to indicate they are Hex values.

Go back to your color picker and copy a hexadecimal value to color your <h2> elements

h2 {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: .5em;
    text-align: center;
    color: #c92279;
}

RGBa Values

The RGBa color values add a fourth "channel", the alpha channel. This channel allows you to specify the level of transparency. However, older browsers like IE8 do not support this channel, so you need to provide a backup color.

Foreground vs Background Colors

The foreground color consists of the text color and a border (if there is one). We will learn more about borders in the next lecture.
The background color fills the "canvas" behind the element, extending to the outer edge.

Let's color the dessert section of our menu.

CSS selector pop-quiz!

How would we style this section element without affecting the other section elements on the page?

Place a border around this section. The syntax for creating a border can take three values:
- The width of the border
- The style of the border
- The color of the border
```
border: 4px dashed green;
```
You can also specify these values separately, but the above shortcut is easier and what professionals do!
```
h2 {
    border-width: 4px;
    border-style: dashed;
    border-color: green;
}
```
If you don't specify a border color, it will use the color property value.

It's getting crowded!

Notice how crowded the text on the left is against the border? Not very pleasant, we'll learn how to fix this next week. But you can add padding: 1em; now if you like.
Add a background color. This property is rather straightforward. Use the background-color property and specify the color of your choosing. Make sure the text is still legible, so choose a light color.
```
background-color: #deeffa;
```
Zoom in. You can see that the background color fills into the border by seeing the color through the gaps in the border.
Add a light background to the body element. Choose a different color than the one used for the dessert section.

Background color info

You can set the background color of any block-level and inline element
Background colors do not inherit, because the default setting of all background elements is transparent. Therefore, you can apply a background color to the <body>, and the color will display behind all other elements.

Opacity

Besides using the RGBa color format, you can specify opacity with the opacity property. It takes a value from 0 (completely transparent) to 1 (completely opaque). So a value of .5 gives an element an opacity of 50%.

Add some opacity to the dessert section.
```
opacity: .6;
```

You should notice that opacity affects both the foreground and background colors.

Pseudo-class Selectors

More selectors! Let's review the selectors we have learned so far:

Element selectors
ID Selectors
Class Selectors
Descendant Selectors

Some elements have "states". For example, clicking on links changes their color. Some change color when your mouse hovers over them. The <a> element has different states, such as visited, hover, active, and focus. In CSS, we can style the different states. We do this with the pseudo-class selector.

Pseudo-class selectors are indicated by the colon : character and typically go immediately after the element name.

For example, a:hover is a pseudo-class targeting the hover state of an <a> element.

pseudo-class	description
`:link`	Applies a style to unclicked (unvisited) link
`:visited`	Applies a style to visited links
`:focus`	Applies a style when the element is selected and ready for keyboard input (tab key)
`:hover`	Applies a style when the mouse pointer is over the element
`:active`	Applies a style when the element is in the process of being clicked or tapped

Example of a hover pseudo-class

a:hover {color: orange;}

First, let's remove the default underline that appears under all links. We can do this with the text-decoration: none; property/value pair.
```
a {text-decoration: none;}
```
This will remove the underline for the links in all their states.
Add styles for unvisited links. Make the color something other than the default blue.
```
a:link {color: teal;}
```
Add styles for visited links. Make the color something other than the default purple.
```
a:visited {color: rgb(138, 104, 12);}
```

Add styles for the hover state. Change the color and add a text-shadow.

    a:hover {
    color: magenta;
    text-shadow: .1em .1em .2em grey;
}

Add styles for the active state and focus state. Change the font-weight to bold.

a:active, a:focus {font-weight: bold;}

Reset visited link color

Once you click on a link, the CSS visited color remains on that link. It may be helpful to reset these colors for testing purposes. To do this, you need to clear your browser cache. Here are instructions for clearing the browser cache in Chrome.

Other Pseudo-class Selectors

There are other pseudo-class that can be very helpful when styling your document. We don't have time to cover each pseudo-class here, but a list is available on page 279 of your textbook or at W3Schools.

Pseudo-element Selectors

There are four selectors called pseudo-element selectors. They act as though they are inserting fictional elements into the document structure for styling. They are indicated in the stylesheet by two colons ::, you can also use a single colon :

pseudo-element	description
`::first-line`	Applies a style to the first line of the specified element
`::first-letter`	Applies a style to the first letter of the specified element
`::after Inserts`	content after the specified element
`::before Inserts`	content before the specified element

Note about ::first-line and ::first-letter

Certain properties are only available for ::first-line and ::first-letter. Page 280 of your textbooks list these.

Style the first letter of each <h2> element to be larger.
```
h2::first-letter {font-size: 1.3em;}
```

Attribute Selectors

The last type of selector we will look at is an attribute selector. This selector targets an element based on its attributes. Using an attribute selector can make your HTML markup cleaner because it removes the need to add a lot of id and class attributes. They are indicated in the stylesheet with the opening and closing brackets [ ]

Select all elements that have a class attribute and color them red.
```
[class] {color: red;}
```
This styled every element in our document that has a class attribute no matter what the class value is. We could get more specific and preface our selector with an element. The example below will just target all <span> elements that have a class attribute.
```
span[class] {color: maroon;}
```
How can we style all the vegan choices on the menu? We could add class selectors to each of them, but an easier way is to use the title attribute that is already in the markup.
```
[title] {color: firebrick;}
```
This also changed some of the text in our header section since that text also has a title attribute.
Modify the title attribute selection, so it only selects title attributes with the value of “vegan selection”.
```
[title="vegan selection"] {color: firebrick;}
```
We could make this even simpler and choose any element that starts with vegan in the title attribute value.
```
[title^="vegan"] {color: firebrick;}
```

Background Images

Unlike images, background images use CSS.

Add the plaid.png image as a background to the body element.
```
body {background-image: url(../images/plaid.png);}
```
We are in the styleSheets folder, so we need to back out a directory and then go into the images folder.

Keep the background color in your <body> element even though the image overrides it. In case the background image fails to load, the color will still show up.
The menu text is a little hard to read now, so let's add a background color to the <main> element and give it a light opacity.
```
main {
    background-color: #f5f3da;
    opacity: .7;
}
```
We have that problem with the text again on the left-side...we'll learn how to fix it next week. But you can add padding: 1em; now if you like.
Add the purpledot.png to the <header> element. By default, the image tiles or repeats itself in the element.
```
header {background-image: url(../images/purpledot.png);}
```
Restrict the tiling to only repeat on the x-axis (horizontally)
```
header {
    background-image: url(../images/purpledot.png);
    background-repeat: repeat-x;
}
```
You can also choose to have it repeat vertically by using the repeat-y value.

If you don't want the image to repeat at all, use the value no-repeat.