Please help with this HTML CSS

Question

1.00/5 (2 votes)

See more:

Using either an embedded style sheet or inline styles for all formatting.
Use a <div> for each of the 4 verse containers and the outer container.
The title “Yesterday” uses an <h2> tag with a 16pt Arial font that is blue and italicized. Do not use an <i> tag.
The entire song is embedded in a container that is 600 x 280 pixels, has a two pixel solid blue border, and a five pixel padding. The background color is #F0F0F0.
The outer <div>'s first child is the <h2>. The 4 child <div>'s follow, declared in the order listed below.
The yellow section:
has a background color of "yellow"
floats to the left
has a 200 pixel width
has a 10 pixel padding
has a right margin of 10 pixels, with all other margins set to 0
The section with no background color has no CSS styling.
The orange section:
has a background color of "orange"
is positioned at (110px, 200px) with absolute positioning
has a 200 pixel width
has a 10 pixel padding
The orange-red section:
has a background color of "rgb(255, 80, 0)"
has white text
floats to the right
has a 200 pixel width
has a 10 pixel padding
has a right margin of 40 pixels, a top margin of 20 pixels, and all other margins set to 0
Do not use <br> anywhere in your HTML.

What I have tried:

HTML

<title>CSS Practice
    
    
       

#main {

background-color: #f0f0f0;

width: 600px;

height: 280px;

border: blue;

border-width: 2px;
  
           </body>
</html></div></h2></div></h2></div>

Posted 20-Jun-20 6:32am

Member 14868647

Updated 26-Oct-20 12:50pm

Richard MacCutchan

v2

Add a Solution

Comments

Richard MacCutchan 20-Jun-20 12:37pm

What is the question (as if I didn't know)?

Member 14868647 20-Jun-20 12:43pm

I need help making the html code and css for the steps listed above.

Richard MacCutchan 20-Jun-20 13:29pm

See below.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard MacCutchan · Answer 1 · 2020-06-20T07:29:00

Solution 1

CSS Tutorial[^]

Posted 20-Jun-20 7:29am

Richard MacCutchan

Landon Soo Hoo · Answer 2 · 2020-10-11T13:04:00

Solution 2

You seem to be missing some basic steps. Please go and read a CSS and HTML tutorial. Just google it.

Posted 11-Oct-20 13:04pm

Landon Soo Hoo

Comments

Richard Deeming 13-Oct-20 8:35am

What, like the one linked to in solution 1 back in June when this question was asked?

Why did you feel the need to resurrect this question just to repeat the advice from the existing solution?

Member 14975876 · Answer 3 · 2020-10-26T12:51:00

<!DOCTYPE html>
<html>
<head>
<title>CSS Practice</title>

<style>
body {
background-color: linen;
}

h2{
font-family:Arial;
font-style:italic;
color:blue
}
.yellow{
background-color: yellow;
float: left;
width:200px;
padding:10px;
margin-right:10px;
}

.orange{
background-color: orange;
position: absolute;
left:110px;
top:200px;
width:200px;
padding:10px;
margin-right:10px;
}

.orange-red{
background-color: rgb(255, 80, 0);
color:rgb(255, 255, 255);
float: right;
width:200px;
padding:10px;
margin-right:40px;
margin-top:20px;
}
.container{
width:600px;
height:280px;
background-color: #F0F0F0;
padding:5px 5px 5px 5px;
border: solid 2px blue;

}
</style>
</head>
</head>
<body>

<div class="container">
<h2>Yesterday</h2>
<div class="yellow">Yesterday, All those backups seemed a waste of pay. Now my database has gone away. Oh I believe in yesterday.</div>

<div class="noback">Suddenly, There's not half the files there used to be, And there's a milestone hanging over me. The system crashed so suddenly. I pushed something wrong, What it was I could not say.</div>

<div class="orange">Now all my data's gone and I long for yesterday-ay-ay-ay.</div>

<div class="orange-red">Yesterday, The need for back-ups seemed so far away. I knew my data was all here to stay, Now I believe in yesterday.</div>
</div>
</body>
</html>