Chapter $6$ How to use css for page layout

$205$

Exercise $6-1$ Enhance the Town Hall home page

In this exercise, you'll enhance the formatting of the Town Hall home page that you formatted in exercise $5-1.$ You'll also format the Speaker of the Month part of the page that has been added to the HTML$.$ When you're through, the page should look like this:

C$2022.$ San Joaquin Valley Town Hall, Fresno, CA $93755$

Open the HTML and CSS files

Use your text editor to open HTML and CSS files:

Vhtm$1\_$css$\_5$ exercises $\backslash$town$\_$hall$\_1|$c$6\_$index.html

In the HTML file, change the h$1$ element in the aside to an h$2$ element, and change the content of this element as shown above. Other than these changes, the only changes that are necessary are to the CSS$.$

$206$ Section $1$ The essential concepts and skills

Enhance the cSS file so it provides the formatting shown above

$3.$ In the CSS file, enhance the style rule for the body so the width is $800$ pixels. Next, set the width of the section to $525$ pixels and float it to the right, and set the width of the aside to $215$ pixels and float it to the right. Then, use the clear property in the footer to clear the floating. Last, delete the style rule for the h$1$ heading. Now, test this. The columns should be starting to take shape.

$4.$ To make this look better, delete the left and right padding for the main element, set the left and bottom padding for the aside to $20$ pixels, change the right and left padding for the section to $20$ pixels, and set the bottom padding for the section to $20$ pixels. You can also delete the clear property for the main element. Now, test again.

$5.$ To make the CSS easier to read, change the selectors for the main elements so they refer to the section or aside element as appropriate and reorganize these style rules. Be sure to include a style rule for the h$2$ headings in both the section and aside. Then, test again to be sure you have this right.

Add the CSS for the Speaker of the Month

$6.$ Add a style rule for the h$1$ element that sets the font size to $150\%,$ sets the top padding to $\mathrm{.}5$ems and the bottom padding to $\mathrm{.}25$ems, and sets the margins to $0.$

$7.$ Float the image in the article to the right, and set its top, bottom, and left margins so there's adequate space around it$.$ Then, add a $1-$pixel, black border to the image so the white in the image doesn't fade into the background.

$8.$ Make any final adjustments, use the Developer Tools if necessary, and test the page.