HTML with CSS Exercise

Description: In this exercise, you will apply the CSS skills that you learned to an existing

HTML document. The resulting page should look something like the screen shot that follows.

$1.$ Open the HTML and CSS files that follow, and note that the CSS file includes one

rule set:

c$05$x$\_$sorkin.html

styles$\backslash$c$05$x$\_$sorkin.css

$2.$ Add a link element to the head section of the HTML file for the normalize.css$/$reset$.$css stylesheet.

$3.$ Code a rule set for the html element that sets the background color to yellow.

ITC $5103$ Summer $2024$

$2$

$4.$ Enhance the rule set for the body so the width is $650$ pixels, and the body has a double

blue border around it like the one above. If you need to make any other changes to the

body, do that too.

$5.$ Apply CSS styling for the footer that puts a blue border above it$.$ Note that this border

doesn$$t touch the border for the body.

$6.$ Apply the CSS styling for the h$1,$ h$2,$ and h$3$ elements. The h$1$ font should be $28$px$,$ the h$2$

font should be $20$px$,$ and the h$3$ font should be $18$px$.$ The h$1$ font should also be blue.

Then, apply appropriate margins or padding to the h$1,$ h$2,$ and h$3$ elements so the spacing

before and after the headings is similar to what$$s shown above.

$7.$ Style the $,$ blockquote, ul$,$ and li elements so the spacing before and after the elements

is similar to what$$s shown above.

$8.$ Code a rule set for the cite element that changes its color to blue and removes the italics

from the text.

$9.$ Apply the CSS styling for the paragraphs. This rule set should right align the paragraphs.

One way to do this is to add a class attribute to these paragraphs and use that class as the

selector for the rule set.

$10.$ Float the image to the left and apply appropriate margins or padding so the text flows to its

right as shown above.

$11.$ Apply CSS rules to the footer or the paragraphs within the footer so the font size is $15$px$,$

the font weight is bold, the paragraphs are centered, and the spacing above and below is

similar to what is shown above.