Click here to Skip to main content
15,068,879 members
Please Sign up or sign in to vote.
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
Updated 26-Oct-20 12:50pm
v2
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.

   
You seem to be missing some basic steps. Please go and read a CSS and HTML tutorial. Just google it.
   
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?
<!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>
<!-- Your solution here -->
<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>
   
Comments
Dave Kreskowiak 26-Oct-20 23:00pm
   
Doing homework for someone is not helping them. It's removing the point of doing the assignment themselves.

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900