Folhas de estilo em cascata (CSS)

Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.

As folhas de estilos em cascata (CSS) descrevem um conjunto de regras de formatação que controlam a aparência de uma página da internet. Aprendemos anteriormente a aplicar estilos a elementos HTML utilizando a tag <style> ou o atributo style. Entretanto, inserir estilos diretamente no código HTML não é o método mais elegante para aplicação de estilos. Por exemplo, imagine que ao criar um site, você decide que todas as suas páginas deverão ter o título na cor vermelha. Algum tempo depois, você percebe que o título ficaria melhor na cor azul. Entretanto, o número de páginas de seu site cresceu. Agora você tem centenas delas e você percebe que seria inviável alterar o título de uma por uma.

O uso de folhas de estilo em cascata permite a separação de estilo e conteúdo em arquivos diferentes. Isso permite que uma grande quantidade de páginas seja alterada apenas com uma simples alteração no arquivo de estilos.

Vídeo-aula 10. O que são folhas de estilo em cascata?

Por que cascata?

Os estilos de páginas são regidos pelo chamado efeito cascata. Isso define a ordem de prioridade para estilos aplicados. Já percebeu que ao escrever um simples texto em uma página, o navegador automaticamente decide qual fonte usar e qual o tamanho. Isso ocorre porque o navegador possui uma folha de estilo própria, que é utilizada caso o desenvolvedor não informe qual estilo gostaria de aplicar.

Menor importância
l
l
l
l
l
l
l
l
l
l
l
l
Maior importância Folha de estilo do navegador

Folha de estilo do usuário (se existir)

Folha de estilo do desenvolvedor

Estilo externo (importado)

Estilo incorporado (tag <style>)

Estilo inline (atributo style)

Marcação !important

Folhas de estilo do desenvolvedor

Estilos aplicados pelo desenvolvedor têm prioridade sobre os outros. Como explicado anteriormente, estilos criados pelo desenvolvedor podem ser aplicados de três formas: estilo externo (importado), estilo incorporado (tag <style>) e aplicado diretamente no elemento HTML (atributo style).

O atributo style tem prioridade sobre os outros, e apesar de termos o utilizado em todos os exemplos anteriores, seu uso deve ser evitado. Exemplos de uso do atributo style:

<div style="height:100px">
     <p style="color:red">Meu texto</p> 
</div>

c4_s1.html

A tag <style> permite que um estilo seja aplicado a uma página inteira. No exemplo abaixo, a cor vermelha é aplicada a todos os elementos declarados com a tag <p>. Para que seja aplicada a toda a página, a tag <style> deve ser declarada no cabeçalho <head>. Entretanto, é possível declará-la em qualquer parte do código inclusive no <body>. Nesse caso, o estilo será aplicado aos elementos posteriores a declaração da tag.

<head>
     <style>
         p {
             color: red;
         }
     </style>
 </head>
 <body>
     <p>Meu texto</p> 
</body>

c4_s2.html

A terceira forma de se declarar estilos em uma página é através da importação de um arquivo no formato “.css”. Para isso, os estilos devem ser gravados em um arquivo externo e importados no documento através da tag <link>.

<link rel="stylesheet" type="text/css" href="style.css">

c4_s3.html

A tag <link> recebe os atributos rel, type e href. O atributo rel indica o relacionamento do documento atual para âncora especificada, no caso especifica que o link se refere a uma folha de estilos (stylesheet). O tipo (type) é declarado como “text/css”. Por fim, o atributo href irá especificar o endereço do nosso arquivo com estilos, que no exemplo se chama “style.css”.

Vídeo-aula 11. Fundamentos do CSS.

Sintaxe

A sintaxe do CSS é composta por um seletor, seguido por declarações, que são propriedades e valores separados por ponto e vírgula dentro do bloco.

seletor { 
    propriedade: valor; 
}

No exemplo a seguir vamos declarar estilos aplicados a dois distintos seletores: à tag <body> e à tag <p>. À tag <body> vamos atribuir a fonte “arial” com estilo itálico. À tag <p> vamos declarar a fonte “courier”. Perceba que será necessário declarar que o estilo da fonte em <p> é normal. Apesar dessa propriedade ser aplicada por padrão, como aplicamos o estilo itálico ao body, ele será automaticamente aplicado à tag <p>. Logo, para retornar ao estilo padrão será necessário aplicar o estilo normal.

/* CSS */ 
body {
     font-family: Arial;
     font-style: italic; 
} 
p {
     font-family: Courier;
     font-style: normal; 
}

c4_s4.css

Em arquivos CSS, comentários são iniciados após os caracteres /* e encerrados nos caracteres */.

/* Isto é um comentário */

c4_s5.css

Seletores

Seletores são descritos como a “alma do CSS”. Eles podem ser definidos como declarações que identificam elementos HTML. Os seletores mais simples são as tags. Por exemplo, podemos aplicar um estilo a todas as tags <p> aplicando uma regra ao seletor “p” (como demonstrado anteriormente). Entretanto, os seletores vão muito mais além do que foi apresentado até agora. É possível combinar seletores, por exemplo, digamos que você deseja aplicar uma formatação à todas as tags <p> que estejam dentro de tags <div>. Para isso, basta utilizar o seletor “div p”.

Classes (class) e identificadores (id)

Para que possamos entender melhor como utilizar seletores é necessário apresentar dois conceitos que ainda não foram explicados neste livro: classes (class) e identificadores (id). Observe o exemplo a seguir:

<!-- Arquivo exemplo.html --> 
<link href="estilo.css" type="text/css" rel="stylesheet"> 

<p>Linha 1</p> 
<p class="cor_vermelha">Linha 2</p> 
<p id="linha_3" class="cor_vermelha">Linha 3</p> 
<p id="linha_4">Linha 4</p>

c4_s6.html

Agora observe o arquivo CSS referenciado:

/* Arquivo estilo.css */ 
p { color: blue; } 

.cor_vermelha { color: red; } 

#linha_3 { font-style: italic; } 
#linha_4 { font-weight:bold; }

c4_s7.css

Observe que a cor padrão de textos presentes na tag <p> é azul. Entretanto, todos aqueles que o atributo classe “cor_vermelha” possuem a cor vermelha e não azul. Além disso, os que possuem os identificadores “linha_3” e “linha_4” estão em itálico e negrito, respectivamente. Podemos concluir então que classes e identificadores aplicam estilos a um grupo específico de elementos HTML.

Identificadores devem ser utilizados para um único elemento. Enquanto isso, classes podem ser utilizadas para um grupo de elementos. Classes ainda podem ser utilizadas para tags diferentes. Classes são declaradas no arquivo CSS iniciando com o caractere ., enquanto identificadores devem iniciar com o caractere #. Não é necessário utilizar esses caracteres na página HTML.

Tipos de seletores

Além de classes e identificadores é possível combinar seletores para se obter formatações mais avançadas. Existem diversos tipos de combinações de seletores, abaixo uma tabela com combinações simples:


Tipos	Regra	Exemplo
Seletor_A Seletor_B { … }	Seletores separados por espaço: aplica formatações a todos os seletores B que estejam dentro de seletores A.	/* <p> dentro de <div> */ div p { color: red; }
Seletor_A, Seletor_B { … }	Seletores separados por vírgula: aplica uma mesma regra a dois seletores.	/* Mesma cor aplicadas as linhas 4 e 5 */ #linha_4, #linha_5 { color: red; }
Seletor.classe { … }	Seletor e classe separados por ponto: aplica uma regra um seletor que possui uma classe específica.	/* Parágrafos que possuem a classe vermelho */ p.vermelho { color: red; }
Seletor:hover { … }	Seletor separado de um tipo por dois pontos: aplica uma formatação a um seletor quando o mouse estiver sobreposto.	/* Links */ a:hover { color: black; }

Seletor universal

O seletor “*” é chamado de seletor universal. Ele aplica regras a todo documento. Um exemplo de uso comum do seletor universal é a remoção de margens aplicadas pelos navegadores.

* { margin: 0; padding: 0 }

c4_s8.css

Principais propriedades

Existem diversas propriedades CSS que podem ser aplicadas para formatação de elementos. No decorrer deste livro já apresentamos algumas. Não temos por objetivo apresentar todas elas (você provavelmente não será capaz de decorar todas, logo recomendamos buscá-las na internet sob demanda). Entretanto apresentamos abaixo alguns exemplos que poderão ser úteis.

Propriedades para textos

Muitas das propriedades listadas aqui já foram apresentadas anteriormente. Abaixo, apresentamos um compilado com as propriedades mais utilizadas para formatação de textos.

Propriedade	Função	Exemplo
color	Aplica cor ao texto. Recebe nome de cor em inglês (ex.: blue, red, black), código hexadecimal RGB (ex.: #000000), etc.	/* Cor branca */ color:#FFFFFF;
font-size	Altera o tamanho do texto.	/* Fonte em tamanho grande */ font-size:40px;
font-style	Altera o estilo da fonte. Recebe os valores italic, normal ou oblique.	/* Itálico */ font-style:italic;
font-family	Define a família da fonte utilizada. Nome da família. Ex.: arial, helvetica, times new roman.	/* Definindo fontes */ font-family: helvetica, arial;
font-weight	Realça palavras de um texto (negrito). Recebe um valor que vai de 100 (mais fino) a 900 (mais grosso); ou bold (negrito).	/* Negrito */ font-weight: bold;
text-align	Define o alinhamento do texto. Pode ser a esquerda (left), direita (right), centralizado (center) ou justificado (justify).	/* Centralizar */ font-align:center;
line-height	Espaçamento entre linhas.	/* Dobrando o espaço entre linhas */ line-height: 2;
text-decoration	Permite a inserção de sublinhado. Overline: insere linha superior; line-through: insere linha no meio do texto; undeline: insere sublinhado; none: remove decoração.	/* Removendo sublinhado de links */ text-decoration: none;

Tamanho e margem

Propriedades de margens (internas e externas) são mais comumente usadas em divs, entretanto podem aplicadas a outros elementos HTML, como por exemplo parágrafos. Tais propriedades recebem valores numéricos seguidos de uma unidade de medida, em geral, apresentados em pixels (ex.: 200px) ou porcentagem (ex. 50%). Nesse último caso, o tamanho final baseia-se no elemento pai. Pode também receber o valor auto (definido pelo valor máximo para o local onde o elemento está posicionado).

Propriedade	Função	Exemplo
height	Define a altura de elemento.	/* Altura */ height: 200px;
max-height	Define a altura máxima. Usado em sites com design responsivo, caso a janela seja reajustada.	/* Altura máxima */ max-height: 300px;
min-height	Define a altura mínima. Usado em sites com design responsivo, caso a janela seja reajustada.	/* Altura mínima */ min-height: 100px;
width	Define a largura de um elemento.	/* Largura */ width: 800px;
max-width	Define a largura máxima. Usado em sites com design responsivo, caso a janela seja reajustada.	/* Largura máxima */ max-width: 1000px;
min-width	Define a largura mínima. Usado em sites com design responsivo, caso a janela seja reajustada.	/* Largura mínima */ width: 800px;
margin	Define as margens externas. Quando recebe quatro valores correspondem a distância para topo (1º), lado direito (2º), rodapé (3º) e lado esquerdo (4º); três valores indicam (1º) topo, (2º) esquerda e direita, e (3º) rodapé; dois valores indicam distância para o (1º) topo e rodapé e (2º) lado direito e esquerdo; um valor é válido para todos os outros.	/* Margens superior, direita, inferior e esquerda / margin: 5px 0 10px 0; / Margens superior, lados e inferior / margin: 5px 0 10px; / Margens topo/rodapé e lados / margin: 10px 0; / Todas iguais */ margin: 10px;
margin-top	Margem superior.	/* Margem superior */ margin-top: 10px;
margin-bottom	Margem inferior.	/* Margem inferior */ margin-bottom: 10px;
margin-left	Margem esquerda.	/* Margem esquerda */ margin-left: 10px;
margin-right	Margem direita.	/* Margem direita */ margin-right: 10px;
padding	Margem interna. Mesmas regras aplicadas à margin são válidas.	/* Margens internas */ padding: 10px;
padding-top	Margem interna superior.	/*Padding superior*/ padding-top: 10px;
padding-bottom	Margem interna inferior.	/* Padding inferior*/ padding-bottom: 10px;
padding-left	Margem interna esquerda.	/* Padding esquerdo*/ padding-left: 10px;
padding-right	Margem interna direita.	/* Padding direito*/ padding-right: 10px;

Fundo

As propriedades que gerenciam os planos de fundo (background) permitem a inserção de cores ou imagens, que podem ser repetidas seguindo diversos padrões. Planos de fundo podem ser aplicados a divs, spans, tabelas e outros elementos. A propriedade genérica que gerencia os planos de fundo é a background, entretanto é mais comum utilizar outras versões específicas dessa propriedade.

Propriedade	Função	Exemplo
background-color	Insere uma cor no background.	/* Cor azul */ background-color: #0000FF;
background-image	Insere uma imagem como background. Requer o endereço de uma imagem.	/* Imagem de fundo */ background-image: url(“imagem.jpg”);
background-repeat	Define se a imagem irá se repetir no background. Requer a propriedade background-image declarada anteriormente. Recebe os valores: repeat (repetição nos eixos x e y), no-repeat (sem repitção), repeat-x e repeat-y.	/* Impedir repetição */ background-repeat: no-repeat;
background-position	Define o posicionamento de uma imagem no background. Requer a propriedade background-image declarada anteriormente. Recebe as distâncias x e y, ou as palavras-chave: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, top, right, bottom, left.	/* Margem para background */ background-position: 100px 200px;
background-attachment	Permite a fixação ou rolagem de uma imagem no background. Requer a propriedade background-image declarada anteriormente.	/* Imagem fixa */ background-attachment: fixed;

Anteriormente descrevemos que cores podem ser inseridas de acordo com seu nome em inglês ou baseados no código hexadecimal. Cores também podem ser inseridas baseado o código RGB, RGBA, HSL e HSLA.

CSS3

A versão 3 do CSS trouxe algumas novidades, como por exemplo: selecionar primeiro e último elemento; selecionar elementos pares ou ímpares; selecionar elementos específicos de um determinado grupo de elementos; gradiente em textos e elementos; bordas arredondadas; sombras em texto e elementos; manipulação de opacidade; controle de rotação; controle de perspectiva; animação; e estruturação independente da posição no código HTML.

Vídeo-aula 12. CSS3.

Gradiente

Gradiente, também conhecido como degradê (do francês dégradé), é efeito de transição de uma cor para outra. Em páginas HTML, esse efeito era anteriormente feito com imagens. Abaixo um exemplo de degradê horizontal da cor preta para a cor branca.

A propriedade responsável por esse efeito é background-image, usando a propriedade “-linear-gradient” que receberá duas cores como entrada. Para utilizá-la é necessário realizar algumas modificações no código, uma vez que cada navegador tem suas especificidades:

<style> 
#degrade{
    width:200px;
    height:200px;
     
    /* Firefox */
    background-image: -moz-linear-gradient(green, red);  

    /* Safari, Chrome  */
    background-image: -webkit-linear-gradient(green, red); 

    /* Opera  */
    background-image: -o-linear-gradient(green, red);
} 
</style>

c4_s9.html

O código acima aplica um efeito degradê vertical da cor verde para a cor vermelha. É recomendado utilizar variações de cores suaves ao aplicar gradiente (diferente do que foi aplicado anteriormente).

Bordas arredondadas

Bordas são definidas pela propriedade border, que recebe um valor em pixels, um tipo (doted, solid, etc.) e uma cor. CSS3 trouxe a possibilidade de inserir bordas arredondadas através da propriedade border-radius.

No exemplo anterior vamos inserir uma borda sólida e depois aplicar a propriedade de arredondamento de bordas.

<style> 
#degrade{
     width:200px;
     height:200px; 

     /* Firefox */
     background-image: -moz-linear-gradient(green, red); 
     
     /* Safari, Chrome  */
     background-image: -webkit-linear-gradient(green, red); 

     /* Opera  */
     background-image: -o-linear-gradient(green, red);
     border: 10px solid black;
     border-radius: 40px;
} 
</style>

<div id="degrade"></div>

c4_s10.html

Sombras

Sombras podem ser aplicadas tanto em divs (box-shadow) quanto em textos (text-shadow). A propriedade box-shadow recebe como valores a distância de sombra horizontal, sombra vertical, a distância de desfoque e uma cor.

<style> 
 #degrade{     
   width:200px;     
   height:200px;     
   background-image: -moz-linear-gradient(green, red);    

   /* Firefox */     
   background-image: -webkit-linear-gradient(green, red);   

   /* Safari, Chrome  */     
   background-image: -o-linear-gradient(green, red);     

   /* Opera  */     
   border: 5px solid black;     
   border-radius: 40px;     
   box-shadow: 10px 10px 20px #333; 
 } 
</style> 

<div id="degrade"></div>

c4_s11.html

A propriedade text-shadow recebe os mesmos valores de entrada de box-shadow. No exemplo a seguir, demonstraremos a aplicação de sombras em um parágrafo.

Parte inferior do formulário 
<style> 
p {     
    text-shadow: 1px 1px 3px #333; 
} 
</style>   

<p>Aplicando sombras</p>

c4_s12.html

Transparências

CSS3 permite a inserção de transparências em backgrounds, por meio do padrão RGBA. O padrão de cores pode ser utilizado em diversas propriedades, como por exemplo, background-color. RGBA recebe quatro valores: os níveis de cores vermelho, verde e azul (valores de 0 a 255), e o valor de opacidade, que varia de 0 a 1 (sendo 0 transparente e 1 opaco).

background-color: rgba(Vermelho, Verde, Azul, Opacidade)

No exemplo a seguir demonstraremos duas divs se sobrepondo. Vamos colorir a div A de azul e a div B de verde. As duas divs terão opacidade de 50 % (valor alfa de 0.5).

<style>     
div{ 
  position: absolute; 
  width:200px; 
  height:200px; 
}     

#a{ background-color:rgba(0,0,255,0.5); }  
#b{ background-color:rgba(0,255,0,0.5); left:100px;} 
</style>   

<div id="a">     

  <p>Observe que metade da div A é sobreposta pela div B</p> 

</div>   

<div id="b"></div>

c4_s13.html

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:

Web Design: Construa Sites com PHP, HTML, CSS e JavaScriptCurso completo para aprender a construir sites usando as linguagens web mais conceituadas do mercado

Web Design com Adobe XD, Bootstrap, GIMP, HTML e PhotoshopCrie sites com design elegante em poucas linhas de código usando Adobe XD, Bootstrap 4, FontAwesome e DataTables

Introdução à linguagem JavaScriptCurso para aprender programação front-end usando a linguagem JavaScript

Livro Introdução à Programação para Web para Bioinformática: HTML, CSS, PHP & JavaScript

_{Capítulo 1}
Introdução ao HTML

_{Capítulo 2}
Fundamentos do HTML

_{Capítulo 3}
Estrutura de páginas

_{Capítulo 4}
Folhas de Estilo em Cascata (CSS)

_{Capítulo 5}
Bootstrap

_{Capítulo 6}
Iniciando a construção de um Website

_{Capítulo 7}
Introdução ao PHP

_{Capítulo 8}
Fundamentos do PHP

_{Capítulo 9}
Transformando um Website em dinâmico

_{Capítulo 10}
Introdução ao JavaScript

_{Capítulo 11}
Fundamentos do JavaScript

_{Capítulo 12}
jQuery

_{Capítulo 13}
Bootstrap JavaScript

_{Capítulo 14}
D3.js

_{Capítulo 15}
3Dmol

_{Capítulo 16}
Projeto Final

Epílogo
Referências Bibliográficas

Cite:
MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .