הלינקייה: מגזין חודשי למפתחים

רוצה לשמוע על כל האירועים, המדריכים, הקורסים והמאמרים שנכתבו החודש ?
הלינקייה הינו מגזין חופשי בעברית שמשאיר אותך בעניינים.
בלי ספאם. בלי שטויות. פעם בחודש אצלך בתיבה.

CSS Exercise

Examine the following html file:

<html>
  <head>
    <title>The Beatles - Yellow Submarine</title>
  </head>
 
 
  <body>
    <h1 class="artist">the beatles</h1>
    <h2 class="song">yellow submarine</h2>
 
In the town where I was born,
Lived a man who sailed to sea,
And he told us of his life,
In the land of submarines,
 
So we sailed on to the sun,
Till we found the <span class="sea">sea green</span>,
And we lived beneath the waves,
In our <span class="submarine">yellow submarine</span>,
 
We all live in yellow submarine,
yellow submarine, yellow submarine,
We all live in yellow submarine,
yellow submarine, yellow submarine.
 
And our friends are all aboard,
Many more of them live next door,
And the band begins to play.
 
<span class="instruction">(Trumpets play)</span>
 
We all live in yellow submarine,
yellow submarine, yellow submarine,
We all live in yellow submarine,
yellow submarine, yellow submarine.
 
(Full speed ahead, Mr. Barkley, full speed ahead!
Full speed over here, sir!
All together! All together!
Aye, aye, sir, fire!
Captain! Captain!)
 
As we live a life of ease(life of ease)
Every one of us(every one of us) has all we need,(has all we need)
Sky of blue,(sky of blue) and sea green,(sea of green)
In our yellow(In our yellow) submarine.(submarine) ( Haha! )
 
We all live in yellow submarine,
yellow submarine, yellow submarine,
We all live in yellow submarine,
yellow submarine, yellow submarine.
 
<span class="instruction">(fading)</span>
 
<a id="end">We</a> all live in yellow submarine,
yellow submarine, yellow submarine,
We all live in yellow submarine,
yellow submarine, yellow submarine.
 
    <div id="sidebar">
      <a href="#">Bibliography</a>
      <a href="#">Discography</a>
      <a href="#">Contact Us</a>
    </div>
  </body>
</html>

Using the above HTML file, apply a CSS style for each of the following.

  1. Paint the background grey
  2. Add a background image of a submarine
  3. Paint the sidebar yellow
  4. Place the sidebar on the top of the page, left of the lyrics
  5. Have the lyrics fit nicely in the right column
  6. Set a background color for the links in the sidebar
  7. Set a color to the span elements (different color for each class)
  8. Set the artist h1 to be only uppercase
  9. Set the title h2 to be uppercase-first
  10. Set a line spacing between the lines
  11. Set a letter spacing between the letters in each span of type instruction