Basic CSS Exercise
Start by creating the page shown below with HTML. Use the following images (right-click to save), and set them to 150px tall.
Also, use the following text for your page (copy and paste into your HTML document):
An eagle sat on a lofty rock, watching the movements of a Hare whom he sought to make his prey. An archer, who saw the Eagle from a place of concealment, took an accurate aim and wounded him mortally. The Eagle gave one look at the arrow that had entered his heart and saw in that single glance that its feathers had been furnished by himself. "It is a double grief to me," he exclaimed, "that I should perish by an arrow feathered from my own wings."
A dog, used to eating eggs, saw an Oyster and, opening his mouth to its widest extent, swallowed it down with the utmost relish, supposing it to be an egg. Soon afterwards suffering great pain in his stomach, he said, "I deserve all this torment, for my folly in thinking that everything round must be an egg."
The Eagle and the Arrow
We often give our enemies the means for our own destruction.
The Dog and the Oyster
They who act without sufficient thought, will often fall into unsuspected danger.
Look before you leap.
The page should look like this:
Once you're done with that, apply the following styles with an external style sheet:
- The background color of the page is #ffc
- The font of text everywhere is either arial or helvetica, or some other sans-serif font
- The font is 25% smaller than usual
- All headings are centered
- h1 is 3 times bigger than a normal character and is uppercase; it has 0.2em spacing between its letters and is composed of 20% red, 40% green, and 20% blue
- The first letters of every word in h2 are capitalized; the spacing between the letters in h2 is half of what it is for h1, and h2 has the same color as h1
- h2 is not bold
- h4 is color #222 and has the same spacing as h2 between its letters
- The left and right margins of each paragraph are a quarter of the total width of the page and the text is the same color as h4. The space between lines is 1.5em, and the text is justified
- Previously italicized words should now also be bold and be the same color as h1
- The tables are centered (do this with margin-left: auto; margin-right: auto;) and have a background color of #ddd; they are 20em wide
- The bottom margins of the tables are 6em. Text inside the tables is in the center of the cells, and separated from the borders by 5 pixels
- Images are 25% smaller in each dimension
- Lists have the same margins, alignment, and color as paragraphs. Ordered lists have 2.5em spacing between lines, and unordered lists have 1em spacing between lines
- There are 50 pixels of empty space at the top and bottom of the page
The final product should look like this: