Why I can edit html, body elements through CSS although it's not written in html?

HTML-CSS
1

Hi, I am new to this coding business.

I was doing the first project of responsive web design and came across this example from Codepen.io
https://codepen.io/freeCodeCamp/full/zNqgVx

And I saw this in the text editor:
The html:

<div id="main">
  <h1 id="title">Dr. Norman Borlaug</h1>
  <div>The man who saved a billion lives</div>
  <div id="img-div">
    <img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt "pic from flickr">
    <div id="img-caption">
      Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.
    </div>

The CSS:

html,body{
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  text-align:center;
  min-width:260px;
  color:#333;
}

I only copy a snippet of the whole code. Here’s my question:
What confuse me is, how can one modify html and body in CSS without first declaring it in html?

Thank you. Would really love to hear your help! :slight_smile:

2

Hi there,

if you look into the html settings of your codepen, it is declared.

Since it is a user friendly tool, they did the job for you :wink:

3

Hi stanparis15.

Actually it happened not only in codepen, but also when I code with my text editor and open it in my browser locally.
Thanks for your response though! I found my answer here!

4

Make sure you pay attention to the disclaimer on that article. In codepen, they explicitly define the head vs the body, and set up things like metadata and links/stylesheets in the settings; in your local environment you should always include them to ensure things end up in the right place.