Dylan Hobday Dylan Hobday - 6 months ago 19
CSS Question

background color for <div id = "box"> wont show

I'm working on a small project and I've encountered an issue were the background color for a div that I have isn't showing.


<!doctype html>
<title>Hello, World!</title>
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<div id="wrapper">
<div id = "box">
<h1 id="head">Hello, World!</h1>
</div> <!--Box-->
</div> <!--wrapper-->
<script src="js/Index.js" type="text/javaScript"></script>


body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;

#wrapper {
width: 100%;
height: 100%;

#Box {
background-color: #EEE;
Width: 100px;
Height: 100px;

#head {
font-size: 15pt;

I've never had an issue like this and any insight would be greatly appreciated. Thanks.


You need to make sure you are using the same case, classes and id's are case sensitive:

Change #Box to #box

See fiddle https://jsfiddle.net/7ku7qvfx/12/

#box {
    background-color: #EEE;
    Width: 100px;
    Height: 100px;