Why is my background color not changing?

HTML-CSS
1

Following a toturial. Everything works but that.

& {
	margin: 0;
	padding: 0;
}
body {
	font-family:  Arial, Helvetica, sans-serif;
	background-color: #12475f;
	color: #fff;
	line-height: 1.6;
	text-align: center;
}

.container {
	max-width: 960px;
	margin: auto;
	padding: 0 30px;
}

#showcase {
	height: 300px;
}

#showcase h1 {
	font-size: 50px;
	line-height: 1.3;
	position: relative; 
	animation: heading;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

@keyframes heading {
	0% {top: -50px;}
	100% {top: 200px;}
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TEST</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<section>
		<article>
			<header id="showcase">
				<h1> Welcome To My Site </h1>
			</header>
			
			<div id="content" class="container">
			Lorem Ipsum Is Cool
			</div>
			
			<a href="#" class="btn">Read More</a>
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</article>
</section>
</body>
</html>
2

@InputLite You are loading external .css file for your page:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
This file overwrites your body background property.
If you want to manually overwrite it, use !important for that property, like this:

body {
	font-family:  Arial, Helvetica, sans-serif;
	background-color: #12475f !important;
	color: #fff;
	line-height: 1.6;
	text-align: center;
}

Ideally, outside of codepen, you would solve that by making sure that your CSS file is called after bootstrap one.
Edit: in other words, place this line:
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
After line with bootstrap css.

2 Likes
3

Also my animation isn’t working.

.box 1 {
	display: 1;
	animate: slidein;
	animation-duration: 3s;
}

.box 2 {
	display: 2;
	animate: slidein2;
	animation-duration: 3s;
	
}

@keyframes slidein {
	0%{left: -700px;}
	100%{left: 0;}
}


@keyframes slidein2 {
	0%{right: -700px;}
	100%{right: 0;}
}


    <section id="boxes">
      <div class="container">
        <div class="box1">
          <img src="./img/logo_html.png">
          <h3>HTML5</h3>
          <p>I format my code, know proper tags, and learn proper ways fast.</p>
        </div>
        <div class="box2">
          <img src="./img/logo_css.png">
          <h3>CSS3</h3>
          <p>I know how to style web pages, add animations and transitions<p>
        </div>
       </div>
    </section>
4

@InputLite there is so much wrong with what you doing that you should just relearn the basics before asking more questions.

  1. Your containers have class of “box1” and “box2”, but in your CSS you try to use “box 1” with space. This approach will look for element “1” inside of the element with class “box”, which is not what you need. Change it to “box1” without spaces.
  2. Property to pass animation information is called “animation”, not “animate” as in your example.
  3. In your animation keyframes you are using property “left”\right" to try and animate it. This property is reserved for elements which are positioned with “position” property, it will have no affect on non positioned elements like this. To animate non positioned elements you can use property transform with value of translateX(0px).
    So if I were to fix your example, CSS would look like this:
.box1 {
	display: 1;
	animation: slidein;
	animation-duration: 3s;
}

.box2 {
	display: 2;
	animation: slidein2;
	animation-duration: 3s;
}

@keyframes slidein {
	0% {transform: translateX(-700px);}
	100% {transform: translateX(0px); }
}


@keyframes slidein2 {
	0%{transform: translateX(700px);}
	100%{transform: translateX(0px);}
}
5

Thx, I noticed those mistakes before you replied.

6

To expand on that, classes cannot have spaces in their name in the first place (if you want to use multiple classes, you separate them with a space). I do agree with the advice to revisit some basics, especially before using a framework, it’ll make your life easier. :slightly_smiling_face: