Em suma, podemos entender que se o HTML corresponde à estrutura, o CSS corresponde à forma que a página vem a assumir.
O efeito "cascata" em um estilo CSS refere-se ao fato de que todos os elementos da estrutura HTML herdam as propriedades das estruturas superiores. Portanto, se uma propriedade como por exemplo a cor de texto color for indicada como vermelha no corpo <body> da página, essa propriedade se repetirá nos elementos inferiores.
Exemplo de pastas com arquivos de fontes no formato WOFF (Web Open Font Format)
Como usar?
O CSS pode ser usado em três situações diferentes
Dentro de uma tag HTML mediante o atributo "style"
Dentro da página HTML mediante a tag <style>
Em um arquivo externo CSS mediante o vínculo por meio da tag <link>
Atributo style
É possível alterar o estilo de um elemento agindo diretamente no tag por meio do atributo "style". No exemplo abaixo vemos a cor de um parágrafo sendo alterada
<pstyle="color: red">Texto em vermelho</p>
O resultado ficaria assim:
Texto em vermelho
A tag <style>
Outra forma de inserir o CSS na página é mediante a inclusão de uma tag <style> dentro do <head> da página HTML. Todo o elemento dentro desta tag deverá estar no formato CSS.
Exemplo:
<style>
p {
color:red;
}
</style>
Arquivo CSS externo
Uma outra maneira de incluir um CSS em uma página é mediante a tag <link> dentro do <head> da página HTML. O link deve apontar para um arquivo CSS externo, a ser vinculado à página.
Para elencar uma cor no CSS podemos atribuir ela ao texto (color) ou ao fundo (background-color). Para isso basta selecionar o elemento desejado e atribuir a propriedade.
No exemplo abaixo vamos atribuir uma cor amarela ao parágrafo e um texto marrom.
p {background-color: yellow; color: brown;}
O resultado ficará assim:
Este é um parágrafo com o fundo em amarelo e o texto em marrom
As cores podem ser codificadas de difentes maneiras. A seguir vamos expor diferentes formas de codificar o amarelo. A primeira seria pelo nome:
background-color: yellow;
background-color: yellow;
Outra maneira seria pelo código hexadecimal, precedido pelo sinal hashtag(#).
background-color: #FFFF00;
background-color: #FF0000;
Também há o código hexadecimal resumido, igualmente precedido pelo sinal hashtag(#). Todavia, cada caractere é dobrado e portanto #FF0 é interpretado como #FFFF00
background-color: #FF0;
background-color: #FF0000;
Pelo código rgb, precedido pelo comando rgb e pelo uso de parênteses.
background-color: rgb(255, 255, 0);
background-color: rgb(255, 255, 0);
Pelo código hsl, precedido pelo comando hsl e pelo uso de parênteses indicando o matiz (hue), a saturação em % (saturation) e o brilho em % (brightness).
