Ask a New Question
Menu

Center aligned the tags h1, div, and p

Apply the white background color to the HTML tag
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.
Apply the Tahoma font and red color to your hometown; change its size to 40px.

Give the formatting

1 answer

To apply the specified styles to your HTML elements, you can use CSS (Cascading Style Sheets). Below, I provide the HTML structure along with the corresponding CSS to achieve the desired formatting:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <h1>Welcome to My Hometown</h1>
        <p>This is a paragraph about my hometown.</p>
        <p class="hometown">My hometown is a beautiful place!</p>
    </div>
</body>
</html>

CSS (styles.css)

/* Apply light blue background color and set dimensions for body */
body {
    background-color: lightblue;
    width: 600px;
    margin: 0 auto; /* Center the body */
    border: 2px dotted grey;
    padding: 20px; /* Optional padding */
}

/* Center align text for h1, div, and p elements */
h1, div, p {
    text-align: center;
}

/* Styles for the hometown class */
.hometown {
    font-family: Tahoma, sans-serif;
    color: red;
    font-size: 40px;
}

/* Apply white background color to the HTML tag */
html {
    background-color: white;
}

Explanation:

  1. HTML Structure: The example contains an <h1>, a few <p> elements, and a wrapping <div>.
  2. CSS Styles:
    • The body has a lightblue background, a width of 600px, a 2px dotted grey border, and it's centered on the page.
    • Text alignment for <h1>, <div> and <p> is set to center using text-align: center;.
    • The .hometown class applies the Tahoma font, changes the text color to red, and sets the font size to 40px.
    • The html tag has a white background color.

This will create a visually appealing layout based on the specifications you provided. You can simply copy the HTML and CSS into their respective files to see the result.