CSS starting question

Why doesn't bg and title overlap?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My First CSS Webpage</title> <link rel="stylesheet" type="text/css" href="css.css"/> </head> <body> <img class="bg" src="bg.jpg"/> <img class="header" src="header.png"/> </body> </html> 

  #bg{ position:absolute; left:0px; top:0px; } #header{ position:absolute; top:0px; left:0px; } 
+4
source share
3 answers

Use . instead of # or change class= to id=

I recommend the latter because I assume that bg and header unique .

 <img id="bg" src="bg.jpg"/> <img id="header" src="header.png"/> 

See here for more details.

+9
source

Two images in html got classes, while in your css you define styles for identifiers.

If the element has a class, set it in css using .classname if it has a target identifier using #idname. If an element only appears once in html, use id. If there are several cases, use a class.

+3
source

I would also suggest for 2 elements that use the same basic properties to define them:

 #element1, #element2 { /* css properties */ } 

This will save space on your css file and can be quite a lot.

0
source

All Articles