Natalie Natalie - 3 years ago 142
CSS Question

Why wont my css change my div?

I am making a simple website and the writing I did in html in my div is showing up but the CSS is not effecting it.(ex. no colored box is showing up.)

this is the html

<div id=“hello”>hello</div>


this is the css

#hello {
background:#ccc;
width:200px;
height:200px;
}


this is the full code

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>

html {
font-family: "Open Sans";
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
}
body {
background:#Fff; margin:0 ;
}
#container {
width:1300px;
margin:0 auto;
background:#iff;
}

#header {
width:100%;
height:170px;
background:#Fff;
}

#logo {
float:left;
width:400px;
height:40px;
margin:30px;
background:#Fff;
color: #000;
font-size: 40px;
line-height:38px;
}
span1 { font-size: 30px;
line-height: 18px;


}
#navbar {
height:40px;
clear:both;
background: #Fff;
}
#navbar ul {
margin:10px;
padding:1px;
list-style-type:none;
line-height: 40px;
}
#navbar ul li {
padding:px;
float:right ;
margin-top:20px;
}
#navbar ul li a {
font-size:24px;
float:right ;
float:right ;
padding:0 0 0 20px;
display:block;
text-decoration:none;
font-weight:100;
color:#000;
}


#banner {
background-image: url(pics/babypic.png);
background-repeat: no-repeat;
background-size:100%;
height:445px;
padding:20px;
clear: both;
}


#left_col {
float:left;
width:819px;
padding:20px;
height:600px;
color:#000;
background:#F0F8FF;
font-size:20px;
}
h1 {
font-size:35px;
text-align:center;
font-weight:300;
margin-top:50px;
}
p {
font-size:25px;
font-weight: 200;
margin-right:75px;
margin-left:90px;
line-height:40px;
margin-top:50px;
}


#right_col {
float:right;
width:400px;
height:600px;
color:#000;
background:#F0F8FF;
padding:20px;
}
h2 {
font-size:35px;
text-align:right;
font-weight:400;
margin-right:75px;
}
h3 {
font-size:25px;
font-weight: 200;
margin-right:70px;
margin-left:50px;
line-height:40px;
margin-top:30px;
text-align:right;
}
#hello {
height: 200px;
width: 200px;
background-color:#ccc;
}
#footer {
height:450px;
background:#F0F8FF;
float:bottom;
clear:both;
font-weight:100;
font-size:25px;
}
h5 {
font-weight:100;
font-size:25px;
margin-left:250px;
margin-right:250px;
line-height:40px;
}
#footer ul1 {
margin-left:400px;
list-style:none;
width:40%;
display:block;
}


h4 {
text-align:center;
margin: 70px;
font-weight:;
}

#end {
height:200px;
}

</style>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
<div id="navbar">
<ul>
<li><a href="#">contact </a></li>
<li><a href="#">gallery &nbsp;|</a></li>
<li><a href="#">fees & insurance &nbsp;|</a></li>
<li><a href="#">hours & location&nbsp; |</a></li>
<li><a href="#">services &nbsp;|</a></li>
<li><a href="#">about &nbsp; |</a></li>
</ul>
</div>
</div>
<!-- content area -->
<div id="content_area">
<div id="banner"></div>
<div id="left_col">
<h1>
What People Are Saying
</h1>
<p>
“Thank you so much for your kindness and support. We sincerely appreciate your assistance and professional courtesy” —C.S
</p>
<p>
“He is very understanding, explaining things very well and has patience with kids. I highly recommend him. —C.G
</p>
<p>
“Thank you so much for your guidance and wisdom.” —K.R
</p>
</div>
<div id="right_col">
<h2>
Call Us Today!
</h2>
<h3>
set up an appointment
<p2> 1-805-563-0167
</p2>
</h3>
<div id=“hello”>hello</div>
</div>
<!-- blurb area -->
<!-- footer -->
<div id="footer">

<h5>
Dr. Brewer has been practicing pediatrics in Santa Barbara since 2002.
The office is a solo practice–patients always see Dr. Brewer. <p>
The practice offers:</p>
</h5>
<ul1>
<li>•newborn hospital care</li>
<li>•well child care</li>
<li>•school, camp and sports physicals</li>
<li>•acute sick visits</li>
<li>•immunizations </li>
<li>•lab testing</li>
<li>•developmental or behavioral concerns</li>
</ul1>
</div>
</div>
<div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today
1-805-563-0167
</p>
</h4>
</div>
</div><!-- end container -->
</body>
</html>

Answer Source

The double quotes you are using around the "hello" are different than everywhere else in the HTML.

If you re-type those double quotes it'll work.

Here is how the quotes look like to the browser. 1) Shows how "hello" shows up in a code editor but 2) and 3) show what the browser sees. Notice the extra pair of "? Tricky!

enter image description here

DEMO of the problem

#hello {
  height: 200px;
  width: 200px;
  background-color: #ccc;
}
<h3>BAD HELLO</h3>
<div id=“hello”>hello</div>

<h3>GOOD HELLO</h3>
<div id="hello">hello</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download