CSS significa Cascading Style Sheets, ou Folhas de Estilo em Cascata.
É a linguagem responsável pela aparência e apresentação das páginas HTML.
| Tecnologia | Responsabilidade |
|---|---|
| HTML | Estrutura e conteúdo. |
| CSS | Design e aparência. |
| JavaScript | Interatividade e comportamento. |
Antigamente o HTML era utilizado também para definir aparência.
<font color="red">
Texto vermelho
</font>
Essa prática dificultava a manutenção dos sites.
O CSS separa o conteúdo do design.
p {
color: red;
}
O mesmo estilo pode ser aplicado em várias páginas.
O CSS utiliza regras formadas por seletor, propriedade e valor.
seletor {
propriedade: valor;
}
Exemplo:
h1 {
color: blue;
}
| Tipo | Descrição |
|---|---|
| Inline | CSS dentro da tag HTML. |
| Interno | CSS dentro do elemento style. |
| Externo | Arquivo separado .css. |
<p style="color:red">
Texto
</p>
Indicado apenas para pequenos testes.
<style>
p {
color:red;
}
</style>
Fica dentro do arquivo HTML.
É a forma mais utilizada em projetos profissionais.
<link
rel="stylesheet"
href="style.css">
HTML
<h1>
Minha Página
</h1>
CSS
h1 {
color: blue;
font-size: 40px;
}
| Vantagem | Benefício |
|---|---|
| Organização | Separação entre código e design. |
| Reutilização | Mesmo estilo em várias páginas. |
| Manutenção | Alterações mais rápidas. |
| Responsividade | Adaptação para dispositivos. |
Atualmente todos os sites profissionais utilizam CSS para criar interfaces modernas.
| Erro | Problema |
|---|---|
| Muito CSS inline | Difícil manutenção. |
| CSS desorganizado | Conflitos de estilos. |
| Não testar responsividade | Problemas no mobile. |
| Conceito | Descrição |
|---|---|
| CSS | Linguagem de estilos. |
| Seletor | Escolhe o elemento. |
| Propriedade | Define característica. |
| Valor | Define configuração. |