Alinhamento em CSS

Além de conseguir deixar o site mais bonito com CSS também é possível alinhar os elementos da sua tela de uma forma diferente do que o HTML mostra na tela por padrão

É possível mudar o alinhamento do texto, da imagem, do link, colocar os elementos ao lado do outro entre outras coisas.

Vamos exercitar no nosso arquivo index.html!

Dentro do arquivo index.html havíamos adicionado um estilo para o h1, vamos incluir um novo estilo para centralizar o elemento:

h1 {
  color: green;
  font-size: 50px;
  text-align: center;
}

Até agora o link do facebook e a imagem estão na mesma linha, como faz para deixar um embaixo do outro:

a {
    display: block;
}

O display:block faz com que o link ocupe a largura inteira da página, fazendo com a imagem desça.

Todas as informações estão uma abaixo da outra, como eu deixo o link do facebook e a imagem à direita e as demais informações à esquerda?

Para que consigamos dividir os elementos em 2 seções diferentes iremos utilizar div. Teremos uma div em volta dos elementos que queremos do lado direito e outra div em volta dos elementos que queremos do lado esquerdo.

HTML:

<div class="esquerda">
  <p>Inajara Priscila Garcia Leppa</p>
  <p>24 anos</p>
  <p>Descobri o tutoras no facebook e está sendo muito legal passar meu conhecimento a diante para outras meninas \o/</p>
</div>
<div class="direita">
  <a href="http://facebook.com/inajaraleppa">Meu perfil no facebook</a>
  <img src="https://upload.wikimedia.org/wikipedia/en/9/99/MarioSMBW.png" alt="Mario Bros" width="100">
</div>

Tendo duas div, conseguimos utilizar a propriedade float do CSS em que especificamos em qual lado da tela queremos que o elemento esteja. Para isso, adicione o seguinte CSS dentro da tag style

CSS

.esquerda {
  float: left;
}
.direita {
  float: right;
}

Vamos exercitar?

Altere a largura das duas divs para que as duas possuam o mesmo tamanho, a dica de como fazer isto está há apenas alguns capítulos de diferença.