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 3, Problem 9CP1
Program Plan Intro
To create a style rule for header navigation list to display elements as a block of width 100%.
Expert Solution & Answer
Trending nowThis is a popular solution!
Students have asked these similar questions
You add a style to the start tag for an element, such as a heading or paragraph, using the style attribute
HTML True or False
One can use padding inside a paragraph but not a div to enlarge the total size of the block element. (True or false)?
Assume you do not use a border statement for an internally placed block element inside a div element. You can displace the element from the top of an enclosing div element by either using margin-top in its selector command, but NOT alternatively by employing a padding command inside its enclosing div element css selector. (True or false)?
Paragraphs and header elements can have multiple span tabs , multiple images and multiple text but all are not held in an embedded vertical block structure. (True or false)?
One URL location within a single <a> html element can be accessed by a combination of multiple alternating text elements and images as long as the Link in not terminated by </a> until all the images and text elements have been created. (True or…
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…
Chapter 3 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 3.1 - Prob. 1QCCh. 3.1 - Prob. 2QCCh. 3.1 - Prob. 3QCCh. 3.1 - Prob. 4QCCh. 3.1 - Prob. 5QCCh. 3.1 - Prob. 6QCCh. 3.1 - Prob. 7QCCh. 3.1 - Prob. 8QCCh. 3.1 - Prob. 9QCCh. 3.2 - Prob. 1QC
Ch. 3.2 - Prob. 2QCCh. 3.2 - Prob. 3QCCh. 3.2 - Prob. 4QCCh. 3.2 - Prob. 5QCCh. 3.2 - Prob. 6QCCh. 3.2 - Prob. 7QCCh. 3.2 - Prob. 8QCCh. 3.2 - Prob. 9QCCh. 3.3 - Prob. 1QCCh. 3.3 - Prob. 2QCCh. 3.3 - Prob. 3QCCh. 3.3 - Prob. 4QCCh. 3.3 - Prob. 5QCCh. 3.3 - Prob. 6QCCh. 3.3 - Prob. 7QCCh. 3 - Prob. 1RACh. 3 - Prob. 2RACh. 3 - Prob. 3RACh. 3 - Prob. 4RACh. 3 - Prob. 5RACh. 3 - Prob. 6RACh. 3 - Prob. 7RACh. 3 - Prob. 8RACh. 3 - Prob. 9RACh. 3 - Prob. 10RACh. 3 - Prob. 11RACh. 3 - Prob. 12RACh. 3 - Prob. 13RACh. 3 - Prob. 14RACh. 3 - Prob. 15RACh. 3 - Prob. 16RACh. 3 - Prob. 1CP1Ch. 3 - Prob. 2CP1Ch. 3 - Prob. 3CP1Ch. 3 - Prob. 4CP1Ch. 3 - Prob. 5CP1Ch. 3 - Prob. 6CP1Ch. 3 - Prob. 7CP1Ch. 3 - Prob. 8CP1Ch. 3 - Prob. 9CP1Ch. 3 - Prob. 10CP1Ch. 3 - Prob. 11CP1Ch. 3 - Prob. 12CP1Ch. 3 - Prob. 13CP1Ch. 3 - Prob. 14CP1Ch. 3 - Prob. 15CP1Ch. 3 - Prob. 16CP1Ch. 3 - Prob. 17CP1Ch. 3 - Prob. 18CP1Ch. 3 - Prob. 19CP1Ch. 3 - Prob. 20CP1Ch. 3 - Prob. 1CP2Ch. 3 - Prob. 2CP2Ch. 3 - Prob. 3CP2Ch. 3 - Prob. 4CP2Ch. 3 - Prob. 5CP2Ch. 3 - Prob. 6CP2Ch. 3 - Prob. 7CP2Ch. 3 - Prob. 8CP2Ch. 3 - Prob. 9CP2Ch. 3 - Prob. 10CP2Ch. 3 - Prob. 11CP2Ch. 3 - Prob. 12CP2Ch. 3 - Prob. 13CP2Ch. 3 - Prob. 14CP2Ch. 3 - Prob. 15CP2Ch. 3 - Prob. 16CP2Ch. 3 - Prob. 17CP2Ch. 3 - Prob. 18CP2Ch. 3 - Prob. 19CP2Ch. 3 - Prob. 20CP2Ch. 3 - Prob. 1CP3Ch. 3 - Prob. 2CP3Ch. 3 - Prob. 3CP3Ch. 3 - Prob. 4CP3Ch. 3 - Prob. 5CP3Ch. 3 - Prob. 6CP3Ch. 3 - Prob. 7CP3Ch. 3 - Prob. 8CP3Ch. 3 - Prob. 9CP3Ch. 3 - Prob. 10CP3Ch. 3 - Prob. 11CP3Ch. 3 - Prob. 12CP3Ch. 3 - Prob. 13CP3Ch. 3 - Prob. 14CP3Ch. 3 - Prob. 1CP4Ch. 3 - Prob. 2CP4Ch. 3 - Prob. 3CP4Ch. 3 - Prob. 4CP4Ch. 3 - Prob. 5CP4Ch. 3 - Prob. 6CP4
Knowledge Booster
Similar questions
- Make sure that the heading that starts with “Children’s Lessons” does not float to the right of the image by clearing the float at that element. In the ski.html file, add the following attribute/value pair to the opening tag that marks the Children’s Lessons heading: class="clearfloat"arrow_forwardCreate a style rule for the section element with the id "sub" that displays that element as a grid consisting of three columns of equal width by repeating the column width 1fr three times.arrow_forwardTablet 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_forward
- The 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_forwardFinally, within the form, add a div element containing a submit button displaying the text Begin Building your Order. (Hint: To code a submit button, use the input element and set its type attribute to "submit". You can also add a value attribute and set its value to the text you want to show on the button. Example: <input type="submit" value="This is text shown on the button">)arrow_forwardWhen the user clicks on the show/hide link, a function should be called to toggle between hiding and showing the description paragraph <p id="desc"> element. The paragraph should be displayed if it was hidden and it should be hidden if it was displayed ? Note: to show and hide an html element you should use CSS layout display property.arrow_forward
- Format the appearance of the opening quotes by creating a style rule for the aside blockquote::before selector to write a boldfaced open quote before the block quote with the font size set to 1.6em from the font stack ‘Times New Roman‘, Times, serif.arrow_forwardCSS question Add another div element to the web form containing the following code: Insert an input element to create an option button for the orderType field with the ID delivery. Make the option button checked by default. After the option button, insert a label associated with the delivery control containing the text Delivery. Add an input element to create a second option button for the orderType field with the ID pickup, followed by a label associated with the pickup control containing the text Pickup.arrow_forwardI have this one question that has multiple objectives, I've done the first 3 correctly but I'm stuck on the last points. I've added the code below, and the objetives are listed here: 1d. Correct the style rule for the h1 selector located in the header element to center-align its content. 1e. Correct the style rule for the list item elements within the nav to display the list as an inline-block. 1f. Update the style rule for the main selector that sets the overflow property to auto. 1g. Update the style rule for the footer selector to clear a float on the left. 1h. Remove the underline from all nav links using the text-decoration property. 1i. Create a style rule for anchor elements within the main element that sets the font color value to #47476b, removes the underline, sets a font-weight value of bold, and sets a font style value of italic. Adjust the width value for the cssl, css2, and css3 id selectors so that they appear next to each other horizontally. 1j. In the nav…arrow_forward
- 2. Create a web form that has Full name as text input, Lucky number as text input, and favorite colors as a list of drop-down options. and Two buttons Submit and Reset. When the user makes a selection and hit the submit Button, the information entered and selection should be displayed on the same page below the input controls.arrow_forwardHow 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…arrow_forwardTablet Media Query Next, you’ll define the layout for tablet and desktop devices. Create a media query for screen devices whose width is 481 pixels or greater. Within this media query, display the page body as a flexbox in row orientation with wrapping. Sofia doesn’t want the links paragraph displayed for tablet and desktop devices. Complete the media query for tablet and desktop devices by hiding this paragraph. 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. Tablet Navigation Lists For tablet and desktop devices, the top navigation list should be displayed as a horizontal row with no wrapping. Enter a style rule to display the top navigation list ul as a flexbox…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