Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Use your browser to find a CSS color picker and color converter(you can find one here). Use the color picker to find a shadeof orange.

Use your browser to find a CSS color picker and color converter(you can find one here). Use the color picker to find a shadeof orange. Any orange color variation is fine.

Open the styles.css file and locatethe Orange comment. Below the comment, create astyle rule for the class selector, orange-hex, that sets abackground color to orange using ahexadecimal color value.

Create another style rule for the classselector, orange-rgb, that sets a background color to the sameorange color created in task 3, but use an RGB colorvalue instead of hexadecimal. Use a color converter to find theequivalent RGB color value.

Create another style rule for the classselector, orange-hsl, that sets a background color to the sameorange color created in task 3, but use an HSL colorvalue instead of hexadecimal. Use a color converter to find theequivalent HSL color value.

Use the color picker to find a shade of purple. Any purple colorvariation is fine.

Locate the Purple comment inthe styles.css file. Below the comment, create astyle rule for the class selector, purple-hex, that sets abackground color to purple using ahexadecimal color value.

Create another style rule for the classselector, purple-rgb, that sets a background color to the samepurple color created in task 7, but use an RGB colorvalue instead of hexadecimal. Use a color converter to find theequivalent RGB color value.

Create another style rule for the classselector, purple-hsl, that sets a background color to the samepurple color created in task 7, but use an HSL colorvalue instead of hexadecimal. Use a color converter to find theequivalent HSL color value.

Use the color picker to find a shade of green. Any green colorvariation is fine.

Locate the Green comment inthe styles.css file. Below the comment, create astyle rule for the class selector, green-hex, that sets abackground color to green using ahexadecimal color value.

Create another style rule for the classselector, green-rgb, that sets a background color to the samegreen color created in task 11, but use an RGB colorvalue instead of hexadecimal. Use a color converter to find theequivalent RGB color value.

Create another style rule for the classselector, green-hsl, that sets a background color to the samegreen color created in task 11, but use an HSL colorvalue instead of hexadecimal. Use a color converter to find theequivalent HSL color value.

View the index.html in your browser. Inthe index.html file, use a paragraph element toidentify the online color converter you used to help complete thisassignment. Include a link to your resource that opens in a newtab. Use your browser to research the differences betweenhexadecimal, RGB, and HSL CSS color codes. Use a paragraph elementto summarize your findings. Use a paragraph element toidentify your preferred CSS color code format. Use a emptyparagraph element to provide a summary of HWB color. Use aempty paragraph element to provide a summary of CMYK color. Validate the HTML and CSS files. Correct any errors.

index.html______

CH 4 Extend Your Knowledge

CSS Colors

Orange

Hex Orange

RGB Orange

HSL Orange

Purple

Hex Purple

RGB Purple

HSL Purple

Green

Hex Green

RGB Green

HSL Green

Color Converter Used:

Preferred color code format:

HWB summary

CMYK summary

Student Name:

Chapter 4, Extend Your Knowledge

css______

/* CSS Reset */

body, header, nav, main, footer, h1, h2 {

margin: 0;

padding: 0;

border: 0;

}

/* Style rules for body and header content */

body {

background-color: #d9d9d9;

}

header, footer {

padding: 2%;

text-align: center;

}

/* Style rules for main content */

main {

padding: 2%;

overflow: auto;

}

main p {

font-size: 1.25em;

padding: 2%;

}

main a {

color: #0000b3;

text-decoration: none;

}

#orange, #purple, #green {

display: block;

margin-bottom: 2%;

text-align: center;

width: 33%;

float: left;

}

#questions {

clear: left;

}

.box {

height: 100px;

width: 100px;

border: 1px solid #000;

display: inline-block;

padding-top: 5%;

}

/* Orange */

/* Purple */

/* Green */

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

More Books

Students also viewed these Programming questions

Question

4. Review periodically.

Answered: 1 week ago