Question

Write a short paragraph that describes what this element does.

<img src="singer.jpg" width="200" height="400" alt="Petunia takes the stage in 2018.">

Write the HTML code that will create a list of your five favorite foods in order. Include a title for the list.
Think of a situation in which it would make sense to use radio buttons in an HTML form. Create the elements for that part of the form.
In this unit, you learned about three different ways to add CSS to a web page. Why do you think that external CSS files are the most common?
Write CSS rules that make each level of headings from heading 1 to heading 6 a different color and size.

Answer 1

### Description of the `<img>` Element
The `<img>` element in the provided code is used to display an image on a webpage. It specifies the source of the image file with the `src` attribute, and sets the width and height to control the dimensions of the displayed image. The `alt` attribute provides alternative text for the image, describing what it is in case the image cannot be displayed. In this specific case, the image showcases Petunia taking the stage in 2018.

### HTML Code for a List of Favorite Foods
```html
<h2>My Favorite Foods</h2>
<ol>
<li>Pizza</li>
<li>Sushi</li>
<li>Chocolate</li>
<li>Ice Cream</li>
<li>Pasta</li>
</ol>
```

### Situation for Using Radio Buttons
A suitable situation for using radio buttons in an HTML form could be when a user is selecting their preferred payment method for an online purchase. Each radio button represents a different payment option, ensuring that the user can choose only one. Here’s how those elements can be created:

```html
<form>
<fieldset>
<legend>Select a Payment Method:</legend>
<label>
<input type="radio" name="payment" value="credit_card"> Credit Card
</label><br>
<label>
<input type="radio" name="payment" value="paypal"> PayPal
</label><br>
<label>
<input type="radio" name="payment" value="bank_transfer"> Bank Transfer
</label><br>
</fieldset>
</form>
```

### External CSS Files
External CSS files are the most common way to add styles to a web page because they allow for a separation of content and presentation. This approach improves maintainability, as styles can be changed in a single CSS file to affect multiple HTML pages, leading to better organization and reduced code redundancy. Furthermore, it also enhances page loading times, as browsers can cache external stylesheets, serving them more quickly on subsequent visits.

### CSS Rules for Headings
```css
h1 {
color: red;
font-size: 32px;
}

h2 {
color: blue;
font-size: 28px;
}

h3 {
color: green;
font-size: 24px;
}

h4 {
color: orange;
font-size: 20px;
}

h5 {
color: purple;
font-size: 16px;
}

h6 {
color: brown;
font-size: 12px;
}
```