Cascading Style Sheets, ou Folhas de Estilo em Cascata, é um linguagem que permite a personalização de elementos de um documento HTML.
A linguagem CSS é orientada a seleção, ou seja, você seleciona um ou mais elementos do documento HTML e altera suas propriedades/características - dimensão, cor de fundo, cor de texto, etc.
- Você seleciona o elemento, podendo ser uma tag
h1{ ... }, class.elemento { ... }, id#elemento { ... }, etc. - Altera as propriedades do elemento selecionado, no caso a seguir, a seleção é por tag e altero a cor de fundo
div { background-color: #000; }.
Nota: A seguir explico como incorporar CSS a seu documento HTML.
Existem três maneiras de realizar a personalização de elementos em documentos HTML, sendo elas: direta, incorporada no documento e em um documento externo.
É a personalização como atributo do elemento HTML.
<h1 style="font-family: Arial; font-size: 24px; color: pink">Um título qualquer</h1>A favor
- Por ser diretamente no código não gera conflitos de especificidade.
Contra
- Não permite o reaproveitamento do estilo nos elementos do documento HTML.
- Não permite compartilhar o código com múltimos documentos.
Permite a personalização do documento a partir de uma única declaração no cabeçalho do documento HTML.
<html>
<head>
...
<style>
h2 {
font-family: Arial;
font-size: 18px;
color: lightgray;
}
</style>
</head>
<body>
<!--
Todos os elementos <h2>
receberão a personalização.
-->
<h2>Um título qualquer</h2>
<h2>Outro título qualquer</h2>
</body>
</html>A favor
- Permite o reaproveitamento do estilo nos elementos do documento HTML.
Contra
- Não permite compartilhar o código com múltiplos documentos.
- Códigos sem planejamento costumam ter conflitos de especificidade.
Permite a personalização de múltiplos documentos HTML a partir de um único documento de estilização CSS.
index.html
<html>
<head>
...
<!--
O documento CSS é importado através
da tag <link> e personaliza os elementos
do documento HTML.
-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Um título qualquer</h2>
<h2>Outro título qualquer</h2>
</body>
</html>sobre.html
<html>
<head>
...
<!--
O documento CSS é importado através
da tag <link> e personaliza os elementos
do documento HTML.
-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Um título qualquer</h2>
<h2>Outro título qualquer</h2>
</body>
</html>style.css
h2 {
font-family: Arial;
font-size: 18px;
color: lightgray;
}Nota: Nesse exemplo ambos documentos HTML serão personalizado pelo documento style.css.
A favor
- Permite o reaproveitamento do estilo nos elementos do documento HTML.
- Permite compartilhar o código com múltiplos documentos.
Contra
- Códigos sem planejamento costumam ter conflitos de especificidade.
- Gera uma requisição para cada documento de personalização, o que aumenta o tempo de carregamento.
Seleciona todos os elementos do documento HTML e alteras suas propriedades.
* {
margin: 0;
padding: 0;
}Seleciona todos os elementos <p>.
p {
margin: 0;
padding: 0;
}Nota: Basta substituir a tag que deseja selecionar para alterar a seleção.
Seleciona todos os elementos <a target="_blank">. Nesse caso leva em consideração o atributo target idependente do valor interno.
a[target] {
background-color: red;
}Outras opções de seleção...
/* Começa com # */
a[href^="#"] {
background-color: yellow;
}
/* Começa com https */
a[href^="https"] {
background-color: green;
}
/* Começa com .br */
a[href$=".br"] {
background-color: gray;
}
/* Em qualquer local possui a palavra-chave house */
a[href*="house"] {
background-color: purple;
}
/* Cujo o valor é _blank */
a[target="_blank"] {
border-bottom: 2px solid red;
}Seleciona todos os elementos que possuam o nome de class declarados.
.titulo {
font-family: Arial, sans-serif;
color: gray;
}Seleciona o elemento que possui o nome de id declarado.
#nav {
background-color: black;
padding: 25px;
margin: 0;
}Nota: Quando se identifica um elemento, através de uma id, basicamente definimos um nome único para o elemento, sendo assim, ele não pode se repetir na página. Por conta desse fato, o código CSS, quando seleciona uma id, normalmente não pode ser reaproveitado.
p, span, address, q {
color: black;
font-family: Arial, sans-serif;
font-size: 16px;
}