CSS Colors Project

Essential Question: How are colors determined in CSS?

Mastery Objectives:

SWBAT create colors in CSS.
SWBAT use predetermined colors in CSS.
SWBAT format hue, saturation, and lightness in CSS.

Resources:

CSS - Colors Introduction - W3Schools.com - CSS Colors

https://youtu.be/LLmCr_201GU?si=Z46qiGWFwY5VaDVV - hex colors in CSS

https://youtu.be/6tbUo6PXc88?si=Tk2jW8FqWsO4Kli- RGB RGBA colors in CSS

CSS - Colors HSL - W3Schools.com - HSL colors in CSS

HTML Color Names - Predefined color names

HTML Color Picker - Color Picker

Colors HSL and HSLA - Color HSL

Directions:

CSS Colors

In style.css, change the foreground color of the h1 heading to midnightblue. CSS Backgrounds
Next, set the background color of the h1 heading to aqua.
In the browser is a web page that uses named colors and hex colors. We’re going to translate the named colors into hex, to be more consistent. The colors won’t visually change, yet.

Find the CSS rule that uses the named color darkseagreen and change it to its hex value, #8FBC8F. CSS HEX Colors

Find the four other named colors of the roast types and convert them to their hex values, as shown here:

sienna: #A0522D
saddlebrown: #8B4513
brown: #A52A2A
black: #000000

Find the hex value #8FBC8F and change it to rgb(143, 188, 143). CSS RGB and RGBA Colors
Find the hex value #A0522D and change it to rgb(160, 82, 45).
Find the hex value #8B4513 and change it to rgb(139, 69, 19).
In the .green rule in style.css, change the background color to #9EB599.
In the .light rule in style.css, change the background color to #683C2C.
In the .city rule in style.css, change the background color to #4C352D.
In the .vienna rule in style.css, change the background color to #352926.
In the .italian rule in style.css, change the background color to #141212.
In style.css, modify the lightness of the background color of the selector h3to be 25%. CSS HSL Colors
Change the saturation of the background color of the h2 selector to 50%.
Change the hue of the body selector’s background color to 240 degrees.
Give the element with h2 an alpha value of 0.6. Remember to change hsl to hsla.
Give the element with h3 an alpha value of 0.4 using hsla.
Modify the body rule’s background color to have a value of rgba(0, 255, 0, 0.1). CSS RGB and RGBA Colors

body {

padding: 0;

margin: 0;

background: #F7F7F7;

/* Old browsers */

background: -moz-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* FF3.6-15 */

background: -webkit-linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

/* Chrome10-25,Safari5.1-6 */

background: linear-gradient(45deg, #F7F7F7 0%, #EAE0D5 100%);

}

/** Header styles **/

.header {

background-image: url(https://th.bing.com/th/id/R.3c67e53d682589dcb8ce02dd3ac1e20c?rik=LeUqj%2bnBd3%2f0WA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f11%2f17%2f239445-coffee-coffee_beans-cup.jpg&ehk=%2bEd%2bhMjaHGMrExklwM9MNbALfkaDNqvDmS67gs%2bf2OA%3d&risl=&pid=ImgRaw&r=0);

height: 400px;

background-position: center center;

}

.roasting {

margin: 40px auto;

padding: 20px 30px 40px 30px;

background-color: #FFFFFF;

overflow: auto;

width: 75%;

border-radius: 4px;

align-self: center;

}

.roasting p {

color: #938E89;

text-align: center;

line-height: 24px;

font-family: 'Raleway', sans-serif;

font-size: 16px;

font-weight: 400;

}

.spectrum div {

font: inherit;

padding: 0 20px;

color: #FFFFFF;

overflow: auto;

opacity: 0.9;

}

.spectrum p {

color: #FFFFFF;

text-align: left;

}

/* Roast types */

.green {

background-color: darkseagreen;

}

.light {

background-color: sienna;

}

.city {

background-color: saddlebrown;

}

.vienna {

background-color: brown;

}

.italian {

background-color: black;

}

/* Typography */

h1 {

color: #41292C;

font-family: 'Covered By Your Grace', sans-serif;

font-size: 100px;

line-height: 76px;

margin: 0;

position: relative;

text-align: center;

top: 20%;

}

h2 {

color: #E4BB97;

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 500;

text-align: left;

text-transform: uppercase;

}

h3 {

color: #41292C;

font-family: 'Raleway', sans-serif;

font-size: 22px;

font-weight: 500;

text-align: center;

}

h4 {

font-family: 'Raleway', sans-serif;

font-size: 28px;

font-weight: 700;

line-height: .2em;

}

h5 {

font-family: 'Raleway', sans-serif;

font-size: 20px;

line-height: .2em;

font-weight: 300;

}

/* Page elements */

ul {

margin: 0 auto;

padding: 0;

width: 75%;

}

li {

border-bottom: 1px solid #E4BB97;

list-style: none;

margin: 100px 0px;

padding-bottom: 60px;

}

p {

color: #444444;

line-height: 32px;

font-family: 'Raleway', sans-serif;

font-size: 20px;

font-weight: 100;

}

a {

color: #214E34;

font-family: 'Raleway', sans-serif;

font-size: 13px;

font-weight: 900;

text-align: left;

text-transform: uppercase;

text-decoration: none;

letter-spacing: 2px;

}

<!DOCTYPE html>

<html>

<head>

<title>The Best Coffee - By Region</title>

</head>

<body>

<h1>Where Does Coffee Come From</h1>

</div>

<h3>How Does Roasting Work</h3>

<p>Roasting coffee transforms the chemical and physical properties of green coffee beans into roasted coffee products. The roasting process is what produces the characteristic flavor of coffee by causing the green coffee beans to change in taste. Unroasted beans contain similar if not higher levels of acids, protein, sugars, and caffeine as those that have been roasted, but lack the taste of roasted coffee beans due to the Maillard and other chemical reactions that occur during roasting. https://en.wikipedia.org/wiki/Coffee_roasting </p>

<br>

<h4>Green Beans</h4>

<p>After the cherries are put through the pulper and the seeds have been soaked, they are set out to sun-dry for a period of one week. The beans are periodically raked to ensure even drying. Once dried, the beans will form a thin, paper-like shell called parchment. Once formed, the parchment will increase the beans’ storage life considerably. When the beans are ready, the parchment is removed, and the beans are graded and sorted according to size, weight, and defects. The sorted beans are then stored in 60 or 70 kg sacks called sisal bags that help the beans retain moisture for a longer period of time. The storage time cannot exceed one year for the beans to be considered a current crop. If the green coffee remains in storage for longer than a year, it is considered an old crop and is less valuable because of its drier state. https://en.wikipedia.org/wiki/Coffee_bean_storage </p>

</div>

<h4>Light Roast</h4>

<p>Moderate light brown, but still mottled in appearance. A preferred roast for some specialty roasters, highlights origin characteristics as well as complex acidity.</p>

</div>

<h4>City Roast</h4>

<p>Medium brown, common for most specialty coffee. Good for tasting origin character, although roast character is noticeable.</p>

</div>

<h4>Vienna Roast</h4>

<p>Moderate dark brown with light surface oil, more bittersweet, caramel flavor, acidity muted. In the middle of second crack. Any origin characteristics have become eclipsed by roast at this level.</p>

</div>

<h4>Italian Roast</h4>

<p>Nearly black and shiny, burnt tones become more distinct, acidity nearly eliminated, thin body.</p>

</div>

<ul>

<li>

<h2>Brazil</h2>

<p>Arabica dominates both Brazil and the world as a whole with about 85% of the production; robusta accounts for the remaining 30%. In Brazil, arabica production is located in the main coffee-growing cluster of states led by Rio where arabica is

produced almost exclusively. Robusta is primarily grown in the northwestern much smaller state of Espirito Santo where about 80% of the coffee is robusta.</p>

<a href='#'>Learn More about Brazil</a>

</li>

<li>

<h2>Colombia</h2>

<p>Colombia has a reputation as producing mild, well balanced coffee beans.Colombia's average annual coffee production of 11.5 million bags is the third total highest in the world, after Brazil and Vietnam; though highest in terms of the arabica

bean. The beans are exported to United States, Germany, France, Japan, and Italy. Most coffee is grown in the Colombian coffee growing axis region.</p>

<a href='#'>Learn More about Colombia</a>

</li>

<li>

<h2>India</h2>

<p>Indian coffee, grown mostly in southern India under monsoon rainfall conditions, is also termed as 'Indian monsooned coffee'. Its flavor is defined as: 'At its best similar to the flavor characteristics of Pacific coffees, but at its worst bland and uninspiring'. The two well known species of coffee grown are the Arabica and Robusta. Probably the most commonly planted Arabica in India and Southeast Asia is S.795.</p>

<a href='#'>Learn More about India</a>

</li>

<li>

<h2>Ethiopia</h2>

<p>Ethiopian beans can be divided into 3 categories: Longberry, Shortberry, and Mocha. Longberry varieties consist of the largest beans and are often considered of the highest quality in both value and flavor. Shortberry varieties are smaller. The Mocha variety is a highly prized commodity. Mocha Harars are known for their peaberry beans that often have complex chocolate, spice and citrus notes.</p>

<a href='#'>Learn More about Ethiopia</a>

</li>

<li>

<h2>Costa Rica</h2>

<p>Costa Rican coffee beans are considered among the best in the world. Tarrazu is thought to produce the most desirable coffee beans in Costa Rica. In 2012, Tarrazu Geisha coffee became the most expensive coffee sold by Starbucks in 48 of their stores in the United States, using the Clover automated French press. The finest coffee is typically grown at altitudes of 1200 to 1700 meters.</p>

<a href='#'>Learn More about Costa Rica</a>

</li>

<li>

<h2>Kenya</h2>

<p>The acidic soil in highlands of central Kenya, just the right amount of sunlight and rainfall provide excellent conditions for growing coffee plants. Coffee from Kenya is of the 'Colombia mild' type, and is well known for its intense flavor, full body, and pleasant aroma with notes of cocoa and high grade coffee from Kenya is one of the most sought-after coffees in the world.</p>

<a href='#'>Learn More about Kenya</a>

</li>

</ul>

</body>

</html>