New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN: 9781305503922
Author: Patrick M. Carey
Publisher: Cengage Learning
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 HTML5, CSS3, and JavaScript
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_forwardcreate the form below using css and html onlyarrow_forward
- ANDROID 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_forwardFlex 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_forwardTrue or False The CSS property “margin” defines the space outside the element’s border. Inline style placed inside an html element’s tag takes precedence over an external stylesheet Multiple html elements can share and be styled with the same ID. A single external CSS stylesheet can be used to style multiple HTML documents. The <ul> element is used to create an automatically numbered list. Setting a hyperlink’s target attribute to “_blank” opens the referenced URL in a new tab.arrow_forwardCreate an event calendar webpageThe top frame contains the banner title of the webpage.The month frame contains the list of months within a year.The calendar frame will contain the selected month.The event frame will display the different official even for that date or month. i need source code plssarrow_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