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
                                                    There are no human answers yet.
                                            
                
                    Answered by
            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!
Submit Your Answer
We prioritize human answers over AI answers.
If you are human, and you can answer this question, please submit your answer.