Learn CSS Foundations Projects - CSS Foundations Exercise A

The Odin Project
1

Tell us what’s happening:

i am failing to have an external stylesheet containing div element styles, i fail to style the paragraph too. is this a bug? i even tried asking chatgpt and he couldn’t help but try to troubleshoot

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Exercise A</title>
    <link rel="stylesheet" href="styles.css">
    <style>
      .p1
      {
  background-color:green;
        font-size:18px;
        color:white;
      }
      </style>
  </head>
  <body>
<div class="div">Some text</div>
<p class="p1">Even more text</p>
<button style="background-color:orange; font-size:18px;">Click Me!</button>
  </body>
</html>

/* file: styles.css */
/* styles.css */
.div
{
  background:red;
  color:white;
  font-size:32px;
  text-align:center;
  font-weight:bold;
}

Your browser information:

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

Challenge Information:

Learn CSS Foundations Projects - CSS Foundations Exercise A

2

Hi there and welcome to our community!

Your only issue is that your selectors are incorrect.
When you precede a selector with a dot, it becomes a class selector. You should be using type selectors (selecting elements by their type).
So your CSS code (in both places) is trying to style elements which have class="div" and class="p1".

EXAMPLE:

/* add red text colour to all elements of type paragraph */
p {
  color: red;
}

/* add red text colour to all elements with 'description' class attribute */
.description {
  color: red;
}

/* add red text colour to the element with 'description' id attribute */
#description {
  color: red;
}

NOTE: p1 is not a valid selector name either. If you want to style the paragraph elements, it’s just p.