Solution 1 :

When using CodePen, you don’t need the <style> tag inside the CSS box. Just put your CSS code straight in there.

Like this: https://codepen.io/brunomont/pen/JjGwoNR

Solution 2 :

It’s a problem because style is outside of html.
plese try this

<html>
<head>

<style>

body {
  margin: 0px;
  font-family: monospace;
  color: black;
  background-color: black;
}

main {
  background-color: lightgrey;
  padding: 20px;
  margin: 20px;
}

h1 {
  color: black;
  text-align: center;
}

p {
  max-width: 500px;
  text-align: justify;
  align: center;
}

.maintext {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    font-size: 20px;
}

.mainimage {
    display: block;
    margin-left: auto;
    margin-right: auto
}

</style>
</head>
  <body>
    <main>
      <h1>Tribute to Warren Buffett</h1>
      <div class="maintext">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div>
      <img class="mainimage" src="">
      </div>
      </main>
  </body>
</html>

    

Problem :

In the below code, no matter what changes I make to “body”, nothing in the html changes. My goal is to create a gray card that contains the main content surrounded by a black border. So basically starting with a black page, then layering the gray card with contents on “top”. I’d like to have global style for font, etc. but not sure why the “body” style isn’t working.

This code is in codepen so please ignore the layout below. Here’s link to the pen: https://codepen.io/andyzam/pen/abdPzpd

<style>

body {
  margin: 0px;
  font-family: monospace;
  color: black;
  background-color: black;
}

main {
  background-color: lightgrey;
  padding: 20px;
  margin: 20px;
}

h1 {
  color: black;
  text-align: center;
}

p {
  max-width: 500px;
  text-align: justify;
  align: center;
}

.maintext {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    font-size: 20px;
}

.mainimage {
    display: block;
    margin-left: auto;
    margin-right: auto
}

</style>


<html>
  <body>
    <main>
      <h1>Tribute to Warren Buffett</h1>
      <div class="maintext">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div>
      <img class="mainimage" src="">
      </div>
      </main>
  </body>
</html>

Comments

Comment posted by Bruno Monteiro

Was this just an example or your actual HTML file? If that’s your HTML file, the tag

Comment posted by Obsidian Age

Have you confirmed that you’re loading the right file? If the CSS is in an external stylesheet, have you confirmed that it’s referenced correctly? Are there any errors in the console? Have you tried a hard refresh with

Comment posted by Andy

@BrunoMonteiro thee CSS is external. I’m using codepen

Comment posted by codepen.io/andyzam/pen/abdPzpd

@BrunoMonteiro

Comment posted by Bruno Monteiro

Just added an answer. You should probably update your question to explain that your code is in CodePen, and add this link in the question itself 🙂

Comment posted by Andy

Have to love it when it’s something this simple after spending hours trying to see what was wrong. 🙂

Comment posted by Bruno Monteiro

OP explained that it is an external style. Also, when adding

By

Leave a Reply

Your email address will not be published. Required fields are marked *