Question
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______
CSS Colors
Orange
Purple
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 */
body {
color: orange hex;
background-color: #ff9900 }
body {
color: orange-rgb;
background-color: (255, 153, 0) }
/* Purple */
body {
color: purple;
background-color: #d8da3d }
/* Green */
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started