Caixa 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet arcu a ante iaculis pellentesque. In hac habitasse platea dictumst. Pellentesque aliquam pretium elit eu posuere. In blandit ligula ac neque mattis non blandit neque dictum. Donec porta faucibus orci vel sagittis. Nullam quis justo a turpis convallis ultricies. Nunc aliquam vestibulum dui sit amet scelerisque. Curabitur faucibus condimentum nulla. Praesent ante diam, ultrices non vestibulum at, eleifend vel sem. Donec libero nisi, ultrices a tristique a, commodo et odio.

Posicionamento 7

#caixa2 {
	background-color: #CCC;
	margin-top: 20px;
	padding: 10px;
	height: auto;
	width: 80%;
	font-family: "Courier New", Courier, monospace;
	font-size: 0.9em;
	color: #000;
	-moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px; 
    -khtml-border-radius: 15px;
}
#caixa2 a {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	color: #990000;
	text-decoration: underline;
	font-size: 1.6em;
	font-weight: bold;
}
#caixa2 a:hover {
	background-color: #FF0000;
}

Caixa 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet arcu a ante iaculis pellentesque. In hac habitasse platea dictumst. Pellentesque aliquam pretium elit eu posuere. In blandit ligula ac neque mattis non blandit neque dictum.

#caixa3 {
	background-color: #999;
	margin-top: 20px;
	padding: 10px;
	height: auto;
	width: 95%px;
	-moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px; 
    -khtml-border-radius: 15px; 
}

Caixa 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet arcu a ante iaculis pellentesque. In hac habitasse platea dictumst. Pellentesque aliquam pretium elit eu posuere. In blandit ligula ac neque mattis non blandit neque dictum. Donec porta faucibus orci vel sagittis. Nullam quis justo a turpis convallis ultricies. Nunc aliquam vestibulum dui sit amet scelerisque.

Esta div não tem largura definida, logo ocupa toda a dimensão disponivel pela div parent

#caixa4 {
	background-color: #666;
	color:#FFF;
	margin-top: 20px;
	padding: 10px;
	height: auto;
	-moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px; 
    -khtml-border-radius: 15px; 
}

Esta div não tem largura definida, logo ocupa toda a dimensão disponivel pela div parent

Três DIVs dentro de uma DIV contentor.
Seguem o fluxo normal de posicionamento: de cima para baixo.

No body temos a definição de font-family: Georgia, "Times New Roman", Times, serif; font-size: 1em;
Porque é que estamos a ver a fonte arial?
E porque é que na caixa2 vemos Courier New?

Exemplo de selectores 1

Porque é que o link na página é arial / cinzento e na caixa 2 é georgia / vermelho?

body {
	background-color: #333;
	margin: 0px;
	padding: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
}
a:link {
	color: #999;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
	background-color: #999;
}

#caixa1 {
	background-color: #FFF;
	padding: 30px;
	height: auto;
	width: 900px;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	-moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px; 
    -khtml-border-radius: 15px; 
}