Refer to the code snippet below:<head> <style> body { font-family: Arial; color: blue; } p { color: red; } .logo { font-family: Papyrus; color: green; } </style></head><body> <div id="header"> <span class="logo">Web Development</span> </div> <div id="body"> <p>This is the body of my page</p> </div></body>Which styles end up being applied to span and p elements?<span> - color: green, font-family: Papyrus<p> - color: red, font-family: Arial<span> - color: green, font-family: Arial<p> - color: red, font-family: Arial<span> - color: green, font-family: Arial<p> - color: red, font-family: Papyrus<span> - color: blue, font-family: Arial<p> - color: blue, font-family: Arial
Question
Refer to the code snippet below:<head> <style> body { font-family: Arial; color: blue; } p { color: red; } .logo { font-family: Papyrus; color: green; } </style></head><body> <div id="header"> <span class="logo">Web Development</span> </div> <div id="body"> <p>This is the body of my page</p> </div></body>Which styles end up being applied to span and p elements?<span> - color: green, font-family: Papyrus<p> - color: red, font-family: Arial<span> - color: green, font-family: Arial<p> - color: red, font-family: Arial<span> - color: green, font-family: Arial<p> - color: red, font-family: Papyrus<span> - color: blue, font-family: Arial<p> - color: blue, font-family: Arial
Solution
The styles that end up being applied to the span and p elements are:
<span> - color: green, font-family: Papyrus <p> - color: red, font-family: Arial
This is because the span element has the class "logo" which has specific styles defined (color: green, font-family: Papyrus). The p element does not have a specific class, so it inherits the styles from the body (font-family: Arial), but it also has a specific color defined in the p selector (color: red).
Similar Questions
You are creating a web page. In the heading element of the web page is the following code:<link rel=”stylesheet” href=”styles.css”><style> h2 { font-family: “Arial”; } h3 { font-family: “Calibri”; } </style>The code in the styles.css document is the following:h2 { font-family: “Times New Roman”; } .ad { font-family: “Courier-New”; }On the web page you have the following paragraph:<h2 id=”ad”>The best place to eat in town!<h2>What font will be used to display “The best place to eat in town!”?1 pointTimes New RomanArialCourier-NewCalibri
why the preformatted text html code is incorrect is the following code <!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <style> h2 { color:blue; } p { text-align: right; font-size: 32px; } pre { text-align: center; color:gray; font-family: "Comic Sans MS", cursive; } </style> </head> <body> <h2>This level 2 title is blue</h2><hr> <p>This paragraph has a font<br> twice as big as normal,<br> and is aligned right.</p><hr> <pre> This grey preformatted text is styled in the cursive font family. It is also centered and has a tooltip that says: I don't know why anyone would do this! </pre> </body> </html>
Is the following HTML markup valid?<html> <head> </head> <body> <img src="logo.png" /> </body></html>
How could this code be re-written but guarantee the same appearance in the browser?body h1 { color: #BB44FF;}
We want to apply different styles to the 3 different <h1>'s on this page. What selectors should we use?CHOOSE ALL OF THE ANSWERS THAT WILL WORK.<body> <header> <h1>I am a heading</h1> </header> <h1>I am a heading too</h1> <main> <section> <h1>A third heading on the same page</h1> </section> </main></body> body>h1 { ... }header>h1 { ... }section>h1 { ... } header h1 { ... }header+h1 { ... }main h1 { ... } body h1 { ... }header>h1 { ... }section>h1 { ... } body+h1 { ... }header>h1 { ... }section>h1 { ... } body h1 { ... }header>h1 { ... }main>h1 { ... }
Upgrade your grade with Knowee
Get personalized homework help. Review tough concepts in more detail, or go deeper into your topic by exploring other relevant questions.