Ask a New Question
Menu

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

The formatting should be external CSS. Ensure there is no errors as it will be validated in the validator website.

1 answer

Here is an example of how you would create a CSS stylesheet named "style.css" based on your specifications.

/* style.css */

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

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

/* Style the body */
body {
    background-color: lightblue;
    width: 600px;
    border: 2px dotted grey;
    margin: 0 auto; /* Center the body element on the page */
}

/* Apply styles to the hometown text */
.hometown {
    font-family: Tahoma, sans-serif; /* Specify Tahoma font */
    color: red; /* Set text color to red */
    font-size: 40px; /* Set text size to 40px */
}

Additional Notes:

  1. HTML Structure: Ensure that you add the appropriate class to the element specifying your hometown in your HTML file. For example:

    <p class="hometown">Your Hometown Name</p>

  2. Linking the CSS File: In your index.html, make sure to link the CSS stylesheet in the <head> section. Here’s how you can do it:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Your Page Title</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <div>
        <p class="hometown">Your Hometown Name</p>
        <p>Some additional text here.</p>
    </div>
</body>
</html>

  3. Validation: After creating your HTML and CSS files, you can validate them using online validators like the W3C Markup Validation Service for HTML and the W3C CSS Validation Service for CSS to ensure there are no errors.

  4. Browser Testing: It’s a good idea to check how your page renders in different browsers to ensure consistent appearance.