Create a new web page that uses both an internal and external CSS.

Getting Started the set up.

First create a div that contains words: CSCE Fun!

Give that div a class.

Then create another div that contains your first name.

Create a third div element that includes an image of you. Use the height and width attributes within the image tag to set the image to 200px high by 250px wide.

Create another div that contains the words: I got the A!

Create another div that contains todays date.

And create another div element that includes an image of your pet or of Cocky. Use the height and width attributes within the image tag to set the image to 200px high by 250px wide.

Give the last div the same class that you gave the first div.

In an internal style sheet, give the page a background color. (in the style element)

Include the link element in the head above the style element to link to the external CSS document. (This is not the anchor element,)

It makes a difference whether the link element is before or after the style element.

External CSS

Give the body a background color (Give it a different color than you put in the internal style) The one that comes second will override the one that comes first so again it matters whether the style element is before of after the link element.

Setting the style for the div: (Use an external CSS)

(You can use the CSS appendix starting on page 445.)

Set the height to 250px.

Set the width to 300px.

Set the size of the font to 28pt

Set the background color to a color using a hexadecimal value.

Use text-align to center the text within the div.

Rotate all the div elements using the CSS property transform (See page 394). The angle of rotation must be 70 degrees.

Use text-shadow to put a shadow on the text inside the divs. (Pages 192-193 in your textbook) Make the text have a shadow that is not white and is a different color than the background color of your div elements. Use text-shadow with three values and a color. The third value is the blur value; make that value 0. The example in the book uses a hexadecimal value for the color; you select the color and also use a hexadecimal value.

Set the width of the border to 8px. (See the note below.)

Set the border style to double.

Set the border color using a hexadecimal value.

Note: Set the border width, border style, and border color (either use the three styles or the shortcut border that has three property values) (See pages 186 187 and 445-446 in your textbook- fifth edition).

And finally set the style for the pseudo class div:hover as follows:

(Remember that there can be no spaces in div:hover)

Set the background color to a new color using a hexadecimal value.

Set color of the text to a new color using a hexadecimal value.

Rotate all the div elements using the property transform. Set it to -70 (minus 70) degrees.

Use 10px as the border width, dashed as the border style, and teal as the border color using the three styles in the shortcut.

Using the class that you put in the first and last div in a pseudo class with hover to turn those divs upside down when the mouse is over it. Remember that there can be no spaces in classname:hover.

Test this by moving the mouse over the boxes and see if they rotate and if the colors change correctly.