Flash cards
Review the key moves
What is the main idea behind CSS Colors?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<h1 ___="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">LoremPut the learning moves in the order that makes the concept easiest to apply.
In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.
CSS Color Names
In CSS, a color can be specified by using a predefined color name:
CSS/HTML support 140 standard color names .
CSS Background Color
You can set the background color for HTML elements:
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem
ipsum...</p>CSS Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<h1 style="color:Tomato;">Hello
World</h1> <p style="color:DodgerBlue;">Lorem
ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi
enim...</p>CSS Border Color
You can set the color of borders:
Hello World
<h1 style="border:2px solid Tomato;">Hello
World</h1> <h1 style="border:2px solid DodgerBlue;">Hello
World</h1> <h1 style="border:2px solid Violet;">Hello
World</h1>CSS Color Values
In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
Same as color name "Tomato":
Same as color name "Tomato", but 50% transparent:
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>Learn more about Color Values
You will learn more about RGB , HEX and HSL in the next chapters.