Embedded Files
Sintaxe de uma declaração CSS: Seletor {Propriedade: Valor; ...;}.
Explicação:
O Seletor indica o elemento HTML que pretendemos formatar.
Entre chavetas temos as declarações (uma ou mais declarações) separadas por ponto e virgula (;)
Cada declaração inclui o nome da propriedade CSS e o seu respetivo valor, separados por dois pontos (:).
O bloco de declarações encontra-se sempre entre chavetas ({ }).
Cada declaração CSS termina sempre com um ponto e virgula (;)
Vamos analisar 5 exemplos de formatação CSS e perceber os conceitos de id e classe através da utilização de #id (que deve ser único na página) e .classe (que pode ser reutilizado ao longo da página):
1: Formatar os elementos p sem distinção (afeta todos os elementos <p>);
2: Formatar o elemento que possua um id especifico (afeta SOMENTE o elemento identificado com esse id que deve ser único na página);
3: Formatar qualquer elemento identificado com uma classe especifica (afeta qualquer elemento identificado com essa classe);
4: Formatar os elementos p identificados com uma classe especifica (afeta somente os elementos <p> identificados com essa classe);
5: Formatar os elementos p identificados com uma ou mais classes especificas (afeta somente os elementos <p> identificados com essas classes);
Exemplo 1: Pretendemos formatar todos os elementos <p> (paragraph)
Exemplo 1: Pretendemos formatar todos os elementos <p> (paragraph)
CSS: p {text-align: center; color: red;}
Ao definirmos uma dada formatação para o elemento <p> todos os elementos <p> existentes na página HTML vão ficar com a mesma formatação:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Todos os parágrafos vão ser afetados pelo estilo definido em style.</p>
<p>Este também!</p>
<p>E este!</p>
</body>
</html>
Exemplo 2: Pretendemos formatar somente o elemento cujo id seja #paragrafo1
Exemplo 2: Pretendemos formatar somente o elemento cujo id seja #paragrafo1
CSS: #paragrafo1 {text-align: center; color: red;}
O seletor #id utiliza o atributo id de um elemento HTML para selecionar esse elemento especifico.
O id de um elemento deve ser único dentro da página, ou seja só pode haver um elemento com esse id - um e só um (leia de novo pf, ou verifique a leitura adicional no final da página para perceber a diferença entre ID e Classe)
O nome do id não pode começar por um número.
Para selecionar um elemento com um id especifico devemos escrever o caráter cardinal (#) seguido do id do elemento.
O estilo criado pelo seguinte código CSS (definido inline dentro do head) vai se aplicado ao elemento HTML cujo id="paragrafo1":
<!DOCTYPE html>
<html>
<head>
<style>
#paragrafo1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="paragrafo1">Olá Mundo!</p>
<p>Este parágrafo não é afetado pelo estilo.</p>
<p>Nem este!</p>
</body>
</html>
Exemplo 3: Pretendemos formatar todos os elementos identificados pela classe ".centro"
Exemplo 3: Pretendemos formatar todos os elementos identificados pela classe ".centro"
CSS: .centro {text-align: center; color: red;}
O seletor de classe seleciona os elementos com um atributo de classe especifico.
Para selecionar elementos de uma classe especifica devemos escrever o carácter ponto (.) seguido do nome da classe.
Neste exemplo todos os elementos HTML identificados pela classe ".centro" vão ser centrados e formatados a vermelho:
<!DOCTYPE html>
<html>
<head>
<style>
.centro {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="centro">Cabeçalho centrado e com a cor vermelha</h1>
<p class="centro">Parágrafo normal centrado e de cor vermelha.</p>
<p>Parágrafo normal não vai ser centrado nem ter a cor vermelha.</p>
</body>
</html>
Exemplo 4: Pretendemos formatar somente os elementos <p> identificados pela classe ".centro"
Exemplo 4: Pretendemos formatar somente os elementos <p> identificados pela classe ".centro"
CSS: p.centro {text-align: center; color: red;}
Assim somente certos elementos HTML (neste caso somente o elemento <p>) serão afetados pela classe.
Neste exemplo somente os elementos <p> identificados com a classe ".centro" serão afetados pela formatação (centrados e formatados a vermelho):
<!DOCTYPE html>
<html>
<head>
<style>
p.centro {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="centro">Cabeçalho centrado e com a cor vermelha</h1>
<!-- A classe centro não vai afetar h1 porque foi definida só para p -->
<p class="centro">Parágrafo normal centrado e de cor vermelha.</p>
<p>Parágrafo normal não vai ser centrado nem ter a cor vermelha.</p>
</body>
</html>
Exemplo 5: Pretendemos formatar somente os elementos <p> identificados pelas classes ".centro" e/ou ".largo"
Exemplo 5: Pretendemos formatar somente os elementos <p> identificados pelas classes ".centro" e/ou ".largo"
CSS: p.centro {text-align: center; color: red;}
p.largo {font-size: 300%;}
Os elementos HTML podem ser referenciados por mais do que uma classe, neste exemplo vamos utilizar 2 classes centro e largo.
Neste exemplo os elementos <p> vão ser formatados de acordo com as definições das classes ".centro" e ".largo":
<!DOCTYPE html>
<html>
<head>
<style>
p.centro {
text-align: center;
color: red;
}
p.largo {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="centro">Este cabeçalho não vai ser afetado</h1>
<!-- A classe centro não vai afetar h1 porque foi definida só para p -->
<p class="centro">Este parágrafo vai estar a vermelho e centrado.</p>
<p class="largo">Este parágrafo vai estar com uma fonte larga.</p>
<p class="centro largo">Este parágrafo vai estar a vermelho, centrado e com uma fonte larga.</p>
<p>Parágrafo normal não vai ser centrado nem ter a cor vermelha.</p>
</body>
</html>
Devemos utilizar .classes ou #id?
Na maior parte dos casos devemos utilizar classes, que são reutilizáveis, ao longo da página HTML.
A utilização de #id é mais especifica e normalmente não é tão utilizada.
Verificação de conhecimentos (se necessidade de fazer printscreens)
Elabora os seguintes exercícios "How to":
Realiza este grupo de exercícios interativos:
Leituras adicionais sobre ID, Class e div
A diferença entre ID e Class (EN): css-tricks.com/the-difference-between-id-and-class
Mais uma explicação de ID e Class com exemplos práticos (EN): stackoverflow.com/questions/544010/whats-the-difference-between-an-id-and-a-class
Utilização da tag div com formatação CSS: www.w3schools.com/tags/tag_div.ASP
Report abuse