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 12CP3
Program Plan Intro
To create a style rule in Map Information Style Section to hide the class of elements belonging to MapInfo class.
Expert Solution & Answer
Trending nowThis is a popular solution!
Students have asked these similar questions
I am having an issue I am not sure what error I have with this code when I execute it.
Here are the instructions for the code:
Column Styles
Next, you’ll format the grid columns. Go to the Column Styles section. Create a style rule to float all div elements whose class value starts with “col-” on the left margin. Set the padding around all such elements to 2%. Finally, apply the Border Box Sizing model to the content of those elements.(Note: Remember to use web extensions to provide support for older browsers.)
In the same section, create style rules for div elements with class names .col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, and .col-3-4 to set their widths to 100%, 50%, 33.33%, 66.67%, 25%, and 75% respectively.
Here is my code:
div[class^="col-"]{
float:left;
padding: 2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.col-1-1 {width: 100%;}
div.col-1-2 {width: 50%;}
div.col-1-3 {width: 33.33%;}
div.col-2-3 {width:…
Display 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".
Help me complete this task.
Add the following style rules for the form elements.
Create a style rule for the fieldset and input elements that sets the bottom margin to 2%.
Create a style rule for the fieldset legend that sets the font-size to 1.25em and makes the font bold.
Create a style rule for the label that sets the display to block and sets padding-top to 3%.
Create a style rule for the btn class selector that removes the border, sets the top and bottom margin to zero and the left and right margin to auto, sets the display to a block, sets the padding to 5%, sets the background-color to 003399, sets the font-size to 1.25em, sets the border-radius to 10px, and sets the color to white (fff).
--my css
/* Style for body specifies a background color */
body {
background: linear-gradient(to top right, #fff 0%, #6699ff 100%) no-repeat fixed center;
font-family: Geneva, Arial, sans-serif;
}
/* Style for the container element */
#container {
width: 90%;
margin: 0 auto;
}…
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
- 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_forwardOpen 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_forwardFormat the appearance of the closing quotes by creating a style rule for the aside blockquote::after selector to write a boldfaced open quote after the block quote with the font size once again set to 1.6em from the font stack 'Times New Roman’, Times, serif.arrow_forward
- in the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element. Add a class attribute with the value corner to the image element. Remove the height and width attributes from the image element. <body> <div id="container"> <!-- Use the nav area to add hyperlinks to other pages within the website --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Resources</a></li> <li><a href="#">W3C</a></li> </ul> </nav> <!-- Use the header area for the website name or logo --> <header> <h1>Responsive Design</h1> </header> <!-- Use the main area to add the main content of the webpage --> <main>…arrow_forwardModify the style rule for thebody selector by specifying a background with a linear gradient that uses a direction of to left, first color value of #fe9972, and second color value of #ffe5dc. Remove the declaration for the background color from the style rule.arrow_forwardIn 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 with a value of 30pxarrow_forward
- You add a style to the start tag for an element, such as a heading or paragraph, using the style attributearrow_forwardIn the mobile style rules section, below the style rule for footer a, create a new style rule for images within the social class that sets the display to an inline block and sets the padding to 4%. Not right how I do it. see below:arrow_forwardCreate an interactive sign-up sheet.● Make the sign-up sheet interactive for the user.● Add a selection element to ask the user for their gender. Add the options “Male,” “Female,” and “Prefer not to mention.”● Use onblur and onfocus to add red borders to the input elements when the user leaves without any input, and a green border if a value is typed and the user is done with the input element.● Upon submission of the form, print all the information that the user has provided on a div or p tag at the bottom of the page.● Use fieldset and legend tag to separate the input part from the output part of the form.● Include a reset button to clear users input and also the information displayed at the bottom of the page.● Feel free also to design your own version and add other features.arrow_forward
- Add the following comments to the tablet media query: Tablet Viewport: Show tab-desk class, hide mobile class Tablet Viewport: Style rules for nav area Add the following style rules below the "Show tab-desk class, hide mobile class" comment: Style rule for the tab-desk class selector that sets the display to a block. Style rule for the mobile class selector that sets the display to none.arrow_forwardBelow the main element, add a comment with the text Footer. Below the comment, add a footer element that includes a class attribute with a value to make a fluid jumbotron, center align text, and padding of 5. Nest the following div element within the footer element: <div class="container text-white"> <p>© Copyright 2021. All Rights Reserved.</p> <p><a href="mailto:contact@wildrescues.net" class="text-white">contact@wildrescues.net</a></p> <a href="https://www.facebook.com" target="_blank"><img src="images/facebook-logo.png" alt="white Facebook logo" class="pr-4"></a> <a href="https://twitter.com" target="_blank"><img src="images/twitter-logo.png" alt="white Twitter logo"></a> </div> Need to Add the footer element with the required class selectors. The index.html is: <footer> <!-- Footer --> <footer…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_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