CODEWITHSUNDEEP
htmlcss
Michael Schmidt
Michael Schmidt

Reputation: 33

Problems formatting in HTML

The headertext font size changes but it won't be centered. Only just started learning HTML so this is likely a rookie mistake. Any advice is appreciated, thanks!

.main {
  margin-left: 220px; /* Same as the width of the sidenav */
  margin-top: 20px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
}
    
.main headertext {
  font-size: 45px;
  text-align: center;
}
<div class="main">		
  <headertext>ExampleTitle</headertext>
  <p>Welcome to my website.</p>
</div>

Upvotes: 1

Views: 59

Answers (4)

Ramesh
Ramesh

Reputation: 2403

There is no element called headertext. Instead you can user header which is whole wrapper in standard or h1/h2/h3/h4/h5/h6 which are commonly used to represent headings.

In your code if you want to follow the first heading you can follow the following code:

.main {
    margin-left: 220px;
    margin-top: 20px;
    font-size: 20px;
}

.header-text {
    font-size: 45px;
    text-align: center;
}
<div class="main">      
        <h1 class="header-text"> ExampleTitle </h1>
        <p> Welcome to my website.</p>
</div>

But it seems in-align with other contents. I guess you are looking for the following.

.main {
  /*margin-left: 220px;*/ //remove this line
  margin-top: 20px;
  font-size: 20px;
  text-align: center; //added this line
}

.header-text {
  font-size: 45px;
  /* text-align: center; */
}
<div class="main">
  <h1 class="header-text"> ExampleTitle </h1>
  <p> Welcome to my website.</p>
</div>

I added both way that you can try for now. But still there is many ways to give you a solution. Happy journey on HTML,CSS

Upvotes: 1

Remco
Remco

Reputation: 357

Actually, if you want to it to act as a title (semantically) you should probably give it a h1 tag instead. Like so

.main {
    margin-left: 220px;
    margin-top: 20px;
    font-size: 20px;
}

h1 {
    font-size: 45px;
    text-align: center;
}
<div class="main">      
        <h1> ExampleTitle </h1>
        <p> Welcome to my website.</p>
</div>

This will tell the browser and people who use screenreaders that it's actually a title. You may benefit from reading up on html tags. This is a useful link and whilst it may seem overwhelming, you'll get used to it pretty quickly. https://www.w3schools.com/tags/ref_byfunc.asp

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44107

Your problem is there is no <headertext> element. You need to use <h1> (biggest) to <h6> (smallest). If you want it centered, use the following CSS:

h1 {
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 1

pretzelhammer
pretzelhammer

Reputation: 15115

headertext is not a valid HTML element. Change it to a div with a class of headertext and I think that fixes your issue, snippet below:

.main {
    margin-left: 220px;
    margin-top: 20px;
    font-size: 20px;
}

.main .headertext {
    font-size: 45px;
    text-align: center;
}
<div class="main">      
        <div class="headertext"> ExampleTitle </div>
        <p> Welcome to my website.</p>
</div>

Upvotes: 2

Related Questions