CSS Foundation Exercise A

HTML-CSS
1

Hello everybody,
I’m stuck on this, and these tests aren’t really helping.

  • You should have an external stylesheet containing the div element styles.
  • Your div element should have a background-color of red and a color of white.
  • Your div element should have font-weight set to bold, font-size set to 32px, and text-align set to center.
  • Your button element should have an inline style.
  • Your button element should have its background-color set to orange.
  • Your button element should have its font-size set to 18px.
    However, I believe that these 2 are the problem:
  • You should have an external stylesheet containing the div element styles.
  • Your button element should have an inline style.
    Yet I can’t fix those.
    HTML:
<!DOCTYPE html>
<style>
  p {
    font-size: 18px;
    color: white;
  }
  button {
    background-color: orange;
    font-size: 18px;
  }
</style>
<html>
  <head>
    <title>Exercise A</title>
  </head>
  <body>
    <link rel="stylesheet" href="style.css">
    <div>Some Text</div>
    <p>Hello everyone, how are you?</p>
    <button>I do nothing... Don't press me I'm a waste of time.</button>
  </body>
</html>

CSS:

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

Links:

Please respond simply and as soon or as late as you want.
Had to change it’s subject or it might’ve never gotten answered

4

fix the file name, then it will pass the test for the external stylesheet.

for this one

Your button element should have an inline style.

What inline style have you added to the element? I don’t see any

5

That fixed the button, but the ones about the div’s are still there. I fixed the href="style.css" as well.

6

what changes did you made? what is your updated code?

7

Here is my updated HTML:

<!DOCTYPE html>
<style>
  p {
    font-size: 18px;
    color: white;
  }
</style>
<html>
  <head>
    <title>Exercise A</title>
  </head>
  <body>
    <link rel="stylesheet" href="./style.css">
    <div>Some Text</div>
    <p>Hello everyone, how are you?</p>
    <button style="background-color: orange; font-size: 18px;">I do nothing... Don't press me I'm a waste of time.</button>
  </body>
</html>
8

oh, right, forgot to write this: move the style element inside the head.
You should move also the link element inside the head

all the elements that appear on the page go in body, all the others that give extra info (meta, link, title, style) go in the head

9

That didn’t solve it. Here’s my updated HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Exercise A</title>
    <link rel="stylesheet" href="./style.css">
    <style>
      p {
        font-size: 18px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div>Some Text</div>
    <p>Hello everyone, how are you?</p>
    <button style="background-color: orange; font-size: 18px;">I do nothing... Don't press me I'm a waste of time.</button>
  </body>
</html>
10

I thought you said you fixed the file name

11

I thought I did. It’s href="./style.css" right?

12

no, there is no file named style.css

13

To be beaten by a typo… Thank you for your help!

1 Like
14

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