Font-size property

HTML/CSS
1

Hello everyone! My first post here, thank you for this community.

I am working on some simple HTML and CSS while following along with the courses.

my css looks like this…

body {
font-size: 10px
}

but when i inspect the page, the font size is still 16px.

I am using ‘1rem’ for relative sizing for the margins of a div container.

The margin is still 16px even though I set it in CSS to 10px.

Can someone help me find what I am missing?


HTML

<!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="/codWitMosh/Assignments/typography/recipeePage/Style/style.css"
    />
    <title>Recipee Page Blog Post</title>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

CSS

body {
  font-size: 10px;
}

.container {
  width: 1140px;
  height: 900px;
  margin: 1rem auto 1rem;
  border: 1px solid blue;
}
2

Welcome.

As an advice post full code of html file and css file.

1 Like
3

Thank you! I have edited my post

4

I added text ‘hello’ to the html file:

<!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="style.css" />

  <title>Recipee Page Blog Post</title>

</head>

<body>

  hello

  <div class="container">hello</div>

</body>

</html>

When I change font-size in css file, for example to 20px than the size of text ‘hello’ changes.
So I don’t see a problem, or am I missing something?

1 Like
5

I am using 1rem applied to the margins of the top and bottom of .container

but the margin is 16px and not respecting my css rule to have it be relative to the font size.

6

The default font size of the browser you are using is probably set to 16px which is the font size of the root html element. So,applying a 1 rem margin structures the margin to 16px (1 rem * 16px). Hope this helps

1 Like
7

Thank you! that explains that.

I thought I was explicitly changing the font size to 10px but I guess my browser was overriding it within the root HTML.

Thanks again, sometimes I need the help to see things that might be obvious.

cheers!