can someone please explain why my divs aren't getting modified by the css file?

This site is best viewed in a modern browser with JavaScript enabled.

can someone please explain why my divs aren't getting modified by the css file?

conchairtoe

I'm completely new, so I'm learning the very basics, and I've encountered a problem.

I put div tags around an h1, paragraph, and image element group. when i go to css, i type div{margin:50px; background:a9a9a9;}

absolutely no effect is taken. however, when i do each element individual in the same css file, it works! so i know the file is properly linked to the html.

the html portion:

</head>
<body>
<div>
<h1>Hello World</h1>
<p><b>This</b> is a test for the <em>Learning</em> of about divs.
<a href="index.html">Click here to go back to homepage</a></p>
<h2>List</h2>
<img src="images/new-goldplatedemblems-ser-i.jpg" width="225px" height="125px" alt="gold plated emblems" />
</div>

in the css:

a {
color:red; text-decoration: none;
}

h1{
color: green;
font-family: sans-serif;
margin-left: 50px;/pixels, percentages, and ems/
}

/p, h1, img{
margin-left: 50px;/
}

div{
width: 500px;
margin:auto;
background:#a9a9a9
}

PLEASE someone tell me what I'm doing wrong.

conchairtoe

oh, and i'm using sublime text 2 for windows.

coothead

Hi there conchairtoe,
[indent]
your problem is caused by your faulty commenting out. :eek:

This...

[color=navy]
/*p, h1, img{
margin-left: 50px;[color=red]*/[/color]
}[/color]

...should be...

[color=navy]
/*p, h1, img{
margin-left: 50px;
}[color=greeen]*/[/color][/color]

[/indent]

coothead

Code-tard

Hey Con,

You've got a right mix of bits and pieces there mate .... its a bit confusing but I think this will help?

1.
background:#a9a9a9 (is missing a ";")

2.
/p, h1, img{
margin-left: 50px;/
}

On top of cootheads remark.. It is a comment not code!... /**/ holds comments ie.. /note to self/ and can be used anywhere on a page having no impact on it!... So the above /pixels, percentages, and ems/ is just a comment you could happily delete...

Heres a quick cleaner example using the same code...

<!doctype html>
<head>
<meta charset="utf-8">
<title>Div Demo</title>


<style>

 /*telling all the parts to be 50px left in 1 hit*/
p, h1, h2, img{ 
margin-left: 50px;
}

a {
color:red; text-decoration: none;
} 

h1{
color: green;
font-family: sans-serif;
}


/* added to change LIST to blue, sorry Im colour blind could make out the green red : ) */
h2{
color: blue;
font-family: sans-serif;
}

div{
width: 500px;
margin:auto;
background:#a9a9a9;
}

</style>

</head>
<body>

<div>

<h1>Hello World</h1>
<p>
<b>This</b> is a test for the <em>Learning</em> of about divs.
<a href="index.html">Click here to go back to homepage</a>
</p>

<h2>List</h2>

<img src="images/new-goldplatedemblems-ser-i.jpg" width="225px" height="125px" alt="gold plated emblems" />

</div>

</body>
</html>

Of course you can dump the <style> tags and more to your external file... hope it helped...

I left you 1 small challange.. Both h1 & h2 have "font-family: sans-serif;".. It could be 1.. just to get you thinking about efficient clean code... (clue - body font-family)... Luck

conchairtoe

Code-tard;1349581 wrote:
Hey Con,

You've got a right mix of bits and pieces there mate .... its a bit confusing but I think this will help?

1.
background:#a9a9a9 (is missing a ";")

2.
/p, h1, img{
margin-left: 50px;/
}

On top of cootheads remark.. It is a comment not code!... /**/ holds comments ie.. /note to self/ and can be used anywhere on a page having no impact on it!... So the above /pixels, percentages, and ems/ is just a comment you could happily delete...

Heres a quick cleaner example using the same code...
<!doctype html>
<head>
<meta charset="utf-8">
<title>Div Demo</title>


<style>

 /*telling all the parts to be 50px left in 1 hit*/
p, h1, h2, img{ 
margin-left: 50px;
}

a {
color:red; text-decoration: none;
} 

h1{
color: green;
font-family: sans-serif;
}


/* added to change LIST to blue, sorry Im colour blind could make out the green red : ) */
h2{
color: blue;
font-family: sans-serif;
}

div{
width: 500px;
margin:auto;
background:#a9a9a9;
}

</style>

</head>
<body>

<div>

<h1>Hello World</h1>
<p>
<b>This</b> is a test for the <em>Learning</em> of about divs.
<a href="index.html">Click here to go back to homepage</a>
</p>

<h2>List</h2>

<img src="images/new-goldplatedemblems-ser-i.jpg" width="225px" height="125px" alt="gold plated emblems" />

</div>

</body>
</html>
Of course you can dump the <style> tags and more to your external file... hope it helped...

I left you 1 small challange.. Both h1 & h2 have "font-family: sans-serif;".. It could be 1.. just to get you thinking about efficient clean code... (clue - body font-family)... Luck

thank you so much, i can't believe i missed all that. must have been braindead last night.

As for the sans-serif dealio, are you referring to the fact that i could just go

h1,h2{font-family:sans-serif
}
????

thanks again!