Você ja percebeu que quando criamos nossos elementos no HTML e abrimos no navegador para ver o resultado, está com aparência horrível? Descubra o que é CSS: O segredo para tornar suas páginas HTML incríveis.

Nessa aula vamos começar a falar sobre o CSS. Agora que já temos uma boa base de HTML e podemos criar vários elementos para nossa página web, podemos começar a pensar em como tornar nossas páginas melhores visualmente.

Atribuir cores, mudar fonte, tamanho da fonte, altura e largura de imagens, arredondar os cantos e até mesmo criar animações são coisas que o CSS nos proporciona.

Cascading Style Sheets

A princípio vamos entender o que significa CSS: É uma sigla com origem no inglês que significa Cascading Style Sheets, traduzindo podemos entender como folha de estilo em cascata.

O CSS é uma linguagem que utilizamos para dar estilo a nossa página HTML. O CSS nos possibilita formatar tudo que criamos no HTML, mudar toda a aparência dos elementos da nossa página HTML.

Nessa página que você se encontra por exemplo, foi através do CSS que formatei esse texto, coloquei uma cor na barra do topo, fixei um banner no lado direito e deixei tudo como você enxerga através de comandos no CSS.

Como funciona O CSS?

O CSS funciona basisamente da seguinte forma: Informo qual elemento quero alterar a aparência, o que quero mudar naquele elemento e por fim digo como quero que fique.

Seria de forma simplificada algo como: No elemento h1 quero que altere a cor do texto para verde.

Mas para podermos dar comandos como esse acima precisamos entender a escrita da linguagem, para o navegador entender o comando e de fato mostrar o elemento da forma que você deseja.

Então para traduzirmos o comando que demos acima para a linguagem do CSS seria algo como:

No comando CSS acima temos a seguinte estrutura: O seletor indicado pelo “h1” é onde informamos o que da nossa página HTML queremos alterar a aparência.

A propriedade que no caso acima é o “color”, indica o que desejo mudar do meus elementos “h1”.

E por fim temos o valor, indicado acima pelo “green” que é o valor que quero aplicar na cor de texto dos meus elementos “h1”.

A propriedade + o valor forma o que podemos chamar de declaração. Dentro de um seletor como por exemplo o h1 podemos criar várias declarações diferentes, mudando vários aspectos do h1, como por exemplo:

Nesse exemplo além de alterarmos a cor de texto do “h1”, informamos o tamanho da fonte (20px) e o alinhamento do h1 (ao centro). Mas não se preocupe ainda em decorar as propriedades, entenda por enquanto apenas a estrutura.

Nas próximas aulas vamos ver mais detalhes sobre os seletores e como aplicamos o CSS nas nossas páginas.