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.

Question

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)

GPT-4o mini · Answer

Sure! Below is the CSS code to meet your requirements. Save this code in a file named "style.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:

Center Aligning: The text-align: center; property is applied to the h1, div, and p elements to center-align their text.
White Background on HTML: The html selector sets the background color of the entire HTML document to white.
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.
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:

<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!