SPEAKER: Acontece que o HTML não é a única língua que você pode usar dentro de uma página web. Você pode usar algo chamado CSS, ou Cascading Style Sheets, também. CSS permite que você especifique muito mais precisamente a estética de um web página, incluindo layout e os tamanhos e cores e fontes e muito mais. Por exemplo, vamos criar uma página web aqui chamado css0 que representa um home page para, digamos, John Harvard. 

Nesta página, vamos ter de John Harvard nome, sob o qual será uma bela mensagem para os seus visitantes, sob que será um rodapé, com dizer, algumas informações sobre direitos autorais. Para fazer isso, vamos definir três divisões para a página usando uma tag chamado div. Abrir suporte div, John Harvard, perto div suporte, outra div suporte aberto, e agora vamos especificar algo como, bem-vindo à minha página! E vamos fechar essa div, também. 

E agora, um terceiro e último div, direitos autorais. Só para ser extravagante, deixe-me usar agora um HTML entidade, um símbolo que representa um personagem que você não podia de outro modo digite no teclado. Em particular, eu vou fazer comercial, libra, 169, ponto e vírgula. Acontece que é o código numérico para o símbolo de copyright. Então vamos especificar John Harvard aqui na parte inferior. Vamos fechar a div e salve o arquivo. 

Agora, o que é essa tag div? A tag div simplesmente define uma divisão da página, que é essencialmente um região retangular. Portanto, neste momento no tempo, eu tenho três regiões retangulares, um em cima do outro. Então, por agora, o efeito é quase tão embora eu tinha três parágrafos. Mas não veremos tão grande espaço em branco entre eles. 

Vamos salvar este arquivo, altere a sua permissões e dar uma olhada para um momento no Chrome. Chmod a + r CSS0.html. Vamos agora abrir Chrome e visita http://localhost.CSS0.html. Na verdade, aqui está uma home page por John Harvard. Vamos agora estilizar um pouco mais precisamente usando algum CSS. 

De volta ao gedit, vamos entrar nessa primeira tag div e adicionar um estilo atribuem especificando que eu gostaria de uma tamanho da fonte, por exemplo, 36 pixels, ou px. E eu gostaria que o peso desta fonte ser ousado em vez do padrão, o que é normal. Para a segunda div, vamos especificar outro atributo de estilo que tem um tamanho da fonte de 24 pixels, então um pouco menor. Citações fechar após o ponto e vírgula. 

Por fim, nesta terceira div, vamos fazer estilo é igual tamanho citação, fonte e digamos que 12 pixels dessa vez. Fechar citação após o ponto e vírgula. Observe, então, que me parece ter especificou um pouco de estilização para cada um destes três divs usando, ao que parece, CSS. Na verdade, a sintaxe que você vê na entre essas aspas é CSS, especificamente CSS propriedades com valores. E para que a primeira tag, onde tive duas dessas propriedades, tamanho da fonte e peso da fonte, eu simplesmente separados los com um ponto e vírgula. 

Agora, só por causa do estilo, eu ponto e vírgula também incluídos no No final de cada linha. Mas eles não são estritamente necessários, especialmente quando você só tem uma propriedade definida. Vamos agora salvar o arquivo e recarregue no Chrome, e ver o que o efeito líquido é. Voltar no Chrome aqui, vamos clique em Recarregar. 

Agora temos um pouco mais interessante home page para John Harvard, em que a primeira linha com seu nome, o que está dentro desse primeiro div, é de 36 pixels de altura e também negrito, pelo que a segunda linha, que é, em que a segunda div, é 24 pixels de altura, mas não em negrito. E em que a terceira linha em que a terceira div é de 12 pixels de altura e também não negrito. Mas suponha que agora eu gostaria de mudar tudo isso texto sobre de tal forma que ele é centrado. 

Eu poderia alinhar cada do indivíduo divs como sendo centrado. Mas, mais facilmente, eu poderia envolver os três divs dentro de uma quarta, uma div div pai, por assim dizer, e especifique que que div e todos os seus descendentes deve ser texto alinhado centro? Vamos dar uma olhada. 

Dentro de gedit, vamos voltar para o meu corpo e adicionar um novo top up div com div, o estilo é igual entre aspas centro alinhar texto, close cotar após o ponto e vírgula. E agora, vamos em frente e tudo travessão dessas linhas que digitou antes. E abaixo desse terceiro div, vamos fechar esta nova div. 

Em outras palavras, porque os três divs originais são agora as crianças, por assim dizer, de uma nova div pai e eu tenho especificou que eu gostaria de alinhar o texto dessa div pai no centro da página, que a propriedade será herdado por todas essas crianças. Na verdade, vamos salvar o arquivo e dê uma olhada em um navegador. Vamos recarregar no Chrome. E aí temos que, uma ainda melhor home page para John Harvard.