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 4, Problem 12CP2
Program Plan Intro
To save the changes to the stylesheet 'sf_effects.css', then open 'sf_torte.html' in the web browser. Verify that the design of the web page matches the given image and, hovering the mouse pointer over the navigation tabs will change the background color to match the page color.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
How to create a product table page:
To create the product list page, you can copy the index.html file you worked on in exercise 7 to the products folder. Then, you can delete the content from the main section and modify the URLs on the page as necessary.
• Modify the horizontal navigation menu so it indicates that the product list page is the current page.
• Add a table to the section with a caption, a header, and a body as shown above. Be sure to merge the rows in the first column for each category so the category name is displayed only in the first row.
Create a new style sheet named summary.css for the product list page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the products/index.html file so it points to the correct style sheet.
• Align the caption, headings, and data, and apply any other required formatting as shown above. Use a structural pseudo-class selector to apply a background color of…
Step 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…
Open index.html in your browser to view the file.
Add the text, CH 5 Extend Your Knowledge, to the title element.
Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules:
Add a declaration for the position property with a value of -webkit-sticky.
Add a declaration for the position property with a value of sticky.
Add a declaration for the top property and specify a 0 value.
Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position.
In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations:
Add a declaration for the position property with a value of relative.
Add another declaration for the top property and specify a value of 90px.
Add another declaration for the left property…
Chapter 4 Solutions
New Perspectives on HTML and CSS
Ch. 4.1 - Prob. 1QCCh. 4.1 - Prob. 2QCCh. 4.1 - Prob. 3QCCh. 4.1 - Prob. 4QCCh. 4.1 - Prob. 5QCCh. 4.1 - Prob. 6QCCh. 4.1 - Prob. 7QCCh. 4.1 - Prob. 8QCCh. 4.1 - Prob. 9QCCh. 4.2 - Prob. 1QC
Ch. 4.2 - Prob. 2QCCh. 4.2 - Prob. 3QCCh. 4.2 - Prob. 4QCCh. 4.2 - Prob. 5QCCh. 4.2 - Prob. 6QCCh. 4.2 - Prob. 7QCCh. 4.2 - Prob. 8QCCh. 4.2 - Prob. 9QCCh. 4.3 - Prob. 1QCCh. 4.3 - Prob. 2QCCh. 4.3 - Prob. 3QCCh. 4.3 - Prob. 4QCCh. 4.3 - Prob. 5QCCh. 4.3 - Prob. 6QCCh. 4.3 - Prob. 7QCCh. 4.3 - Prob. 8QCCh. 4.3 - Prob. 9QCCh. 4 - Prob. 1RACh. 4 - Prob. 2RACh. 4 - Prob. 3RACh. 4 - Prob. 4RACh. 4 - Prob. 5RACh. 4 - Prob. 6RACh. 4 - Prob. 7RACh. 4 - Prob. 8RACh. 4 - Prob. 9RACh. 4 - Prob. 10RACh. 4 - Prob. 11RACh. 4 - Prob. 12RACh. 4 - Prob. 13RACh. 4 - Prob. 14RACh. 4 - Prob. 15RACh. 4 - Prob. 16RACh. 4 - Prob. 17RACh. 4 - Prob. 18RACh. 4 - Prob. 19RACh. 4 - Prob. 20RACh. 4 - Prob. 21RACh. 4 - Prob. 22RACh. 4 - Prob. 23RACh. 4 - Prob. 24RACh. 4 - Prob. 25RACh. 4 - Prob. 1CP1Ch. 4 - Prob. 2CP1Ch. 4 - Prob. 3CP1Ch. 4 - Prob. 4CP1Ch. 4 - Prob. 5CP1Ch. 4 - Prob. 6CP1Ch. 4 - Prob. 7CP1Ch. 4 - Prob. 8CP1Ch. 4 - Prob. 9CP1Ch. 4 - Prob. 10CP1Ch. 4 - Prob. 11CP1Ch. 4 - Prob. 1CP2Ch. 4 - Prob. 2CP2Ch. 4 - Prob. 3CP2Ch. 4 - Prob. 4CP2Ch. 4 - Prob. 5CP2Ch. 4 - Prob. 6CP2Ch. 4 - Prob. 7CP2Ch. 4 - Prob. 8CP2Ch. 4 - Prob. 9CP2Ch. 4 - Prob. 10CP2Ch. 4 - Prob. 11CP2Ch. 4 - Prob. 12CP2Ch. 4 - Prob. 1CP3Ch. 4 - Prob. 2CP3Ch. 4 - Prob. 3CP3Ch. 4 - Prob. 4CP3Ch. 4 - Prob. 5CP3Ch. 4 - Prob. 6CP3Ch. 4 - Prob. 7CP3Ch. 4 - Prob. 8CP3Ch. 4 - Prob. 9CP3Ch. 4 - Prob. 10CP3Ch. 4 - Prob. 11CP3Ch. 4 - Prob. 12CP3Ch. 4 - Prob. 13CP3Ch. 4 - Prob. 1CP4Ch. 4 - Prob. 2CP4Ch. 4 - Prob. 3CP4Ch. 4 - Prob. 4CP4Ch. 4 - Prob. 5CP4Ch. 4 - Prob. 6CP4
Knowledge Booster
Similar questions
- Write the JS/JQuery code to accompany the following HTML code, so that when theDelete button is clicked, any button whose text value is divisible by the numberwritten in the text field is removed from the page. You may assume that a validnumber has been typed in the text field. These screenshots show the initial page andits new appearance after typing 2 into the text field and pressing Deletearrow_forwardThe table displays the five countries that earned the most medals in the 2022 Winter Olympics in Beijing. Hovering the mouse over the text on the expected webpage's top row makes the text orange. Add a new rule using the tr:nth-child(even) selector that makes every even tr child element have a lavender background color. Add a new rule using the th:hover selector that changes the th element's text color to orange when the mouse hovers over the element. <table> <caption>2022 Olympic Medal Counts</caption> <tr> <th>Country</th> <th>Gold</th> <th>Silver</th> <th>Bronze</th> <th>Total</th> </tr> <tr> <td>Norway</td> <td>16</td> <td>8</td> <td>13</td> <td>37</td> </tr> <tr> <td>ROC</td> <td>6</td>…arrow_forwardHow to do this exercise? Halloween 15 Add a transition and an animation In this exercise, you’ll add a transition and an animation to the product page that you created in exercise 11. When you’re done, the page should look similar to this: Specifications • Add a transition for the widths of the images in the right sidebar of the cat.html file in the products folder that will last for three seconds and use the linear speed curve. The transition should increase the width of an image to 125 pixels when the mouse hovers over an image. Be sure to provide for all browsers. • Add an animation for the image in the section that will cause the image to move up and down when the page is loaded. The animation should last for half a second, use the ease-in-out speed curve, repeat six times, and alternate directions on each repetitionarrow_forward
- QUESTION: Navigation Lists Next, you’ll format the appearance of navigation lists on the page. Go to the Navigation Styles section and create a style rule for the nav a selector that displays the hypertext links using the font stack: Trebuchet MS, Helvetica, sans-serif. Set the top and bottom padding to 10 pixels. For every unvisited and previously visited hypertext link within a nav element, set the text color to white, remove underlining from the link text, and set the background color to the semi-transparent value hsla(0, 0%, 42%, 0.4). For every active or hovered link in a nav element, set the text color to the semi-transparent value hsla(0, 0%, 100%, 0.7) and set the background color to the semi-transparent value hsla(0, 0%, 42%, 0.7). CODE BELOW: @charset "UTF-8"; @font-face { font-family: Champagne; src: url("cac_champagne.woff") format("woff"), url("cac_champagne.ttf") format("truetype"); } @font-face { font-family: Grunge; src: url("1942.woff")…arrow_forwardAssume you have “gif” image. Write an HTML element that displays the image within a width of 110 and a height of 100. If the image cannot be displayed, an alternative message “logo SEU unavailable” will be shown. Modify the previous HTML document to transform the logo to a hyperlink. Clicking the image will take the user to the SEU website. Notes: You must copy and paste the “HTML script” as your answer for this question. DON’T take screen shot for your HTML script. It must be editable script. Take a screen shot and paste it as a part of your answer.arrow_forwardTo disable the built-in validation tools provided by your users’ browsers when they interact with your “Get a Quote” web form, you can apply the statementdocument.forms.quoteReqForm.noValidate = true;in your JavaScript file; add the attributenovalidateto the<form>tag in your HTML file; or add the attributeformnovalidateto the tag for the form’s submit button in your HTML file. Select one: True Falsearrow_forward
- Disabling the Button and Adding an Input Element in the template.html File inthe src/app Folder.arrow_forwardDisplay the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements".arrow_forwardPlease don't copyarrow_forward
- Create a products.html page and add five product images to the page. Create a Product class for each of the product images with the following attributes: Price, Name, Description and Id. Under each product image add an "add to cart" button and a "remove from cart button". Make the id property of the button the id for the product.arrow_forwardNote: The remaining buttons and paragraphs do not have id attributes. You will need to construct selectors to meet these challenges. For the following I need the Javascript code not the HTML code. In the "myPage" section, select the third button and assign a "click" listener. When clicked, it should change the text content of the third paragraph in the "myPage" section to "Third button clicked." ///////// // HINT: You should look at the HTML carefully to // make your selectors. In the "myPage" section, select the fourth button and assign a "click" listener. When clicked, it should add a class named "fourthPara" to the fourth paragraph in the "myPage" section. In the "myPage" section, select the fifth button and assign a "click" listener. When clicked, it should toggle the class named "fourthPara" for the fifth paragraph in the "myPage" section. In the "myPage" section, select the sixth button and assign a "click" listener. When clicked, it should change the text content of the sixth…arrow_forwardCreate a table as shown at the below in an HTML document. Write an internal style sheet for the following requirements. Insert all the data into the table. Set the caption according. Set the border for the table and collapse the borders as well. Apply a font family for text in the table. Use the table as a selector and specify sans-serif as the font. Add a style for the caption that changes the font size to 24pt, adds some bottom padding to move it away from the table border.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
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage