Nós temos muito conteúdo sobre CSS aqui no site. E muitos são complementares, por isso sugiro que você, ao terminar de ler esta publicação, leia esta.
Você está acompanhando nossa série Como a Web Funciona. Se ainda não leu as três primeiras publicações, faça isso primeiro e depois continue aqui.
Introdução
CSS, assim como HTML, não é uma linguagem de programação, é uma linguagem de estilos. Com ele você consegue adicionar estilo (cores e formas) ao seu documento, seja para navegador, para impressão, fala ou outras mídias. Nesta série falaremos apenas do site funcionando em um navegador no computador.
Por exemplo: para deixar todos os parágrafos tag <p> de um documento com uma cor vermelha, o código seria este:
// html
<p>Parágrafo 1</p>
// css
p{
color: red;
}Nesta Publicação
Adicionando estilo às páginas
As formas mais comuns de adicionar estilo a um documento são: criar um arquivo separado com a extensão .css e vincular à página HTML, adicionar um bloco de estilo na própria página ou adicionar estilos inline dentro nos próprios elementos html.
Você precisa entender qual é a sua necessidade e aplicar a solução que é possível para cada momento.
Lembre-se que o CSS trabalha diretamente com o HTML, referenciando elementos que existam dentro do documento. É importante entender esta conexão.
<style type="text/css">
p.estilo1{
color: blue;
}
</style>
<p class="estilo1">Reconhece o estilo dentro da própria página.</p>
<p class="estilo2">Reconhece o estilo no arquivo externo.</p>
<p style="color: green;">Reconhece o estilo do próprio elemento.</p>Entendendo a sintaxe do CSS
A forma de se escrever um bloco de código em CSS é muito simples e, ao mesmo tempo, muito poderosa.
/* exemplo */
seletor{
propriedade: valor;
}
/* aplicação prática */
p{
color: blue;
}Como falamos anteriormente, o CSS conversa com os elementos HTML. O elemento p que você vê acima, está dentro de um documento HTML na tag <p>. Simples né?
Seletores são os elementos HTML que o CSS precisa se comunicar para realizar as alterações de estilo. Se o seu documento HTML possui uma tag com uma classe menu <div class="menu">, para identificar este elemento no CSS seria: .menu{} ou div.menu{}.
Propriedades são as características dos elementos que você deseja modificar. Para alterar a altura, largura e a cor de fundo do elemento <div class="menu">, as propriedades a serem acionadas são: height, width e background-color. Seu bloco de código fica mais ou menos assim:
Valores são as novas características adquiridas a partir da manipulação de um determinado elemento.
<style type="text/css">
.menu{
width: 300px;
height: 300px;
background-color: green;
}
</style>
<div class="menu"></div>Entendendo o Efeito cascata do CSS
Com relação a identificação dos seletores, podemos ser genéricos ou específicos. No exemplo abaixo, estamos sendo bastante genéricos ao identificar um elemento p. Nesse caso, todos os elementos p estarão na cor azul dentro do documento.
p{
color: blue;
}No entanto, podemos ser mais específicos nessa identificação, veja o exemplo:
E qual a necessidade de ser específico? Pare um pouco e pense sobre isso.
Quando somos específicos, podemos por exemplo, atribuir cores e formatos diferentes para elementos de tags iguais, veja:
Quando não somos específicos na identificação do elemento, deixamos o caminho livre para ação do efeito cascata das folhas de estilo, então lembre-se que: a última declaração feita para um elemento sobrescreve as anteriores.
Veja um exemplo:
Finalizando por aqui esta série, mas temos mais conteúdo dela em vídeo no youtube
