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

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

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.

The CSS:

  font-family:"Trebuchet MS", Helvetica, sans-serif;

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:

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:

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!

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.