Descobrindo o CSS

A Folha de Estilos em Cascata, ou CSS, como diz em seu nome, é um local no qual criamos os estilos das nossas páginas: cores, fontes, alinhamentos, vozes, e diversas outras configurações, que são aplicados na página sempre em efeito cascata.

Adicionando a folha

Podemos entender uma folha como um espaço para se colocar as configurações dos estilos de nossas páginas. Existem diversas formas de se aplicar uma folha de estilos em uma página e uma das mais simples para o HTML é a tag style. Por exemplo:

<style></style>

A partir disso estamos informando ao HTML, através de sua marcação, que o conteúdo da tag style conterá os estilos para essa página.

Estilizando uma página

Para estilizarmos a nossa primeira página web com CSS, vamos precisar de um documento estruturado, então vamos usar a seguinte estrutura de marcação HTML, já com a tag style incluída:

<style></style>
<title>Meu primeiro website</title>
<img src=thiagodini.jpg>
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href=https://twitter.com/thiagodini>Me siga no Twitter</a>


Com a estrutura pronta, precisamos selecionar as partes do documento que queremos configurar.

Regra

Um regra de CSS é formada por um seletor (ou um grupo de seletores) e um bloco declarativo, que por sua vez é composto por abertura de chaves ({), propriedade, dois pontos (:), valor e fechamento de chaves (}). Por exemplo:

seletor { propriedade: valor }

Um grupo de seletores é formado quando há mais de um seletor em uma regra. Para isso, devemos separá-los por vírgula. Por exemplo:

seletor, seletor { propriedade: valor }

Quando adicionamos mais de uma propriedade em um bloco declarativo, o que é muito comum, devemos adicionar ponto e vírgula (;) entre elas. Por exemplo:

seletor { propriedade: valor; propriedade: valor }

Utilizando as propriedades

Existem dezenas de propriedades do CSS que podem ser utilizadas no desenvolvimento de um website, mas para o seu primeiro website vamos focar em algumas bem simples, são elas:

Agora que já conhecemos algumas das propriedades mais utilizadas, vamos editar a nossa página para descobrir como ela ficará após os devidos estilos. Atualize-a assim:

<style>
h1, p, a { font-family: arial }
img { width: 5cm }
</style>
<title>Meu primeiro website</title>
<img src="thiagodini.jpg">
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href="https://twitter.com/thiagodini">Me siga no Twitter</a>

Salve as alterações no arquivo, volte ao navegador que está com a página aberta e atualize o website. Ele provavelmente estará com uma fonte personalizada, além de uma largura para a imagem.

Utilizando a cascata

A cascata é quando um elemento passa para os seus descendentes as suas propriedades, formando um efeito cascata, possibilitando estilizar um grupo de elementos. Por exemplo:

html { background: black; color: white }

Dessa forma estamos aplicando um fundo preto com conteúdo branco para todo o nosso documento HTML. Se quisermos adicionar uma cor específica para os nossos links, é só adicionar uma regra para eles. Por exemplo:

html { background: black; color: white }
a { color: aqua }

Então vamos aproveitar e utilizar todas as propriedades que aprendemos juntamente com o poder da cascata. Vamos adicionar uma fonte única para todo o nosso documento, alinhar todo o conteúdo ao centro e dar um espaçamento interno de 15% da largura da tela e deixar a nossa imagem com 5 centímetros. Atualize seu arquivo da seguinte maneira:

<style>
html { background: black; color: white; font-family: arial; text-align: center; padding: 15% }
img { width: 5cm }
a { color: aqua }
</style>
<title>Meu primeiro website</title>
<img src="thiagodini.jpg">
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href="https://twitter.com/thiagodini">Me siga no Twitter</a>

E pronto! Sua página agora tem um estilo poderoso.

Conclusão

Essa introdução nos mostra que boa parte do que vemos na internet é CSS, então podemos concluir que ela é uma das linguagens mais importantes no Desenvolvimento Front-end.

Sugestões

• Não se incomode com erros, eles são frequentes até para os profissionais
• Descubra novas propriedades e os seus possíveis valores
• Busque interagir com pessoas que também estão aprendendo