Question
Create a CSS style sheet named "style.css". In the CSS file, add the following formatting for your index.html web page from the previous lab. You can find a sample screenshot in this module.
Center aligned the tags h1, div, and p (10 pts)
Apply the white background color to the HTML tag (10 pts)
Apply the lightblue background color to the body tag; set its width to 600px; and create a 2px dotted grey border around all elements inside the body. (20 pts)
Apply the Tahoma font and red color to your hometown; change its size to 40px. (10 pts)
Center aligned the tags h1, div, and p (10 pts)
Apply the white background color to the HTML tag (10 pts)
Apply the lightblue background color to the body tag; set its width to 600px; and create a 2px dotted grey border around all elements inside the body. (20 pts)
Apply the Tahoma font and red color to your hometown; change its size to 40px. (10 pts)
Answers
GPT-4o mini
Sure! Below is the CSS code to meet your requirements. Save this code in a file named "style.css".
```css
/* Center align h1, div, and p elements */
h1, div, p {
text-align: center;
}
/* Apply white background color to the HTML tag */
html {
background-color: white;
}
/* Apply light blue background to the body tag */
body {
background-color: lightblue;
width: 600px;
border: 2px dotted grey;
margin: 0 auto; /* Center the body within the viewport */
}
/* Specific styling for the hometown text */
.hometown {
font-family: Tahoma, sans-serif; /* Use Tahoma font */
color: red; /* Apply red color */
font-size: 40px; /* Set font size to 40px */
}
```
### Explanation of the Code:
1. **Center Aligning**: The `text-align: center;` property is applied to the `h1`, `div`, and `p` elements to center-align their text.
2. **White Background on HTML**: The `html` selector sets the background color of the entire HTML document to white.
3. **Light Blue Background for Body**: The `body` selector defines the background color as light blue, sets the width to 600px, and creates a 2px dotted grey border. The `margin: 0 auto;` centers the body in the viewport.
4. **Hometown Text Styling**: The `.hometown` class is utilized for styling your hometown text with the Tahoma font, red color, and a font size of 40px. You'll need to apply the class `hometown` to the text in your HTML that represents your hometown.
### Note:
Make sure to include this stylesheet in your `index.html` file for it to apply. You can link it in the `<head>` section of your HTML document as follows:
```html
<link rel="stylesheet" type="text/css" href="style.css">
```
This will ensure your styles are applied correctly. If you have any questions or need further modifications, feel free to ask!
```css
/* Center align h1, div, and p elements */
h1, div, p {
text-align: center;
}
/* Apply white background color to the HTML tag */
html {
background-color: white;
}
/* Apply light blue background to the body tag */
body {
background-color: lightblue;
width: 600px;
border: 2px dotted grey;
margin: 0 auto; /* Center the body within the viewport */
}
/* Specific styling for the hometown text */
.hometown {
font-family: Tahoma, sans-serif; /* Use Tahoma font */
color: red; /* Apply red color */
font-size: 40px; /* Set font size to 40px */
}
```
### Explanation of the Code:
1. **Center Aligning**: The `text-align: center;` property is applied to the `h1`, `div`, and `p` elements to center-align their text.
2. **White Background on HTML**: The `html` selector sets the background color of the entire HTML document to white.
3. **Light Blue Background for Body**: The `body` selector defines the background color as light blue, sets the width to 600px, and creates a 2px dotted grey border. The `margin: 0 auto;` centers the body in the viewport.
4. **Hometown Text Styling**: The `.hometown` class is utilized for styling your hometown text with the Tahoma font, red color, and a font size of 40px. You'll need to apply the class `hometown` to the text in your HTML that represents your hometown.
### Note:
Make sure to include this stylesheet in your `index.html` file for it to apply. You can link it in the `<head>` section of your HTML document as follows:
```html
<link rel="stylesheet" type="text/css" href="style.css">
```
This will ensure your styles are applied correctly. If you have any questions or need further modifications, feel free to ask!