Name: Manipulate Colors with CSS
Uploaded: 2018-10-09T00:55:19-05:00
Description: Defining colors can be done with hex, hsl, and rgb values. Each one works by telling browsers how to blend colors and lightness together. Let's apply these to our H1 and see how it affects the text color.

Set CSS Properties and Values (syntax)

Use Selectors to Style HTML Elements

Utilize Selector Specificity to Control Applied Styles  

Style Elements Using the Cascade 

Apply CSS Styles with Inheritance

Debug CSS with the Chrome Devtools

Understand CSS Layout with the Box Model

Control HTML Elements with Different CSS Units

Manipulate Colors with CSS

Add Backgrounds to HTML Elements

Hide and Show HTML Elements with CSS

Customize CSS Selectors with Pseudo Classes

Modify Font Style in CSS

Positioning HTML Elements using CSS

Use CSS Media Queries to Dynamically Apply Styles

Style a Logo and Navigation on a Website with CSS

Create Dynamic Styles with CSS Variables 

CSS Fundamentals 

Defining colors can be done with hex, hsl, and rgb values. Each one works by telling browsers how to blend colors and lightness together. Let's apply these to our H1 and see how it affects the text color. 

https://app.egghead.io/api/v1/lessons/css-manipulate-colors-with-css/subtitles

Instructor: [00:00] Let's go ahead and install our h1 to be the color red. We'll add that, save it, refresh. We see that everything goes red. Whenever we use the color property, not only it's going to change the text color, it's going to affect text decorations and also be the default color for any borders that are applied.

[00:18] The # here in the color value is telling us that this is the hex value where the first two are red, the second two represent green, and the last two are blue.

[00:27] For example, this is red because red is set to the highest value FF and the other is set to the lowest value of 0Let's change this hex and say RGB (255, 00Save and refresh, and our h1 is still red.

[00:44] When we use the RGB value here, this is indicating the red, green, and blue. We'll define the intensity of each color between the values of 0and 255. Red is still 255 and our other two colors are 00giving us red.

[00:59] Finally, let's remove this RGB and do hsl(0100%,50%). Save and we still have red. Hsl stands for hue, saturation and lightness. This is another way we can define colors in CSS.

[01:14] Hue is this first one here and its degree on the color wheel from 0to 360, 0is red, 120 is green, and 240 is blue. Saturation is the second one here and is a percentage value. 0means a shade of gray and 100% is the full color. Lightness is also percentage. 0is black. 50% is [inaudible] lighter dark. 100% is white.

[01:38] All three of these are valid when working with values that need colors like borders or backgrounds. We can set a blue background to our h1.

Manipulate Colors with CSS

Share this video with your friends

Course

CSS Fundamentals