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 1 :
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