Desmoto’s Arts & Crafts <div> tag and CSS

Hi everyone!

I was doing the Desmoto’s Arts & Crafts project for HTML/CSS and found something that is not clear.

In the first section, we have to format the heading and its background.

In HTML I wrote the following (Only including the relevant part:

<div class="maro">
    <h1>Dasmoto's Arts & Crafts</h1>
</div>

In CSS I decided to format in the following way:

.maro {
background-image: url(“https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg”);
text-align: center;
font-size: 100px;
color: khaki;
font-weight: bold;
}

In this case, the font-size is way out of proportion and is not anything like on the given task. However, the moment I change “.maro” to “.maro h1”, everything is correct and it falls in the right way.

I don’t understand why we need to specify this if div and class functions are used to generalize the rule in a way that everything is affected withing the class range, excluding things that are more specified.

I understand that I could’ve specified the class in “h1” itself but should it matter when there’s only one attribute in the “div” tag?

Thank you in advance for the help!

Hello @georgekikalishvili70!! Welcome to the forums!! :grinning:

I believe it works like this:

When you set the class to have a font size of 100px, it refers to the size of the normal text.
If the normal text is now 100px, the font size of the <h1> elements will increase more to stay in scale with normal text.

When you specify that the <h1> element is supposed to change to 100px also, it will override this correction.

Hopefully this helps :slight_smile:

Hello, @8-bitgaming Thank you, using quarantine to its fullest :)))

Yes, this makes total sense! Because p would be the normal text, h1 would increase proportionally.

Thank you, this was bothering me very much. So simple :))

1 Like