Certainly! Below is a basic example of a CSS stylesheet named style.css that implements the formatting requirements you specified for your index.html web page:
/* style.css */
/* Apply white background color to the entire HTML document */
html {
background-color: white;
}
/* Apply light blue background color, width, and border to the body */
body {
background-color: lightblue;
width: 600px;
border: 2px dotted grey;
margin: 0 auto; /* Center the body */
padding: 20px; /* Add some padding for spacing */
}
/* Center align h1, div, and p tags */
h1, div, p {
text-align: center;
}
/* Specific styling for hometown text */
.hometown {
font-family: Tahoma, sans-serif; /* Fallback to sans-serif if Tahoma is unavailable */
color: red;
font-size: 40px;
}
Explanation:
- html: Sets the background color of the entire HTML document to white.
- body: Applies the light blue background color, a width of 600 pixels, a 2px dotted gray border, centers the body with
margin: 0 auto, and should have some padding for better layout. - h1, div, p: Centers the text alignment for these elements.
- .hometown: A class selector used to style your hometown text with Tahoma font, red color, and a font size of 40px.
Usage in index.html:
To use the above CSS, make sure you link it in the head of your index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Web Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p>Hello! This is a paragraph in my index.html page.</p>
<p class="hometown">My Hometown: Springfield</p>
</div>
</body>
</html>
Make sure to replace "My Hometown: Springfield" with your actual hometown name. The above code will ensure that the styles you specified in style.css are applied correctly.
7 answers