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.1, Problem 6QC
Program Plan Intro
To write a CSS style rule in order to display the footer element after all floated elements have cleared.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solutionStudents have asked these similar questions
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;
}…
Format 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.
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_forwardI 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:…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_forward
- Create a style rule for the #fig1 through #fig6 elements which are hovered, that rotates the elements to 0 degrees using the transform property, and applies a 2-second transition to all properties of those figures.arrow_forward4. Code a style rule for the main element that puts padding around its contents. Then, code a style rule for the footer that puts a blue border above it. Note that this border doesn’t touch the border for the body. 5. Code style rules for the h1, h2, and h3 elements. The h1 font should be 150% of the default specified in the body, the h2 font should be 125% of the default font, and the h3 font should be 115% of the default font. The h1 font should also be blue. Then, apply appropriate margins or padding to the h1, h2, and h3 elements so the spacing before and after the headings is similar to what’s shown above.6. Code the style rules for the <p>, blockquote, ul, and li elements so the spacing before and after the elements is similar to what’s shown above.7. Code a style rule for the cite element that changes its color to blue and removes the italics from the text.8. Code a style rule for the paragraphs that contain cite elements. This style rule should right align the paragraphs…arrow_forwardcreate another div element with a width and height of 600 px. create a radial gradient with three colors. Start in the bottom left corner with the colors changing as they move along the gradient line to the right.arrow_forward
- Next, set the display of the section element with class ID of tips as a flexbox. Have the content of the flexbox flow in the row direction with row wrapping enabled.arrow_forward1. Create a div element with a width and height of 500 px. Create a diagonal linear gradient using colors of the rainbow- Red, Orange, Yellow, Green, Blue, Indigo, Violet. 2. Also create another div element with a width and height of 600 px. create a radial gradient with three colors. Start in the bottom left corner with the colors changing as they move along the gradient line to the right.arrow_forwardRevise the following img element to attach it to the mapsites image map: <img src=”logo.png” alt=”” />arrow_forward
- Go to the Blockquote Styles section. Amy has included three sample reviews from users of the Save your Fork website. Amy wants the text of these reviews to appear within the image of a speech bubble. For every blockquote element, create a style rule that does the following: a) sets the background image to the sf_speech.png with no repeat and a horizontal and vertical size of 100% to cover the entire block quote (Hint: use property background-size: 100% 100%; ) b) uses the drop-shadow filter to add a drop shadow around the speech bubble with horizontal and vertical offsets of 5 pixels, a blur of 10 pixels and the color rgb(51, 51, 51) (Hint: use property filter: drop-shadow(5px 5px 10px rgb(51, 51, 51));)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_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
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
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning