EN VI

Html - trying to figure out how to set up a centered text box?

Html - trying to figure out how to set up a centered text box

extremely new to html and css, started literally days ago, im trying to figure out how to put a text box in the center of my site with the text aligned against the left of the box with a short title and space for the date and time just using h1, then h3, then h2. Id also like it to have its own separate background than the rest of the site. I would hope it is responsive as well. similar to this image

so far ive used border to get this, but the issue is the text isnt aligned to the left, and there is no difference in background. i understand that the top border of the desired image is a png, i would also like to know how to get that done if possible

Solution:

You can simply, apply a CSS property called text-align to make the text to the left. But make sure the container where you have the text has to be of width 100%.

Here is the HTML I used.

<body>
   <div class="container">
      <div class="modal">
        <h2>Heading</h2>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text 
        </p>
      </div>
   </div>
</body>

Here are the styles

<style>
      body {
        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
          "Lucida Sans", Arial, sans-serif;
      }
      .container {
        width: 100vw;
        height: 100vh;

        display: flex;
        justify-content: center;
        align-items: center;
      }

      .modal {
        width: 500px;
        height: 200px;
        padding: 1.5rem;
        background-color: aqua;
        border: 1px solid black;
        border-top: 15px solid black;

        display: flex;
        flex-direction: column;
        text-align: left;
      }
</style>

To get the boundaries of each box (tag/element in HTML ), you can use a temporary border around all of them by adding.

* {
   border: 1px solid black;
}

All the HTML tags work on BOX-Model. I also wanted to share some learning resources with you to help you out.

HTML - W3 Schools Docs
CSS - Web Dev Simplified's CSS