CSS Foundations Exercise A

I’m very much frustrated doing this exercise I do not see what I have wrong. It says I’m missing the following:
There should be one div element. It should contain some text and be aligned in the center.
The div element should have a background-color of red and a text color of white .
The div element should have a font-weight of bold and a font-size of 32px .
The p element should have its color set to white .

This is my code:

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" type="text/css">
    <style>
      p {
        color: white;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div class="abc">
      abc
    </div>
    <p>klmn</p>
    <button style="background-color: orange; font-size: 18px;">
      parry
    </button>
  </body>
</html>
/* file: styles.css */
/* style.css */
.abc {
  text-align: center;
  background-color: red;
  color: white;
  font-weight: bold;
  font-size: 32px;
}

Welcome to our community!

Post a link to the challenge.

Hey! Welcome to the FFC forum. You need to put all your CSS properties within the styles opening and closing tags, when you working in a combined HTML and CSS file.

same here my code works on vscode but on site nouppppp :skull:

Your link element have a typo type= text/css , remove it. And also move your p selector and it’s properties to CSS file . And remove style tags from your html code.
@zhengkangle122

Learn CSS Foundations Projects: CSS Foundations Exercise A | freeCodeCamp.org

I have to have the style tags in the code as the exercises requires me to do it

Here, you need to add one more property.

Don’t use a class attribute. Just add the name of the HTML element (div) as a CSS selector in styles.css (the same way as you did with p selector).

so i got the same issue with the div element but I’ve solved it. You need to go into the styles.css and make something like this (remove the class “abc”):

div {
text-align: center;
background-color: red;
color: white;
font-weight: bold;
font-size: 32px;
}

hope it helps!

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