Learn Basic CSS by Building a Cafe Menu - Step 12

Tell us what’s happening:
Describe your issue in detail here.

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

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

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

Link to the challenge:

Hey! There are three main ways you can define or use CSS in your code.

  1. inline CSS
  2. Internal CSS
  3. External CSS

what you’re using to pass this challenge is called “inline CSS” which is when you add CSS styles directly in you HTML code by using the style attribute.

However this challenge expects you to use “Internal CSS”. This is a brief introduction to Internal CSS.

the syntax or the way you’re supposed to write styles for an HTML element is this:

button {
  color: red;
}

// if we try to understand each part individually,
// we get.

//selector  
   |
button{

//property-name value
  |      |
color : red;
}

selector: it is the element you’re trying to target (add any html element name, CSS class or an ID name here).

property name: this is the particular property of that element that you want to change (this would be the color, background color or even width and height) basically anything to do with the presentation of that element.

value: this is the value you want to give to the property name, for example, if the property name is set to color, then the value could be any color. if it set to height or width, then the value could be 10px or 100% or any of the values available to you.

if you want to learn more about this, here’s a resource.

Hope this helps! :smile: