New Perspectives On Html5, Css3, And Javascript, Loose-leaf Version
6th Edition
ISBN: 9781337685764
Author: Patrick M. Carey
Publisher: Cengage Learning
expand_more
expand_more
format_list_bulleted
Question
Chapter 5, Problem 4CP2
Program Plan Intro
To create a style rule for the page body that displays the body as a flexbox oriented in the row direction with wrappingin the wc_styles.css file.
Expert Solution & Answer
Trending nowThis is a popular solution!
Students have asked these similar questions
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…
You add a style to the start tag for an element, such as a heading or paragraph, using the style attribute
Open index.html in your browser to view the webpage. Maximize the browser window to use a desktop viewport.
Below the gradient style rules comment, create a style rule for the gradient1 class selector and add the following declaration to specify a linear-gradient for the background:
background: linear-gradient(to right, #67afcb, #1a3e4c 25%);
Create a style rule for the gradient2 class selector and add a declaration to specify a linear-gradient to the left, use #d4f7ec and #448d76 for color values, and use 90% as the color stop.
Create a style rule for the gradient3 class selector and add a declaration to specify a linear-gradient to the top left, and use #efddfd and #36065b for color values.
Create a style rule for the gradient4 class selector and add a declaration to specify a linear-gradient that uses the following four color values:
#e6e6ff
#70dbdb
#ffffcc
#cc6699
Create a style rule for the gradient5 class selector and add the following declaration to…
Chapter 5 Solutions
New Perspectives On Html5, Css3, And Javascript, Loose-leaf Version
Ch. 5.2 - Prob. 8QCCh. 5.2 - Prob. 9QCCh. 5.3 - Prob. 8QCCh. 5.3 - Prob. 9QCCh. 5 - Prob. 1RACh. 5 - Prob. 2RACh. 5 - Prob. 3RACh. 5 - Prob. 4RACh. 5 - Prob. 5RACh. 5 - Prob. 6RA
Ch. 5 - Prob. 7RACh. 5 - Prob. 8RACh. 5 - Prob. 9RACh. 5 - Prob. 10RACh. 5 - Prob. 11RACh. 5 - Prob. 12RACh. 5 - Prob. 13RACh. 5 - Prob. 14RACh. 5 - Prob. 15RACh. 5 - Prob. 16RACh. 5 - Prob. 17RACh. 5 - Prob. 18RACh. 5 - Prob. 19RACh. 5 - Prob. 20RACh. 5 - Prob. 21RACh. 5 - Prob. 22RACh. 5 - Prob. 23RACh. 5 - Prob. 24RACh. 5 - Prob. 25RACh. 5 - Prob. 26RACh. 5 - Prob. 1CP1Ch. 5 - Prob. 2CP1Ch. 5 - Prob. 3CP1Ch. 5 - Prob. 4CP1Ch. 5 - Prob. 5CP1Ch. 5 - Prob. 6CP1Ch. 5 - Prob. 7CP1Ch. 5 - Prob. 8CP1Ch. 5 - Prob. 9CP1Ch. 5 - Prob. 10CP1Ch. 5 - Prob. 11CP1Ch. 5 - Prob. 12CP1Ch. 5 - Prob. 13CP1Ch. 5 - Prob. 14CP1Ch. 5 - Prob. 15CP1Ch. 5 - Prob. 16CP1Ch. 5 - Prob. 17CP1Ch. 5 - Prob. 18CP1Ch. 5 - Prob. 19CP1Ch. 5 - Prob. 1CP2Ch. 5 - Prob. 2CP2Ch. 5 - Prob. 3CP2Ch. 5 - Prob. 4CP2Ch. 5 - Prob. 5CP2Ch. 5 - Prob. 6CP2Ch. 5 - Prob. 7CP2Ch. 5 - Prob. 8CP2Ch. 5 - Prob. 9CP2Ch. 5 - Prob. 10CP2Ch. 5 - Prob. 11CP2Ch. 5 - Prob. 12CP2Ch. 5 - Prob. 13CP2Ch. 5 - Prob. 14CP2Ch. 5 - Prob. 15CP2Ch. 5 - Prob. 16CP2Ch. 5 - Prob. 17CP2Ch. 5 - Prob. 18CP2Ch. 5 - Prob. 19CP2Ch. 5 - Prob. 20CP2Ch. 5 - Prob. 21CP2Ch. 5 - Prob. 1CP3Ch. 5 - Prob. 2CP3Ch. 5 - Prob. 3CP3Ch. 5 - Prob. 4CP3Ch. 5 - Prob. 5CP3Ch. 5 - Prob. 6CP3Ch. 5 - Prob. 9CP3Ch. 5 - Prob. 2CP4
Knowledge Booster
Similar questions
- 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…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_forwardFix the style code below for the angular gradient of the division for every browsers. div.angle { width: 200px; height: 200px; border: 3px solid purple; text-align: center; background: -webkit-linear-gradient( linear, left top, right bottom, color-stop(15%, white), color-stop(50%, plum), color-stop(75%, purple)); background: -moz-linear-gradient( top left, white 15%, plum 50%, purple 75%); background: linear-gradient( 90deg, white 15%, plum 50%, purple 75%); }arrow_forward
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