Question

Create a style rule for the blockquote element that sets the color property to the value...

Create a style rule for the blockquote element that sets the color property to the value hsl(30, 85%, 45%) and sets the font-size property to 1.5em. Also, create a style for the first letter of the blockquote element that sets the font-size property to 1.5em.

This is what I have currently:

/*

New Perspectives on HTML5 and CSS3, 8th Edition

Tutorial 2

Coding Challenge 1

Author: Elizabeth Iniguez

Date: 10/01/2020

Filename: code2-1.css

*/

h1{font-size: 3.5em; line-height: 0em}

h1, h2{font-family: Helvetica, Arial, Helvetica, sans-serif, sans-serif; letter-spacing: 0.1em}

blockquote{color: hsl(30, 85%, 45%);font-size: 1.5em;}

blockquote: :first-letter{font-size: 1.5em;}

footer{text-align: center; font-size: 2em; color: white; background-color: hsl(30, 85%, 45%); }

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Ans)

HTML code



<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Literary Excerpts</title>
   <link rel="stylesheet" type="text/css" href="code2-1_txt.css">
</head>
<body>
   <h1>Literary Excerpts</h1>
   <h2>A Selection of Great Prose </h2><br>
   <div class="blockquote">
       <p>
           <span class="start-letter">W</span>e are the music makers,And we are the dreamers of dreams. Wandering by lone sea-breakers.And sitting by desolate streams. World-losers and world-forsakers, Upon whom the pale moon
           gleams; Yet we are movers and shakers, Of the world forever, it seems.<br>
           <span class="quote-writer">&#8212; Arthur O'shaughnessy, Poems of Arthur O'shaughnessy</span><br><br>

           <span class="start-letter">I</span> took a deep breath and listened to the old brag of my heart.I am, I am, I am.<br>
           <span class="quote-writer">&#8212; Sylvia Plath, The Bell Jar</span><br><br>

           <span>T</span>he most beautiful things in the world cannot be seen or touched , they are felt with the heart.<br>
           <span class="quote-writer">&#8212; Antoine de Saint-Exupéry, The Little Prince</span><br><br>

           <span class="start-letter">S</span>tuff your eyes with wonder, he said , live as if you'd drop dead in ten seconds.See the world. It's more fantastic than any dream made or paid for in factories.<br>
           <span class="quote-writer">&#8212; Ray Bradbury, Fahrenheit 451</span>
       </p>
   </div>
   <footer>The Word Factory</footer>   
</body>
</html>

code2-1_txt.css

*{
   padding: 0;
   margin: 0;
}
h1{
   font-size: 3.5em;
   height: 0em;
   font-family: Helvetica,Arial, sans-serif;
   letter-spacing: 0.1em;
   margin-top: 5px;
   margin-left: 0px;
}
h2{
   font-family: Helvetica,Arial, sans-serif;
   letter-spacing: 0.1em;
   margin-top: 70px;
   margin-left: 0px;
  
}
.blockquote{
   color: hsl(30,85%,45%);
   font-size: 1.5em;
   margin-left: 45px;  
}
p{
   font-family: "Times New Roman", Times, serif;
}
footer{
   text-align: center;
   font-size: 2em;
   color: white;
   background-color: hsl(30,85%,45%);
   margin-left: 0px;
   font-family: "Times New Roman", Times, serif;
   position: absolute;
   width: 99%;
   bottom: 7px;
   margin-right: 1px;  
}
.start-letter{
   font-size: 1.5em;
}
.quote-writer{
   font-style: italic;
}

Above execute the browser and get output in below screen shot here

if any doubts in above below code screen shot

Check once

if your satisfy above answer please give positive rating or like ?

please don't dislike

Thank you!

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Open the debug3-4.css file. The body element should have a width that is 90% of the...
Open the debug3-4.css file. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the web page. The style rule for the body element sets up a grid layout for the page. However, there are several errors in defining the grid areas, grid columns, and...
What I need to do :) Go to the code_scroll.css file and create a style rule...
What I need to do :) Go to the code_scroll.css file and create a style rule for the section element with the id container with the following styles: 1. Set the width of the element to 900 pixels and the height to 370 pixels. 2. Horizontally center the element by adding a 10 pixel top/bottom margin and set the left/right margin to auto. 3. Place the element with relative positioning, setting the top value to 30 pixels and the left...
I have trouble in my code with - Create and append the fancySheet link element to...
I have trouble in my code with - Create and append the fancySheet link element to the document head - Create and append figBox element to element with id box - Populate the figure box with preview images of the five fancy style sheets I don't understand what went wrong. New Perspectives HMTL5, CSS3, and JavaScript T12 Case Problem 1: New Accents Photography JavaScript File Event Listener Go to the na_styler.js file in your editor. Add an event listener that...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today I built my fourth website using HTML5 and CSS3. This time I wanted to try using CSS float layout options on a website dedicated to my favorite topic: robotics. I wanted my website to look like what is shown in Figure 1 (see below). However, after giving it my best effort, things once again didn’t turn out the way I wanted (see the code...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error in the JavaScript file? Find error message in console in a browser’s developer tool. Fix that error and reload the web page in browser. What is the change in the content displayed in the web page after fix the syntax error in the JavaScript code? Replace the line#18 statement (el.textContent = '$' + total;) in the JavaScript code with    el.textContent = '$' + total.toFixed(3);...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */    #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ }    header h1 { text-align: center; }    nav { text-align: center; background: rgb(175, 196, 206); }    address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...
Hello! I'm getting this assignment wrong according to the cengage software. The code looks right to...
Hello! I'm getting this assignment wrong according to the cengage software. The code looks right to me but apparently it is not. May someone please take a look at it and let me know what I'm doing wrong. I just can't seem to find the error. I'm attaching the question below and below that I will attach my code. I appreciate any help you could provide. The book is: HTML5, CSS3, and JavaScript, 6th edition, Bundle Thanks QUESTION: General Flex...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT