Learn Basic CSS by Building a Cafe Menu - Step 15

Tell us what’s happening:
Describe your issue in detail here.
I’m very confused on what I am supposed to do with the css file. Someone please help me… Thanks!

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cafe Menu</title>
  <style>
    h1, h2, p {
      text-align: center;
    }
  </style>
</head>
<body>
  <header>
    <h1>CAMPER CAFE</h1>
    <p>Est. 2020</p>
  </header>
  <main>
    <section>
      <h2>Coffee</h2>
    </section>
  </main>
</body>
</html>
/* file: styles.css */
<style>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 15

Link to the challenge:

Hey!

When the number of style rules that you want to add to your HTML reaches a point that it gets too hard to manage them, its best to add them to a separate CSS file. By doing this, you can target your CSS selectors just like normal but you don’t need to add the style tag.

just remove this from your css and add the selectors in the same way you would in the HTML.
Hope this helps! :smile:

“add the selectors in the same way you would in the HTML.” What does that mean? Sorry I might be overthinking this…

so when using internal CSS (CSS inside of the style tag) we use selectors to select elements that we want to style. for example, if we want to change the background color of all paragraphs on our website, we can do this.

<style>
p {
    background-color: red;
}
</style>

when using External CSS (CSS in a separate file) we don’t use the style tag. Instead, we create a new file with the .css extension (usually named style.css or styles.css) and we add all of our CSS inside of that file. when we are done, we addd a link tag inside of the head tag like this to “link” or connect that CSS file to our original file.
if you want to learn about the different ways in which you can add CSS to your html here’s an article to help you.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.