CODEWITHSUNDEEP
css
Curnelious
Curnelious

Reputation: 1

Why text-align affect child div, but not font-size?

This is basic but I couldn't find what I need. 

 <div class="coverTitle"><h1> The Best In Town </h1></div>

I was thinking that to align the text I need:

.coverTitle>h1
{
  text-align:center;
}

but :

  .coverTitle
    {
      text-align:center;
    }

also works.

On the other side, 

  .coverTitle
    {
       font-size: 10px;
    }

will not affect the font size of that child.

How is that some things affect a child and others won't?

Upvotes: 0

Views: 1111

Answers (6)

Nachiket Saggam
Nachiket Saggam

Reputation: 11

h1 is a special tag hence the final font size of this tag is also affected by the emphasis factor added by the browsers as per the HTML specification.

Child tags always inherit the font size from their parents but since the h1 tag has emphasis, its font size will actually be larger than its siblings and parent, but still derived from the value assigned to the parent.

You can check this behaviour, by adding a p tag and h1 tag inside a div and then changing the font size assigned to the div. You will see font sizes of both h1 and p tag change, but the h1 font will actually be bigger and change faster due to emphasis.

Upvotes: 0

user7148391
user7148391

Reputation:

Why text-align affect child div, but not font-size?

It actually does partially

Now the user-agent(browser) applies some starting point style-sheet to all elements and that varies from browser to another, in the case of chrome the h1 gets font-size:2em this is important to notice, because a computed values won't get overridden by inheritance.

When you say 

.coverTitle
{
   font-size: 10px;
}

div.coverTitle will get font-size:10px but the h1 will get font-size:20px this happens because of the multiplier 2em the h1 has by default

Demo

div {
  font-size: 10px;
}

div>h1 {
  /*   1em = 16px */
  /*   default font-size:2em;  */
  /*   font-size is inherited by default */
  /*   font-size: inherited * default */
  /*   font size becomes */
  /*   font-size:20px; */
}

.helper {
  font-size: 20px;
  /* or */
  /* font-size: calc(10px * 2); */
}
<div>
  <h1>Test</h1>
</div>
<h1 class="helper">Test</h1>

Upvotes: 0

Zihad Ul Islam
Zihad Ul Islam

Reputation: 777

In order to change the font size of the child element without knowing which heading tag is the child, try this:

h1, h2, h3, h4, h5, h6{
    font-size:inherit;
}

.coverTitle
{
   font-size: 10px;
}

This will ensure that the child element is receiving the font-size from its parent. If you want to include paragraph tag in the range, just include p after h6. Make sure to insert a comma between h6 and p.

Upvotes: 0

user10384200
user10384200

Reputation:

In reality this should work. You forgot a closing tag in your HTML, this can be the cause of the problem. If not, it is possible that another property of your CSS applies and overwrites the "font-size: 10px". You can try this hypothesis by entering "font-size: 10px !important". If it works it is because the property is effectively overwritten elsewhere in your code.

.coverTitle {
  font-size: 10px;
}
<div class="coverTitle"><h1> The Best In Town </h1></div>

Upvotes: 0

Jay
Jay

Reputation: 373

The reason is because <h1> has a default user-agent font size that is larger than normal text. In order to override it, you must explicitly change the font size of all <h1>s or within a class:

.some-class {
  font-size: 18px;
}
<div class="some-class">
  <h1>This is a default H1</h1>
  <p>This is normal text.</p>
</div>

Now let's explicitly set the font size of the <h1>:

.some-class {
  font-size: 18px;
}

.some-class h1 {
  font-size: 20px;
}
<div class="some-class">
  <h1>This is a default H1</h1>
  <p>This is normal text.</p>
</div>

Upvotes: 1

yqlim
yqlim

Reputation: 7080

See the working snippet below:

.coverTitle.one {
  text-align:center;
}

.coverTitle.two {
  font-size: 10px;
}
<div class="coverTitle one">
  <h1> text-align: center </h1>
</div>

<div class="coverTitle two">
  <h1> font-size: 10px </h1>
</div>

font-size definitely affects child elements. (More accurately, child elements definitely inherits from its parent)

So your claim that font-size of parent will not affect the font-size of a child is false.

Now see this other example:

.coverTitle.one {
  text-align:center;
}

.coverTitle.two {
  font-size: 10px;
}

.coverTitle.two > h1 {
  font-size: 50px;
}
<div class="coverTitle one">
  <h1> text-align: center </h1>
</div>

<div class="coverTitle two">
  <h1> font-size: 10px </h1>
</div>

Notice in the CSS I've added > h1 to specifically target the child element.

Now, the font-size will not inherit from parent, because you have explicitly set its own font-size.

The takeaway is that most CSS properties of child elements will inherit from its parent if they are not explicitly passed a value.

Upvotes: 2

Related Questions