CSS Text-align style in external stylesheet don`t work-CodePudding

Hi Ive got basic html file external css file. css file contain font-size class and text-align class but only font-size class actually work. I try VS Studio code, Pycharm, and use .centered class on body, header, footer - still dont work

Html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <link href="styles.css" rel="stylesheet">
    <title>Title</title>

</head>
    <body >
                <header  >
                    John Harvard
                </header>
                <main  >
                    Welcome to my page!
                </main>
                <footer  >
                    Copyright &#169 John Harvard 1636
                </footer>


    </body>
</html>

CSS code:

<style>
       .centered {
               text-align: center;
           }
       .large {
           font-size: 70px;
           }
       .medium {
           font-size: medium;
           }
       .small {
           font-size: 3px;
           }

</style>

I try VS Studio code, Pycharm, and use .centered class on body, header, footer - still don`t work Can you explain why?

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

CodePudding user response：

In your CSS file, you can NOT utilize <style> tags. To fix this, change your CSS file to the following:

.centered {
   text-align: center;
}

.large {
   font-size: 70px;
}

.medium {
   font-size: medium;
}

.small {
   font-size: 3px;
}

All I did here was delete the first and last lines (<style> and </style>)

That should do it!

CodePudding user response：

If you're trying to align all the text in the body to center then you don't give body a class name, you just call upon it like this:

body {
     text-align: center;
}

(Reminder: do not to call upon body in your CSS style sheet like a class or an id, so .body or #body would be wrong, its just body.)

If you want to create a container or wrapper called "centered" you would create a div as such:

<div ></div>

then you would use CSS:

.centered {
       text-align: center;
}

You can also use the center tag in HTML

<center>Centered Text</center>

or inline styling:

<header style="text-align: center;">Centered</header>

CodePudding user response：

There are a lot of ways to center a text in HTML, the first one is to type

<center> Your text here </center>

in the HTML file, the other one is put all your text in a div, and add a css style in that div with this code inside

margin: 0 auto;

Basically in your case, i would just replace

<body >

with

<body style="margin: 0 auto;" >