How to CSS text alignment in symmetry?

I have a simple html and css page. I want to align the text in the follwing way:

But I have the following alignment:

how can the alignment be achieved?

How is the font size and weight being achieved?

This is my css.

Try this:


<!DOCUMENT HTML>
<html lang="en">
<head>
  <title> OCR Read Text </title>
  <style>
  body {background-color: #f9f9f9; color: #333;}
  .bgs {background-color: snow;}
  .bd1 {border: solid 1px #abc;}
  .mga {margin: 0 auto;}
  .p42 {padding: 0.42em;}
  .tac {text-align:center;} 
  .tal {text-align: left;}
  .w88 {width:88%; max-width:88%;}
</style>
<body>

<div class="w88 mga bgs">
  <h1> Wel - defaults to "text-align:left" </h1>

  <p class="bd1 p42">
    Improve hire believe opinion offered met and end cheered forbade. Friendly as stronger speedily by recurred. Son interest wandered sir addition end say. Manners beloved affixed picture men ask. Explain few led parties attacks picture company. On sure fine kept walk am in it. Resolved to in believed desirous unpacked weddings together. Nor off for enjoyed cousins herself. Little our played lively she adieus far sussex. Do theirs others merely at temper it nearer. Of be talent me answer do relied. Mistress in on so laughing throwing endeavor occasion welcomed. Gravity sir brandon calling can. No years do widow house delay stand. Prospect six kindness use .eepenf new ask. High gone kind calm call as ever is. Introduced melancholy estimating motionless on up as do. Of as by belonging therefore suspicion elsewhere are household described. Domestic suitable bachelor for landlord fat. Compliment interested discretion estimating on stimulated apartments oh. Dear so sing when in find read of call. As distrusts behaviour abilities defective is. Never at water roe might. On formed merits hunted unable merely by mr whence or. Possession the unpleasing simplicity her uncommonly. Smile spoke total few great had never their too. Amongnf moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte 
  </p>

</div>

<div class="w88 mga bgs tac">
  <h1> Wel - added "text-align: center;" to parent </h1>

  <p class="bd1 p42 tac">
    Improve hire believe opinion offered met and end cheered forbade. Friendly as stronger speedily by recurred. Son interest wandered sir addition end say. Manners beloved affixed picture men ask. Explain few led parties attacks picture company. On sure fine kept walk am in it. Resolved to in believed desirous unpacked weddings together. Nor off for enjoyed cousins herself. Little our played lively she adieus far sussex. Do theirs others merely at temper it nearer. Of be talent me answer do relied. Mistress in on so laughing throwing endeavor occasion welcomed. Gravity sir brandon calling can. No years do widow house delay stand. Prospect six kindness use .eepenf new ask. High gone kind calm call as ever is. Introduced melancholy estimating motionless on up as do. Of as by belonging therefore suspicion elsewhere are household described. Domestic suitable bachelor for landlord fat. Compliment interested discretion estimating on stimulated apartments oh. Dear so sing when in find read of call. As distrusts behaviour abilities defective is. Never at water roe might. On formed merits hunted unable merely by mr whence or. Possession the unpleasing simplicity her uncommonly. Smile spoke total few great had never their too. Amongnf moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte 
  </p>

</div>

</body>
</html>
2 Likes

Thanks @John_Betong. Just one more thing. I mostly work with the backend stuff so don’t have much experience with core css. Can you help me with your code and add

font-family: 'Poppins', sans-serif;font-size: 32px;

the above font in heading. I tried but it also applied to the rest of the content.

 <style>
  body {background-color: #ffffff; color: #333;}
  .bgs {background-color: #ffffff;}
  .bd1 {border: solid 0px #abc;}
  .mga {margin: 10px auto;}
  .p42 {padding: 0.42em;}
  .tac {text-align:center;} 
  .tal {text-align: left;}
  .w88 {width:88%; max-width:88%;}
  .fon {font-family: 'Poppins', sans-serif;font-size: 32px;}
</style>
<body>

<div class="w88 mga bgs fon" >
  <h1> Wel - defaults to "text-align:left" </h1>

  <p class="bd1 p42">

Try removing the .fon class from the parent DIV and add to H1

<h1 class="fon"> Wel - defaults to "text-align:left" </h1>

Edit:
CSS stands for Cascading Style Sheets and virtually all styles in the parent TAG are applied to child TAGS unless they are over-ridden by a class or an id.

DRY is the Don’t Repeat Yourself principle so choose styles wisely and frugally unless they are required in all child elements.

1 Like

Thanks a lot man. Just a small question though it’s not related to css and more of a html thing. Care to answer?

HTML has default styles and will display content with only default browser styles if no CSS is applied.

Stylesheets are added to prettify the content. As mentioned body and parent styles Cascade all through the remaining page.

Perhaps someone more elequent could clarify your question.

Would you care to pose the question along with relevant code, if needed? (A screen shot of code is not very helpful). A “working page” that demonstrates the problem would be ideal.
Why do you use inline CSS styles?

If you have not read our posting guidelines, please take a few minutes and catch up.

2 Likes

Will definitely take care of this net time? Thanks a lot

Is the question forthcoming? or are you signing out of this thread?.. :waiting anxiously:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.