Objeto: entender o básico de CSS
Principais termos técnicos abordados: html, css, classe, marca e propriedade
Requisitos para as instruções funcionarem: editor de texto instalados
Requisitos para compreensão das instruções: noções bem básicas de HTML
Como ler essa receita: instruções, dentro dos passos da receita e que requerem ação sua no computador, estarão escritas em cor azul. Comentários sobre os passos estarão em fonte normal, cor preta. Comandos, código-fonte, termos técnicos ou configuração explícita, estarão com fonte diferenciada.
Vamos entender o funcionamento básico do Cascade Style Sheets, ou simplesmente CSS.
Não se trata de uma linguagem de programação, e sequer se trata de uma linguagem de marcação, como é o caso do HTML.
Trata-se de uma folha de estilos, um texto devidamente formatado estabelecendo regras de estilo que podemos aplicar às marcas de nosso documento HTML.
As regras de estilo são inúmeras e vão depender da sua criatividade, ou dos seus excessos.
Mas, numa regra de estilo, a gente basicamente estabelece duas coisinhas.
Coisinha um: a gente estabelece valores para propriedades das marcas - tipo, a cor do texto vai ser vermelha, a cor do plano de fundo vai ser amarela, a borda vai ter tamanho 1 etc. Qualquer propriedade imaginável de qualquer marca HTML pode ter algum valor fixado aqui nas regras e, acredite, isso é muita coisa. E, claro, na linguagem CSS a gente não vai poder escrever "a cor do texto é vermelha" assim, em português. Haverá uma sintaxe mais rígida para isso.
Coisinha dois: a gente estabelece a que elementos se aplicam aquelas regrinhas estabelecidas na coisinha 1. Se elas se aplicam a todas as marcas p, ou a todas as marcas img, ou a algumas marcas p ou img com determinadas características, e por aí vai. Vale definir regras para qualquer marca HTML e há bastante liberdade para delimitar as características mas marcas, seja restringindo a aplicação das regras ou expandindo-as.
Em resumo, eu posso definir regras para todas as marcas p de um documento, para todas as marcas p que tenham como ancestral uma marca article, posso definir regras para todas as marcas a (links) que já tiverem sido clicadas, para todas as marcas a que tiverem o mouse sobre elas, para todas as marcas img que estiverem diretamente abaixo de uma marca div... enfim, a combinação de todas essas possibilidades é gigantesca e essa é a razão da gente ter tanta página legal na Internet e também tanto balai de gato.
Aqui aprenderemos o básico de como estabelecer essas regras e aplicá-las a um código HTML.
Se vocês vão fazer uma página legal e estilosa com isso ou vão fazer um balai de gato, aí é com vocês.
Crie um arquivo HTML com o seguinte conteúdo e salve-o no seu computador.
<!DOCTYPE html>
<html>
<body>
<p>Já não tenho meus dentes natuarais</p>
<p>Que comi rapadura com biscoito</p>
<p>Cadê minha pressão 12 por 8</p>
<p>Que no peito não tá batendo mais</p>
<p>Dou um passo pra frente e dois pra trás</p>
<p>E assim mesmo com pouca habilidade</p>
<p>Que as feridas deixadas pela idade</p>
<p>Não se curam com pano de compressa</p>
<p>Vi a vida passando tão depressa</p>
<p>Que nem lembro que tive mocidade</p>
<br/>
<p>João Paraibano</p>
</body>
</html>
Trata-se de uma estrofe do poeta João Paraibano. Vamos tentar usar estilos para torná-la, visualmente, um tanto mais atrativa.
Você pode estilizar esses versos diretamente no HTML, o que não é muito aconselhável. Mas vamos lá.
Modifique o código e salve-o de forma que o conteúdo seja o seguinte.
<!DOCTYPE html>
<html>
<body>
<p style="color:blue;">Já não tenho meus dentes natuarais</p>
<p style="color:blue;">Que comi rapadura com biscoito</p>
<p style="color:blue;">Cadê minha pressão 12 por 8</p>
<p style="color:blue;">Que no peito não tá batendo mais</p>
<p style="color:blue;">Dou um passo pra frente e dois pra trás</p>
<p style="color:blue;">E assim mesmo com pouca habilidade</p>
<p style="color:blue;">Que as feridas deixadas pela idade</p>
<p style="color:blue;">Não se curam com pano de compressa</p>
<p style="color:blue;">Vi a vida passando tão depressa</p>
<p style="color:blue;">Que nem lembro que tive mocidade</p>
<br/>
<p>João Paraibano</p>
</body>
</html>
Note que acrescentamos uma propriedade style, e que definimos o valor da cor como blue. Depois do ; do "color:blue;" poderíamos listar outras propriedades, cor de plano de fundo, fonte etc. Esse tipo de estilização é conhecida como estilização inline.
Mas queremos apartar as nossas marcas dessas estilizações.
Queremos nossos estilos num arquivo em separado. Assim, modificando o arquivo de estilo, modificamos todo o look and feel da página sem mexer em seu conteúdo.
Crie um arquivo estilo.css no mesmo diretório do arquivo HTML criado no passo 1 e salve-o com o seguinte conteúdo.
p{
color: blue;
}
Pronto, vocês têm uma folha de estilo. Ela está dizendo que as marcas p terão cor azul.
No entanto, ninguém disse, ainda, que a sua página HTML deve usar essa folha de estilo.
Vamos resolver isso.
Modifique o seu arquivo HTML e salve-o de forma que fique com o seguinte conteúdo.
<!DOCTYPE html>
<html>
<head>
<link href="estilo.css" rel="stylesheet">
</head>
<body>
<p>Já não tenho meus dentes natuarais</p>
<p>Que comi rapadura com biscoito</p>
<p>Cadê minha pressão 12 por 8</p>
<p>Que no peito não tá batendo mais</p>
<p>Dou um passo pra frente e dois pra trás</p>
<p>E assim mesmo com pouca habilidade</p>
<p>Que as feridas deixadas pela idade</p>
<p>Não se curam com pano de compressa</p>
<p>Vi a vida passando tão depressa</p>
<p>Que nem lembro que tive mocidade</p>
<br/>
<p>João Paraibano</p>
</body>
</html>
Notem que, agora sim, estamos indicando que nosso arquivo HTML deve importar os estilos definidos em estilo.css. Isso se faz com a marca <link>, que não tem nada a ver com os links aos quais a gente está acostumado nas páginas.
Vocês devem ter visto os versos todos em azul SEM que tenhamos tido a necessidade de definir a propriedade style das marcas. Entretanto, o nome do autor também ficou em azul. Você pode modificar isso definindo o style no <p> do João paraibano. Mas pode também definir uma classe no seu estilo. Vamos a essa possibilidade.
Modifique o arquivo estilo.css e salve-o com o seguinte conteúdo.
p.verso{
color: blue;
}
Modifique o arquivo HTML e salve-o com o seguinte conteúdo:
<!DOCTYPE html>
<html>
<head>
<link href="estilo.css" rel="stylesheet">
</head>
<body>
<p class="verso">Já não tenho meus dentes natuarais</p>
<p class="verso">Que comi rapadura com biscoito</p>
<p class="verso">Cadê minha pressão 12 por 8</p>
<p class="verso">Que no peito não tá batendo mais</p>
<p class="verso">Dou um passo pra frente e dois pra trás</p>
<p class="verso">E assim mesmo com pouca habilidade</p>
<p class="verso">Que as feridas deixadas pela idade</p>
<p class="verso">Não se curam com pano de compressa</p>
<p class="verso">Vi a vida passando tão depressa</p>
<p class="verso">Que nem lembro que tive mocidade</p>
<br/>
<p>João Paraibano</p>
</body>
</html>
Agora você deve ver os versos em azul e o nome do poeta em preto.
CSS "do zero", com tutoriais e exercícios, nos sites da mozilla (português) e da w3schools (inglês)
Crie uma nova classe para a marca p. A classe deve se chamar mote e estabelecer a cor vermelha para o texto. Faça com que os dois últimos versos da estrofe sigam o estilo de mote, enquanto os demais permanecem como versos
Pesquise por html a tag. Você deve transformar o nome do poeta João Paraibano num link para uma página de pesquisa do google pelo nome dele.
Tente modificar o estilo dos links. Defina uma classe de estilo de link que modifique as característivas do link depois de visitado ou mesmo do link quando o mouse está sobre ele próprio. Que pesquisa você faria para se ajudar nisso?
Pesquise por html a tag new tab. Faça com que o link da questão anterior seja aberto numa nova aba do navegador.
Pesquise por css rounded image. Você deve encontrar uma solução para exibir uma imagem estilo avatar alterando regras de estilo da marca <img>. Modifique a página do verso para que apareça uma imagem arredondada de João Paraibano antes do nome dele. Você pode criar uma classe de estilo para isso.
Deve dar um pouco mais de trabalho, mas tente fazer com que todo img que esteja sob um div com a propriedade classe igual a "poeta" tenha as bordas arredondadas, como na questão anterior
Faça um arquivo de estilo e modifique o estilo da marca <th> (table header), modificando a cor do plano de fundo (por exemplo). Em seguida, faça uma tabela com nomes de bebidas e links para essas bebidas.