Daniel Faria

Website pessoal

Introdução às Folhas de Estilo CSS

13/10/2019

CSS é a sigla para Cascading Style Sheets. São arquivos que contém regras para controlar a aparência das páginas web. Através das CSS definimos as cores de página, a posição de elementos, efeitos de transição, etc.

Com a evolução dos navagadores, houve oportunidade para as páginas web ficarem mais bonitas e elegantes, mas o HTML não foi projetado para estilizar sites. Por isso o CSS foi criado.

A escrita da CSS é simples. Basta saber a qual objeto aplicar as regras de descrevê-las. A sintaxe básica da CSS é como no exemplo abaixo:

seletor{
       propriedade:valor;
}

Onde seletor pode ser um elemento do HTML (a, p, span, entre outros), um identificador (id) ou uma classe (class).  Como já vimos, na seção HTML, os documentos html definem sua estrutura através de marcas (tags) como por exemplo:

<p> - Parágrafo
 
<a> - Links 
 
<ul> - Listas não-ordenadas
 
<li> - Itens de lista
 
<div> - Elemento para criar divisões na página (útil para layouts)
 
<span> - Elemento usado em frases
 

O CSS pode usar qualquer tag como seletor e aplicar as formatações que definirmos.

Classes e IDs

Quando queremos aplicar estilos a todos os elementos de um documento html usamos os nomes das tags como seletor. O exemplo abaixo define a cor azul para todos os parágrafos:

p{
   color:blue;
}
 

Porém, quando queremos que os efeitos se apliquem a um grupo de elementos, temos que inserir o atributo class ao elemento HTML.


Um exemplo prático!

<!DOCTYPE html>
<html>
<
head>
<title>Curso de CSS aula 1</title>
</head>
<body>
<p>Um exemplo de parágrafo</p>
<p class="verde">Um outro exemplo de parágrafo</p>
<p class="verde">Mais um exemplo de parágrafo, mas com a cor verde</p>
</body>
</html>

Agora veja uma folha de estilo para mudar a cor dos parágrafos que receberam a classe verde:

 

.verde{
       color:green;
}