Curso sobre HTML - Aula 12, nessa aula nós vamos nos aprofundar ainda mais nas CSS dentro da sua página html, para personalizar ainda mais seu site na web (website), primeiro nós vemos como colocar espaçamento entre linhas com o CSS, depois nós vemos como personalizar ainda mais as suas bordas colocando cores, espessura, estilo, depois nós vemos como colocar espaçamento em todos os lados da sua tag, aprendemos como colocar margem para distanciar um parágrafo do outro, como definir uma imagem de fundo para uma tag, e aprendemos as diferenças entre o identificador ID do identificador Class dentro do seu html.

1. HTML 4.1 - Aula 12
Canal Effeccinco

2. Revisão da Aula Anterior
 Famílias das fontes
 Alteramos a fonte da nossa página
 Modificamos o tamanho da fonte
 Colocamos, negrito e itálico
 E por fim alteramos a cor da fonte

3. Conteúdo dessa Aula
 Nessa aula nós vamos nos aprofundar mais nos componentes de linhas e de blocos e usar alguns
comandos no CSS, para deixar nossa página ainda mais elegante.
 Você já pensou em diminuir ou aumentar o espaçamento dos seus textos na sua página na web,
isso realmente vai deixar seus textos mais simples de serem lidos e o seu público realmente vai
gostar disso, vamos ver como é feito essa alteração?

4. Aumentando o Espaçamento da linha
 Para aumentar o espaçamento da linha no seu CSS é muito simples você deve
utilizar o comando line-height, veja:
 Line-height: 1.6em;
 E você já sabe né o em significa vezes, então aqui ele aumenta 1.6 vezes o
tamanho da letra do seu parágrafo, esse espaçamento é ótimo pois facilita a
leitura para o usuário, além disso você pode usar ele para dar destaque aos
seus textos na web, diferenciá-los dos demais.

5. Modelo de Caixa
 Você já ouviu essa expressão alguma vez, pois é, no html esse modelo de
caixa significa que o CSS vê todas as suas tags como caixas.
 Cada um desses elementos tem a sua área de preenchimento, você colocar
uma borda e margem sendo claro sempre opcional.
 Como nós já aprendemos a personalizar o nosso conteúdo na aula anterior,
como alterar fonte, cor, colocar negrito, itálico, nessa aula eu não vou entrar
em muitos detalhes se vocês quiserem saber mais assistam a aula 11 aqui do
nosso canal.
 Vamos nos aprofundar um pouco mais no estilo da borda:

6. Personalizando suas bordas
 Para colocar cor nas suas bordas :
 Border-color: black;
 Para colocar expessura:
 Border-width: 1px;
 Para colocar Estilo nas suas bordas
 Border-style: solid;

7. Tipos de borda
 Depois de definir o border-style, você pode personalizar ainda mais suas bordas,
veja:
 Solid – borda sólida e com linha contínua.
 Dotted – parece um monte de pontinhos.
 Double – usa duas linhas.
 Dashed – parece traços pontilhados em volta da tag.
 Groove – parece uma ranhura.
 Inset – parece que a tag e funda
 Outset – parece que a página ganha volume como se fosse um botão
 Ridge – parece algo levantando na página.

8. Colocando cor somente em um lado da
borda
 Você pode criar uma borda e colocar uma cor apenas em um dos seus lados
usando os comandos:
 Border-top-color: black;
 Border-right-color: blue;
 Border-left-color: red;
 Border-bottom-color: White;

9. Colocando preenchimento na sua tag
 Algumas vezes as bordas criadas, ficam estranhas, pois em cima e em baixo
ficam diferentes das bordas laterais, ficam muito próximas o que vai deixar
seu texto estranho, para preencher esse espaço e deixar mais agradável, nós
usamos o código de preenchimento:
 Padding : 25 px;

10. Padding
 Você ainda pode personalizar ainda mais sua tag, colocando, mais
espaçamento ainda na esquerda(left), direita(right), Topo(top) e em
baixo(bottom).
 Padding-left: 80px;
 Padding-right: 60px;
 Padding-top: 20px;
 Padding-bottom: 20px;

11. Adicionando margem a suas tags
 Para deixar todos os textos que você criar na sua página uniformes, o
interessante é você definir isso em todos os seus parágrafos para isso você
pode definir dentro do CSS:
 Margin : 30 px;
 Isso significa que ele vai aplicar uma margem em todos os lados do seu
elemento de 30 pixels.

12. Margem
 Assim como o Padding você pode colocar margem esquerda(left),
direita(right), Topo(top) e em baixo(bottom), com os comandos:
 Margin-left: 250px;
 Margin-right: 200px;
 Margin-top: 200px;
 Margin-bottom: 100px;

13. Adicionando uma imagem de fundo
 Além da propriedade img do html no CSS nós também temos um comando
aonde você pode adicionar imagens como plano de fundo, só que ao invés de
inserir a imagem como acontece na tag img aqui você define ela como plano
de fundo daquele elemento, então você pode colocar um plano de fundo em
um único parágrafo, veja o comando:
 Background-image: url(caminho.jpg);
 Vc coloca o caminho e define a url aonde deve ser encontrada a sua imagem.

14. Imagem como plano de fundo
 Além de colocar a imagem ainda existem duas propriedades interessantes.
 Para não repetir a imagem você usa o comando:
 Background-repeat: no-repeat;
 Para deixa-la na parte superior esquerda:
 Background-position: top left;

15. Você sabe o que é ID
 No CSS nós temos como identificar as tags através das Heranças, classes e agora vou
apresentar o ultimo conceito que é o do ID, isso significa que que esse é um código único, um
identificador que só vai funcionar para uma tag, exatamente, ele funciona como se fosse o
identificador da classe, porém ele só pode ser usado no seu código html apenas uma vez ao
contrário da classe aonde você pode usar ela várias vezes, para colocar ele no html você
define dessa forma:
 <h1 id=“azul”>
 Para chamar ele no CSS, é diferente da classe que era com um .(ponto) esse chama-se pelo
sustenido #
 #azul{
 Aqui dentro continua a mesma coisa.
 }

16. Quer saber mais sobre html?
 Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no
youtube:
 https://www.youtube.com/watch?v=6S3x8MpFocc
 Quer aulas sobre HTML, veja nosso Canal no Youtube, nos assista, curta e
compartilhe:
 https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A/feed
 Acesse o nosso Blog, e confira matérias mais completas.
 www.effeccinco.wix.com/effeccinco

17. Referências
 Livro: Use a Cabeça HTML, CSS e XHTML, 2º
Edição, Editora Alta Books, Elisabeth Freeman &
Eric Freeman. Capítulo 1 – Comece a entender o
HTML.
 SHARMA, Vivek. SHARMA, Rajiv. Desenvolvendo
Sites de e-Commerce. São Paulo: Makron Books,
2001, 598 p.