Porque esta aparecendo no corpo do html os códigos css?

Front-end
,
#1

Estou estudando CSS3 e Html5 com o livro HTML5 e CSS3 - Domine a web do futuro - Lucas Mazza da Casa do Código, no capitulo 2 ele manda inserir um div dentro do body.

Coloquei assim:

<!doctype html>
<html lang='pt-BR'>
  <head>
    <meta charset="UTF-8">
    <title>O que eu mais gosto em São Paulo</title>
    <link rel="stylesheet" href="normalize.css">
    <script src="prefixfree.min.js"></script>
	
  </head>
  <body>
	<div class='container'>
		
	<h1>O que eu mais gosto em São Paulo</h1>
    <h2>Passear na Avenida Paulista!</h2>
    <p>Um dos principais centros financeiros da cidade, a avenida Paulista
também possui diversas opções de entretenimento. Endereço do Museu
de Arte de São Paulo, <em>MASP</em>, do Teatro Gazeta e muitos outros,
a região é de fácil acesso graças as diversas linhas de ônibus que
cruzam a avenida e a linha de metrô que passa por baixo dela.
    </p>
    <p>A Avenida Paulista sempre é assunto. O que será que estão 
    falando a respeito no <a 
    href='https://twitter.com/#!/search/Avenida Paulista' 
    target='_blank'>Twitter</a>?
    <h2>Os bares da Vila Madalena</h2>
    <p>Depois de um dia de trabalho, nada melhor do que um bom chopp, um
petisco e uma conversa em uma mesa de bar. Opções de sobra na região
das ruas Aspicuelta, Fradique Coutinho e Wisard.</p>
	<p>
Veja quais os melhores bares e restaurantes da região no <a href='http://vejasp.abril.com.br/busca?chn=bares&qu=
&nbh=Pinheiros%20/%20Vila%20Madalena' target='_blank'>Guia da VEJA São Paulo.</a>
	</p>
	<p>Veja no <a href=''http://goo.gl/maps/HoH8' target='_blank'>mapa</a> como chegar ao parque.
	</p>
	
    <script src="jquery.min.js"></script>

  </body>
  </div>

Ele manda colocar esses coloquei codigos;

.container {
margin: 0 auto;
width: 960px;

body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana,
sans-serif;
line-height: 1.6;
}

Onde entra esses codigos CSS?

#2

Entra dentro da tag <head></head> com um tag <style></style>, exemplo:

<!doctype html>
<html lang='pt-BR'>
  <head>
    <meta charset="UTF-8">
    <title>O que eu mais gosto em São Paulo</title>
    <link rel="stylesheet" href="normalize.css">
    <script src="prefixfree.min.js"></script>
	<style>
		.container {
		    margin: 0 auto;
    		width: 960px;
            }
		body {
    		font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana,
    		sans-serif;
            line-height: 1.6;
		}
		</style>
  </head>
  <body>
	<div class='container'>		
		<h1>O que eu mais gosto em São Paulo</h1>
		<h2>Passear na Avenida Paulista!</h2>
		<p>Um dos principais centros financeiros da cidade,
			a avenida Paulistatambém possui diversas opções 
			de entretenimento. Endereço do Museu
			de Arte de São Paulo, <em>MASP</em>, do Teatro Gazeta 
			e muitos outros, a região é de fácil acesso graças as
			diversas linhas de ônibus que
	        cruzam a avenida e a linha de metrô que passa por baixo dela.
		</p>
		<p>A Avenida Paulista sempre é assunto. O que será que estão 
		falando a respeito no <a 
		href='https://twitter.com/#!/search/Avenida Paulista' 
		target='_blank'>Twitter</a>?
		<h2>Os bares da Vila Madalena</h2>
		<p>Depois de um dia de trabalho, nada melhor do que um bom chopp, um
	petisco e uma conversa em uma mesa de bar. Opções de sobra na região
	das ruas Aspicuelta, Fradique Coutinho e Wisard.</p>
		<p>
			Veja quais os melhores bares e restaurantes da região no 
			<a href='http://vejasp.abril.com.br/busca?chn=bares&qu=
			&nbh=Pinheiros%20/%20Vila%20Madalena' target='_blank'>Guia da VEJA São Paulo.</a>
		</p>
		<p>
			Veja no <a href=''http://goo.gl/maps/HoH8' target='_blank'>mapa</a> 
			como chegar ao parque.
		</p>
	</div>
    <script src="jquery.min.js"></script>
  </body>
</html>

Observação, mantenha um alinhamento agradável e de fácil entendimento e essa recomendação server para qualquer tipo de linguagem ou marcação.