Dasmoto's Arts and Crafts - Feedback please :)

Hi,

I completed the project and it looks nice (different background color is intentional and I used h4 instead of recommended h3)
After comparing with the solution… my code is x2 the size in the solution :upside_down_face:
The reason is that used many <div> containers - initially I had followed a simpler approach but it was difficult to control the position of the elements.

My html code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>Dasmoto's</title>
</head>

<body>

    <!-- Banner section -->
    <div class="banner">
        <header>
            <h1>Dasmoto's Arts & Crafts</h1>
        </header>
    </div>

    <div class="brushes">
        <h2>Brushes</h2>
    </div>

    <div class="img">
        <img src="./resources/images/frames.webp" alt="Hacksaw Brushes">
    </div>

    <div>
        <h4>Hacksaw Brushes</h4>
    </div>

    <div>
        <p>Made of the highest quality oak, Hackshaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span class="price">Starting at $3.00/brush</span>.</p>
    </div>

    <div class="frames">
        <h2>Frames</h2>
    </div>

    <div class="img">
        <img src="./resources/images/frames.webp" alt="">
    </div>

    <div>
        <h4>Art Frames (assorted)</h4>
    </div>

    <div>
        <p> Assorted frames made of different material, including MDF, birchwood and PDE. Select frames can be sanded and painted according to your needs. <span class="price">Starting at $3.00/frame</span>.</p>
    </div>

    <div class="paint">
        <h2>Paint</h2>
    </div>

    <div class="img">
        <img src="./resources/images/finnish.jpeg" alt="">
    </div>

    <div>
        <h4>Clean Finish Paint</h4>
    </div>

    <div>
        <p>Imported from Finland. Over 256 colors available in store, varying in quantity (1oz to 8oz). Clean Finish Paint microbinds to canvas, increasing the finish and longevity of any artwork. <span class="price">Starting at $5.00/tube</span>.</p>
    </div>
</body>

</html>

My css code:

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-style: bold;
}

body {
    background-color: azure;
    box-sizing: border-box;
}

p {
    color: black;
    font-size: 16px;
    margin: 10px 0;
    }

.banner {
    background-image: url(../resources/images/pattern.webp);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 150px ;
    /* color: khaki; */
    /* font-size: 100px; */
    text-align: center;
    margin: 70px 0;
    position: relative;
}

.brushes {
    background-color: mediumspringgreen;
    height: 40px;
    
}

.frames {
    background-color: lightcoral;
    height: 40px;
}

.paint {
    background-color: skyblue;
    height: 40px;
}

h2 {
    color: white;
    font-size: 32px;
    font-weight: bold;
}

h4 {
    color: black;
    font-weight: bold;
    
}

.img {
    margin: 20px 0;
}

span {
    color: blue;
    font-weight: bold;
}

h1 {
    color: khaki;
    font-size: 100px;
    font-weight: bold;
}

Question : Initially I had used this code to set the h1 font-size to 100px but the size of the font looked ridiculously large… after finishing I checked the hint: to set h1 to 100px. So I created a ruleset for h1 and then the font size looked normal.

So why with this code the letters looked like 200px although I had set the size to 100px?

1 Like

Regarding your question, this is likely because the web browser has default styles set for many elements, h1 included. This would override the font-size you set under .banner, until you explicitly set it again under your own h1 selector.

To go a little deeper, I use google chrome, and their default styling for h1 font-size is apparently (after checking) 2em. Em is a relative sizing unit that in the case of fonts, is calculated based off its parent element in your HTML structure. 1em would be same size, 2em is twice as big, 0.5 is half. Assuming 2em was being used for you too, this explains the behavior. You set .banner to 100px (the parent sizing in this case), and the browser default h1 font-size value of 2em was multiplying it by 2 to get 200px.

1 Like

Thanks for your comment! It behaves the same on Edge browser.
It could be related with what you say, if I go and set the font-size 50px then it looks 100px as expected.
This is how it looks with the font-size 100px in the .banner :
font-size

1 Like