New Perspectives on HTML and CSS
6th Edition
ISBN: 9781111526443
Author: Carey, Patrick
Publisher: Course Technology Ptr
expand_more
expand_more
format_list_bulleted
Question
Chapter 2, Problem 15CP1
Program Plan Intro
To create a style rule that set a different background color for each playbill user for the indicated background color values.
Expert Solution & Answer
Trending nowThis is a popular solution!
Students have asked these similar questions
Your completed assignment should contain all of the following:
■ Your color scheme's name should be set as the table's header. It should have one
or more font styles applied to it to differentiate it from other text in the table.
▪ You should list each color name, with each cell having its color set as its
background color.
■ Include cells that give each color's hex value.
■ Include cells that give each color's rgb value.
▪ Include cells that give each color's hsl value.
▪ Your HTML table should be logically and properly constructed.
body{font-family: Georgia, serif;font-size: 100%;line-height: 175%;margin: 0 15% 0;background: rgb(210,220,157) url("/Users/332bo/Desktop/Week_9_Lab/images/blackgoose.png") center top left 30%;}
header{margin-top: 0;padding: 3em 1em 2em 1em;text-align: center;border-radius:4px;background : url("/Users/332bo/Desktop/Week_9_Lab/images/gooseshadow.png") no-repeat center bottom right / 5% hsl(0, 14%, 95%, 0.5), url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y center top right / 5% hsl(0, 14%, 95%, 0.5), url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y center top left / 5% hsl(0, 14%, 95%, 0.5);
}
a{text-decoration: none;color:rgb(153,51,153);}
a:visited{color: hsl(300, 13%, 51%);}
a:hover{background-color: #fff;}
a:focus{background-color: #fff;}
a:active{color:#ff00ff;}
h1{font: bold 1.5em Georgia, serif;text-shadow: 0.1em 0.1em 0.2em gray;color: rgb(153,51,153);}
h2{font-size: 1em;text-transform: uppercase;letter-spacing: 0.5em;text-align:…
Front End Text, Font, and Color Details
Colors:
· App Background: #222233 (This can be set in the ContextPage tag at the top)
· Background color for the options container: #444455
· Background color for the “Receipt” header row: #555566
· Background color for the “Total” row: #555566
· Background color for the receipt body: #444455
· Text color for the Total Amount on Receipt screen: #FFAAAA
· App Title Color (“Lenny’s Car Wash): CadetBlue
· Button Background Color: #779977
· Button Text Color: White
· Error Message Text Color: #FF7777
Font Sizes:
· “Lenny’s Car Wash” title: 50
· Header Text for Selection Screen: 25
· “Receipt” text for Receipt Screen: 25
· Body of Receipt: 20
· Total Amount Text: 22
· Error Message Text: 20
Attributes for Specific Text:
2. Lenny’s Car Wash Title: Bold, Italics
3. Buttons: Bold
Chapter 2 Solutions
New Perspectives on HTML and CSS
Ch. 2.1 - Prob. 1QCCh. 2.1 - Prob. 2QCCh. 2.1 - Prob. 3QCCh. 2.1 - Prob. 4QCCh. 2.1 - Prob. 5QCCh. 2.1 - Prob. 6QCCh. 2.1 - Prob. 7QCCh. 2.1 - Prob. 8QCCh. 2.2 - Prob. 1QCCh. 2.2 - Prob. 2QC
Ch. 2.2 - Prob. 3QCCh. 2.2 - Prob. 4QCCh. 2.2 - Prob. 5QCCh. 2.2 - Prob. 6QCCh. 2.2 - Prob. 7QCCh. 2.2 - Prob. 8QCCh. 2.3 - Prob. 1QCCh. 2.3 - Prob. 2QCCh. 2.3 - Prob. 3QCCh. 2.3 - Prob. 4QCCh. 2.3 - Prob. 5QCCh. 2.3 - Describe the item selected by the following...Ch. 2.3 - Prob. 7QCCh. 2.3 - Prob. 8QCCh. 2.3 - Prob. 9QCCh. 2 - Prob. 1RACh. 2 - Prob. 2RACh. 2 - Prob. 3RACh. 2 - Prob. 4RACh. 2 - Prob. 5RACh. 2 - Prob. 6RACh. 2 - Prob. 7RACh. 2 - Prob. 8RACh. 2 - Prob. 9RACh. 2 - Prob. 10RACh. 2 - Prob. 11RACh. 2 - Prob. 12RACh. 2 - Prob. 13RACh. 2 - Prob. 14RACh. 2 - Prob. 15RACh. 2 - Prob. 16RACh. 2 - Prob. 17RACh. 2 - Prob. 18RACh. 2 - Prob. 19RACh. 2 - Prob. 20RACh. 2 - Prob. 1CP1Ch. 2 - Prob. 2CP1Ch. 2 - Prob. 3CP1Ch. 2 - Prob. 4CP1Ch. 2 - Prob. 5CP1Ch. 2 - Prob. 6CP1Ch. 2 - Prob. 7CP1Ch. 2 - Prob. 8CP1Ch. 2 - Prob. 9CP1Ch. 2 - Prob. 10CP1Ch. 2 - Prob. 11CP1Ch. 2 - Prob. 12CP1Ch. 2 - Prob. 13CP1Ch. 2 - Prob. 14CP1Ch. 2 - Prob. 15CP1Ch. 2 - Prob. 16CP1Ch. 2 - Prob. 17CP1Ch. 2 - Prob. 18CP1Ch. 2 - Prob. 19CP1Ch. 2 - Prob. 1CP2Ch. 2 - Prob. 2CP2Ch. 2 - Prob. 3CP2Ch. 2 - Prob. 4CP2Ch. 2 - Prob. 5CP2Ch. 2 - Prob. 6CP2Ch. 2 - Prob. 7CP2Ch. 2 - Prob. 8CP2Ch. 2 - Prob. 9CP2Ch. 2 - Prob. 10CP2Ch. 2 - Prob. 11CP2Ch. 2 - Prob. 12CP2Ch. 2 - Prob. 13CP2Ch. 2 - Prob. 14CP2Ch. 2 - Prob. 15CP2Ch. 2 - Prob. 16CP2Ch. 2 - Prob. 17CP2Ch. 2 - Prob. 18CP2Ch. 2 - Prob. 19CP2Ch. 2 - Prob. 20CP2Ch. 2 - Prob. 21CP2Ch. 2 - Prob. 1CP3Ch. 2 - Prob. 2CP3Ch. 2 - Prob. 3CP3Ch. 2 - Prob. 4CP3Ch. 2 - Prob. 5CP3Ch. 2 - Prob. 6CP3Ch. 2 - Prob. 7CP3Ch. 2 - Prob. 8CP3Ch. 2 - Prob. 9CP3Ch. 2 - Prob. 10CP3Ch. 2 - Prob. 11CP3Ch. 2 - Prob. 12CP3Ch. 2 - Prob. 13CP3Ch. 2 - Prob. 14CP3Ch. 2 - Prob. 15CP3Ch. 2 - Prob. 16CP3Ch. 2 - Prob. 17CP3Ch. 2 - Prob. 18CP3Ch. 2 - Prob. 19CP3Ch. 2 - Prob. 20CP3Ch. 2 - Prob. 21CP3Ch. 2 - Prob. 22CP3Ch. 2 - Prob. 23CP3Ch. 2 - Prob. 24CP3Ch. 2 - Prob. 25CP3Ch. 2 - Prob. 26CP3Ch. 2 - Prob. 27CP3Ch. 2 - Prob. 28CP3Ch. 2 - Prob. 29CP3Ch. 2 - Prob. 30CP3Ch. 2 - Prob. 1CP4Ch. 2 - Prob. 2CP4Ch. 2 - Prob. 3CP4Ch. 2 - Prob. 4CP4Ch. 2 - Prob. 5CP4
Knowledge Booster
Similar questions
- You add a style to the start tag for an element, such as a heading or paragraph, using the style attributearrow_forwardLook at the code given in table1, Write style rules for displaying the flexboxitems in the order shown in Figure 1. Where thewidth and height of each flexbox item is 50px and40px respectively. Each item has a 1px solid black color border and for the background color, the valueof the color is #4682B4,arrow_forwardbody {font-family: Georgia, serif;font-size: 100%;line-height: 175%;margin: 0 15% 0;background-color:rgb(210,220,157);}header {margin-top: 0;padding: 3em 1em 2em 1em;text-align: center;border-radius:4px;background-color:hsl(0, 14%, 95%);opacity:0.5;}a {text-decoration: none;color:rgb(153,51,153);}a:visited{color: hsl(300, 13%, 51%);}a:hover{background-color: #fff;}a:focus{background-color: #fff;}a:active{color:#ff00ff;}h1 {font: bold 1.5em Georgia, serif;text-shadow: 0.1em 0.1em 0.2em gray;color: rgb(153,51,153);}h2 {font-size: 1em;text-transform: uppercase;letter-spacing: 0.5em;text-align: center;color:rgb(204,102,0);}dt {font-weight: bold;}strong {font-style: italic;}ul {list-style-type: none;margin: 0;padding: 0;}#info p {font-style: italic;}.price {font-family: Georgia, serif;font-style: italic;}p.warning,sup {font-size: small;}.label {font-weight: bold;font-variant: small-caps;font-style: normal;}h2 + p {text-align: center;font-style: italic;}arrow_forward
- Tablet Element Styles The page body has four children: the header, the footer, the article element, and the aside element. The article and aside elements will share a row with more space given to the article element. Set the growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same values for the aside element to 1, 2, and 200 pixels.arrow_forwardConsider the following HTML code to answer the question below 1. 2. .. ...... 3. 4. 5. ... ...... 6. .. ...... 7. 8. 9. 10. 11. .. ...... 12. .. ...... 13. ... ...... 14. 15. .. 16. Using the selector div p {}, the style will be applied on which lines Select one: a. line 2 only b. lines: 2, 6, 11 c. lines: 2, and 6 d. line: 2, 6, 11, 13arrow_forwarddesign a basic patient registrtion form. This form should utilize all of the major form elements we've covered including text boxes, check boxes, radio buttons, select lists, and text areas. At least one of each of these should be utilized on the form and feel free to use others. It also should include sections to input: Patient Information - Name, Address, Phone numbers, Alergies Family Histroy - Space for at least three relatives, how they are related, and at lease two medical conditions per person Prescription History - Name of medication, dosage, how frequently it is taken, etc. Medical History - Space to enter previous medical conditions including when the condition first appeared, and whether it is an ongoing problem This form should then submit to a php page that will process the information and display it formatted as a 'medical chart'. Information about the patient should be placed at the top with some sort of separator to segment it from the rest of the information. Note: You…arrow_forward
- create the form below using css and html onlyarrow_forwardANDROID STUDIO Create a mobile app that can change the size and color of the text "HELLO WORLD!" USE the following: Activity Binding Styles Use only TextView and SeekBar Don't use the drag and drop for designing Kindly provide the code screenshots and output. Thank you very mucharrow_forwardAdd an id attributes for each product and make the id property of both of the buttons the id of the product. Existing code: <!DOCTYPE html><html><head> <div class="card"><img src="img/clorox.jpg"><h1>Clorox</h1><p class="price">$20.00</p><p>Household Cleaner</p><p><button>Add to Cart</button></p><p><button>Remove from Cart</button></p></div> <div class="card"><img src="img/oxiclean.jpg"><h1>Oxiclean</h1><p class="price">$8.00</p><p>Household Cleaner</p><p><button>Add to Cart</button></p><p><button>Remove from Cart</button></p></div> <div class="card"><img src="img/pinesol.jpg"><h1>PineSol</h1><p class="price">$11.00</p><p>Household Cleaner</p><p><button>Add to…arrow_forward
- Flex Layout Styles You’ll layout the golf course pages using a flex layout. Go to the Flex Layout Styles section and create a style rule for the page body that displays the body as a flexbox oriented in the row direction with wrapping. As always, include the -webkit browser extension in all of your flex styles. Navigation List Two of the child elements of the page body are a navigation list with the ID #hole_list and an article element containing information about the current hole. Add a style rule that sets the flex growth, shrink, and basis size values of the hole_list navigation list to 1, 3, and 140 pixels. Article Styles Add a style rule that sets the flex growth, shrink, and basis size values of the article element to 3, 1, and 341 pixels. The article element contains statistics and a summary about the current hole. Michael also wants this element to be treated as a flexbox. Add to the style rule for the article element styles that display the element as a flexbox oriented in the…arrow_forward<style>body {font-family: Georgia, serif;font-size: 100%;line-height: 175%; margin: 0 15% 0;}header {margin-top: 0;padding: 3em 1em 2em 1em;text-align: center;} a {text-decoration: none;} h1 {font: bold 1.5em Georgia, serif;text-shadow: .1em .1em .2em gray;}h2 {font-size: 1em;text-transform: uppercase;letter-spacing: .5em;text-align: center;}dt {font-weight: bold;}strong {font-style: italic;}ul {list-style-type: none;margin: 0;padding: 0;}#info p {font-style: italic;}.price {font-family: Georgia, serif;font-style: italic;}p.warning, sup {font-size: small;}.label {font-weight: bold;font-variant: small-caps;font-style: normal;} h2 + p {text-align: center;font-style: italic;} </style> <!DOCTYPE html><html><head><link rel="stylesheet" href="main-styles.css"><title>About me</title></head><body> <header><h1>Black Goose Bistro • Summer Menu</h1> <div id="info"><p>Baker's Corner, Seekonk,…arrow_forwardStep 20: Mobile Styles When the user views the page on a mobile device, we don't want the label elements to appear to the left of the input elements because that takes up too much horizontal space. We need to adjust our layout to be more vertical. Create a media query for screens with a maximum width of 767 pixels. Inside the media query, add a rule for any label elements inside the form element with the id registration that removes the float, sets the width to 100%, and aligns the text to the left. Add a rule inside the media query for any input element inside the form element with the id registration that removes the float and sets the width to 100%. Because we set specific widths for the input elements that appear on a single row, we need to override those settings in the mobile view. Add a rule inside the media query for the input elements with the ids city, state, and zip inside the form element with the id registration that sets the maximum width to 100%. Add a rule…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
COMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE LNp Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
Programming with Microsoft Visual Basic 2017Computer ScienceISBN:9781337102124Author:Diane ZakPublisher:Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:9781337102124
Author:Diane Zak
Publisher:Cengage Learning