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 12.3, Problem 2QC
Program Plan Intro
To provide the code to add an external style sheet to the end of the document head linked to the file named newstyles.css.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
1. Open the code5-2_flex.css file. 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".
2. Set the growth and shrink rate of the div elements of the card class to 1 and 1. Set the flex basis of those elements to 200 pixels. Display each div element of the card class itself as a flexbox.
Next, apply the following flex layout to the items within the card div elements:
Lay out the items in column order with no wrapping.
Justify the content of the items within the flexbox with space between.
Center each of the items with respect to the cross axis.
Complete this task in conjunction with the previous task: "Style the section element as a flexbox".
Create a basic page with a header, footer, and have it use an external CSS file names styles.css.
Create a main section, with an article inside of it. Create an article header as well,
1a.Provide a style that changes the font size over a 2-second interval and the font color over a 3-second interval.
1b.Provide code to change the background color of a hypertext link from yellow to blue over a 3-second interval in response to the hover event.
Chapter 12 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 12.2 - Prob. 1QCCh. 12.2 - Prob. 2QCCh. 12.2 - Prob. 3QCCh. 12.2 - Prob. 4QCCh. 12.2 - Prob. 5QCCh. 12.2 - Prob. 6QCCh. 12.3 - Prob. 1QCCh. 12.3 - Prob. 2QCCh. 12 - Prob. 1RACh. 12 - Prob. 2RA
Ch. 12 - Prob. 3RACh. 12 - Prob. 4RACh. 12 - Prob. 5RACh. 12 - Prob. 6RACh. 12 - Prob. 7RACh. 12 - Prob. 8RACh. 12 - Prob. 9RACh. 12 - Prob. 10RACh. 12 - Prob. 11RACh. 12 - Prob. 12RACh. 12 - Prob. 13RACh. 12 - Prob. 1CP1Ch. 12 - Prob. 2CP2Ch. 12 - Prob. 3CP2Ch. 12 - Prob. 4CP2Ch. 12 - Prob. 5CP2Ch. 12 - Prob. 4CP3Ch. 12 - Prob. 20CP3Ch. 12 - Prob. 3CP4Ch. 12 - Prob. 4CP4Ch. 12 - Prob. 5CP4Ch. 12 - Prob. 6CP4Ch. 12 - Prob. 7CP4Ch. 12 - Prob. 8CP4Ch. 12 - Prob. 9CP4Ch. 12 - Prob. 10CP4Ch. 12 - Prob. 11CP4Ch. 12 - Prob. 12CP4Ch. 12 - Prob. 13CP4Ch. 12 - Prob. 14CP4
Knowledge Booster
Similar questions
- Edit the CSS file (leave a blank line between selectors): Add a BODY selector with a background color of #c2d4d4. Set an IMG selector with a max width of 98% and a top margin of 0.5em. Set a HEADER selector with a top margin of 0.2em and set the text to align to the center. Set a H1 selector with a bottom margin of 0.5em and set the font to sans-serif. Set a H2 selector with a bottom margin of 0.5em. Set a NAV selector with the font to sans-serif, a font size of 1.1em, set the font weight to bold, and set the text to align to the center. Set the NAV UL with padding of 0, top and bottom margins to 0.5em. Edit the NAV LI selector with a background color of #678197 and set the list items to display without bullets. Make a class called CENTER and set the bottom margin to 0.3em, the left and right margins to auto. Set a class called MOBILE with a display of inline. Set a class of DESKTOP with a display of none. Set a class of TABLET to display of none. Set a class called PHOTOS with a…arrow_forwardDesign a basic wesbite layout for a restaurant with a home page, and about page, a menu page, and a contact page (with a form: form doesn't have to be useable!) PLUS a separate CSS file with style features. Use only HTML and CSS, no other formats.arrow_forwardCreate a link element that loads the myprint.css style sheet file but only for printed output.arrow_forward
- Choose a CSS external style sheet file to validate; perhaps you have created one for your own website. Otherwise, use an external style sheet file that you worked with in this chapter. Use the W3C CSS validator at http://jigsaw.w3.org/css-validator. If your CSS does not immediately pass the validation test, modify it and test again. Repeat this process until the W3C validates your CSS code. Write a one- or two-paragraph summary about the validation process that answers the following questions: Was the CSS validator easy to use? Did anything surprise you? Did you encounter a number of errors or just a few? How easy was it to determine how to correct the CSS file? Would you recommend the validator to other students? Why or why not?arrow_forwardPlease help me with this 1. Make the body of the page have a background of tiled “waves.png” images. This image is in the images folder. 2. Add padding (10px) to the entire body of the page. 3. Add a top and bottom margin (10px) as well as padding (10px) to the each movie description. 4. Change the background of each movie description to white, and the background colour for the box enclosing the page content to the following RGB values: R = 246, G = 212, B = 212. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Movie Recommendations</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1> Movie Recommendations </h1> <h2> Some Science Fiction Movies Worth Watching </h2> </header> <div class="movie"> <h2> Ghost in the Shell <span…arrow_forwardCreate a simple Form with CSS effects : 1) Use the CSS to produce the design shown below. 2) Follow the color and alignment format of the sample output. 3) Once finished, put your source code in the text area. 4) Provide the screenshot of the output and insert them in the text area using the "Embed Image" of the Canvas. 5) Include the Honor Pledge for Graded Assignments "I affirm that I have not given or received any unauthorized help on this assignment and that this work is my own." Sample output : Name Phone Number Email A Password li agree to the Terms and Conditions and Privacy Policy Create Account demo download more info / downloadarrow_forward
- In the styles.css file, add the ul selector to the CSS reset style rule. Remove the declaration for the margin property in the nav ul style rule. Modify the nav li style rule by changing the display value to block and add a top border that specifies a solid border width of 0.5px with the color value #f6eee4.--MY CSS /*CSS Reset*/ body, header, nav, main, footer, img, h1, h3, ul { margin: 0; padding: 0; border: 0; } /*Style rules for body and images*/ body { background-color: #f6eee4; } img { max-width: 100%; display: block; } /* Style rules for mobile viewport */ /* Style rules to show mobile class and hide tab-desk class */ .mobile { display: block; } .tab-desk { display: none; } /* Style rules for header area */ .mobile h1 { padding:2%; text-align:center; font-family:'Emblema One', cursive; } .mobile h3 { padding:2%; text-align:center; font-family:'Lora', serif; } /*Style rules for navigation area*/ nav { background-color: #2a1f14; } nav ul…arrow_forwardOpen the code8-4_debug.css file and study the code that applies the animation effect to the form#payment object and the h1 element. Fix any mistakes in the code that you find and verify that the opening of the page runs the drop-in and slight-right animations.arrow_forward(a) What are the problems with the above code? Consider the syntax, structure, and writing style. (b) Write CSS code that tidies up the above code. Your code should minimize the use of inline style. (c) Add a CSS selector for all paragraphs (p elements) under div elements with class “exam” to make their background colour blue.arrow_forward
- 3. Apply a unique rotate transform to each sticky note below. Use values between -75deg and 75deg . Use the id selectors in formatting.css to apply these styles. 4. When a user hovers over a sticky note, the element should rotate back to an unrotated position. Moreover, the element should scale to 1.25x its original size. It should complete this transition in 500ms o create :hover selectors for each id selector in animations-transitions.css to complete this task fall should move each sticky note 500px down the screen. Stagger the animation-delay so each sticky note falls at a different time. Each sticky note should retain its final position after 5. Next, you need to apply a 500ms animation called fall to each sticky note. the animation completes. 6. Animation Hints: o create a single animation named fall o you will need to change the position property of div.sticky-note o review the offset properties left top right and bottom - one of these will help you! animation-fill-mode:…arrow_forward***I have the files needed for the remainder of the assignment. I just need help setting up the style sheet.*** Create a CSS style sheet including the following steps:arrow_forwardIn the styles.css file, add the ul selector to the CSS reset style rule. Remove the declaration for the margin property in the nav ul style rule. Modify the nav li style rule by changing the display value to block and add a top border that specifies a solid border width of 0.5px with the color value #f6eee4. My CSS nav li { display: block; font-size: 1.5em; font-family: Geneva, Arial, sans-serif; font-weight: bold; border-top: solid 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
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning