Basic HTML with CSS/FCC: My Tribute Page - How do I start?

HTML-CSS
1

Tell us what’s happening:
I am using codepen.io to do the project but I cant understand how to connect HTML codes with CSS when they are in different windows. I need your help to understand this. I did all the modules but somehow during the project, I get confused how to start and make anything appear. Thank you very much for your help. I appreciate it.

Your code so far

  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!doctype html>
<html>
  <head>
    <title>FCC: My Tribute Page</title>
    <link type="text/CSS" rel="stylesheet" href="style.css" />
  </head>
  <body>
    
  </body>
<title>FCC: My Tribute Page</title>
</html>

<style>
.red-text {
  color: red;
}

<h1 class="red-text">FCC: My Tribute Page</h1>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

2

In Codepen, there are three windows: for HTML, for CSS and for Javascript.
You don’t need to link them. They are linked for you automatically behind the scenes . Simply write HTML in html section, CSS in CSS section. Take note: It is not necessary to include <!doctype html> or
<head> </head> tags in your HTML because they have already been added for you behind the scenes. For example copy and paste the code below in HTML section

<div class = 'testing'>  Testing Testing </div>

then copy and paste the code below in CSS section

    body{
          background-color:  gray;
           }

   .testing{
         background-color: yellow;
         color: blue;
      }

then save. You will see the result in the window. As simple as that. Just start coding!
EDIT:
Make sure you have a codepen account before you start doing all of the above.

3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums