Questions: Shape Up! exercises for Murach's HTML and CSS (5th Edition) - Adjust the font sizes for all of the headings so they look as shown above. - Format the links in the section so they're displayed in maroon whether or not they've been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in steelblue. - Format the links in the aside so they're displayed in boldfaced steelblue whether or not they've been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in maroon. - In the header, float the image to the left and indent both headings. In addition, change the color of the first heading to steelblue, italicize it, and add a steelblue shadow. - Format the list to increase the space between the list items. - Reduce the font size for the footer and center it. - Link the main style sheet that you just created to the home page.

Shape Up! exercises for Murach's HTML and CSS (5th Edition)
- Adjust the font sizes for all of the headings so they look as shown above.
- Format the links in the section so they're displayed in maroon whether or not they've been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in steelblue.
- Format the links in the aside so they're displayed in boldfaced steelblue whether or not they've been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in maroon.
- In the header, float the image to the left and indent both headings. In addition, change the color of the first heading to steelblue, italicize it, and add a steelblue shadow.
- Format the list to increase the space between the list items.
- Reduce the font size for the footer and center it.
- Link the main style sheet that you just created to the home page.

Transcript text: Shape Up! exercises for Murach's HTML and CSS ( $5^{\text {th }}$ Edition) - Adjust the font sizes for all of the headings so they look as shown above. - Format the links in the section so they're displayed in maroon whether or not they've been visited If a link has the focus or the mouse is hovering over it, though, it should be displayed in steelblue. - Format the links in the aside so they're displayed in boldfaced steelblue whether or not they've been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in maroon. - In the header, float the image to the left and indent both headings. In addition, change the color of the first heading to steelblue, italicize it, and add a steelblue shadow. - Format the list to increase the space between the list items. - Reduce the font size for the footer and center it. - Link the main style sheet that you just created to the home page.

Solution

To address the tasks outlined for formatting a webpage using CSS, here's a step-by-step guide:

Adjust Font Sizes for Headings:
- Use CSS to set the font sizes for all headings (h1, h2, etc.) to match the desired appearance.
```
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
/* Adjust other headings as needed */
```
Format Links in the Section:
- Ensure links are maroon by default and steelblue on hover or focus.
```
section a {
    color: maroon;
}
section a:hover, section a:focus {
    color: steelblue;
}
```

Format Links in the Aside:

Display links in bold steelblue by default and maroon on hover or focus.

aside a {
    color: steelblue;
    font-weight: bold;
}
aside a:hover, aside a:focus {
    color: maroon;
}

Header Formatting:

Float the image left, indent headings, and style the first heading.

header img {
    float: left;
}
header h1, header h2 {
    margin-left: 20px; /* Adjust as needed */
}
header h1 {
    color: steelblue;
    font-style: italic;
    text-shadow: 2px 2px steelblue;
}

Format List Items:

Increase space between list items.

li {
    margin-bottom: 10px; /* Adjust as needed */
}

Footer Formatting:
- Reduce font size and center the footer text.
```
footer {
    font-size: 0.8em;
    text-align: center;
}
```
Link the Main Style Sheet:
- Ensure the main CSS file is linked in the HTML <head> section.
```
<link rel="stylesheet" href="styles.css">
```