External file link explanation

Curriculum Help
,
1

In this project you’ll work with an external CSS file to style the page. We’ve already created a styles.css file for you. But before you can use it, you’ll need to link it to the page. Nest a link element within the head element. Give it a rel attribute set to stylesheet and an href attribute set to styles.css.

could someone talk about this for me, im not visualizing whats going on here. youve created a file for me, but you need to link to it…where is this file exactly? how is “styles.css” a hyperlink address? are we talking locally within a coding text editor or something? like when on GitHub im looking at the HTML and CSS of the project, 2 files separate and this is how you actually apply one to the other?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
  </body>
</html>
2

You don’t need to worry about where the files are for this project.

But when you are making your own projects, locally or on GitHub, you would update this line

to indicate where your styles.css file is relative to your HTML file. This line says that styles.css is in the same folder as your HTML file, while some thing like href="blarg/styles.css" would mean that your styles.css file is in a folder called blarg.