O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para descrever a apresentação de um documento escrito em HTML (HyperText Markup Language). Ele define como os elementos HTML devem ser exibidos na tela, no papel ou em outros meios de saída. O CSS permite separar o conteúdo de um documento da sua apresentação, facilitando a manutenção e a atualização do design de um site.
Como funciona o CSS?
O CSS funciona aplicando regras de estilo aos elementos HTML. Essas regras são escritas em um arquivo separado, chamado arquivo CSS, que é vinculado ao documento HTML por meio de uma tag ou diretamente no cabeçalho do documento HTML, usando a tag . As regras de estilo são compostas por um seletor e uma declaração.
O seletor é usado para selecionar os elementos HTML aos quais a regra de estilo será aplicada. Pode ser um elemento específico, uma classe, um ID ou uma combinação desses elementos. A declaração define como o elemento selecionado deve ser estilizado e é composta por uma propriedade e um valor.
Por exemplo, para estilizar todos os parágrafos de um documento HTML, podemos usar o seletor “p” e definir a propriedade “color” com o valor “red” para tornar o texto vermelho. Essa regra seria escrita da seguinte forma:
p {
color: red;
}
Tipos de seletores CSS
O CSS oferece uma variedade de seletores que podem ser usados para selecionar elementos HTML de diferentes maneiras. Alguns dos seletores mais comuns incluem:
- Seletor de elemento: seleciona elementos com base no nome do elemento. Por exemplo, “p” seleciona todos os parágrafos.
- Seletor de classe: seleciona elementos com base no valor do atributo “class”. Por exemplo, “.destaque” seleciona todos os elementos com a classe “destaque”.
- Seletor de ID: seleciona um elemento com base no valor do atributo “id”. Por exemplo, “#titulo” seleciona o elemento com o ID “titulo”.
- Seletor de descendente: seleciona elementos que são descendentes de outro elemento. Por exemplo, “div p” seleciona todos os parágrafos que são descendentes de uma div.
- Seletor de filho direto: seleciona elementos que são filhos diretos de outro elemento. Por exemplo, “div > p” seleciona todos os parágrafos que são filhos diretos de uma div.
Propriedades CSS
O CSS oferece uma ampla variedade de propriedades que podem ser usadas para estilizar elementos HTML. Algumas das propriedades mais comuns incluem:
- color: define a cor do texto.
- font-size: define o tamanho da fonte.
- font-family: define a família de fontes a ser usada.
- background-color: define a cor de fundo.
- margin: define as margens externas de um elemento.
- padding: define o espaço interno entre o conteúdo e a borda de um elemento.
- border: define a borda de um elemento.
- width: define a largura de um elemento.
- height: define a altura de um elemento.
Cascata e herança
O termo “cascata” no nome CSS refere-se à maneira como as regras de estilo são aplicadas aos elementos HTML. Quando várias regras de estilo se aplicam a um elemento, a cascata determina qual regra deve ser aplicada.
A cascata é baseada em três fatores: a origem da regra, a especificidade do seletor e a ordem de declaração. A origem da regra pode ser o arquivo CSS externo, o estilo embutido no documento HTML ou o estilo definido diretamente no elemento HTML. A especificidade do seletor é uma medida de quão específico é o seletor usado na regra. Quanto mais específico for o seletor, maior será sua especificidade. A ordem de declaração refere-se à ordem em que as regras são declaradas.
A herança é outro conceito importante do CSS. Algumas propriedades CSS são herdadas pelos elementos filhos dos elementos pai. Isso significa que, se uma propriedade não for definida para um elemento filho, ela será herdada do elemento pai. Por exemplo, se definirmos a cor do texto para um elemento pai, todos os elementos filhos desse elemento terão a mesma cor de texto, a menos que seja especificado de outra forma.
Media queries
As media queries são uma funcionalidade do CSS que permite aplicar estilos diferentes com base nas características do dispositivo de visualização, como a largura da tela. Isso é especialmente útil para criar designs responsivos, que se adaptam automaticamente a diferentes tamanhos de tela.
As media queries são escritas usando a palavra-chave “@media” seguida de uma condição. Por exemplo, podemos usar a seguinte media query para aplicar estilos diferentes quando a largura da tela for menor que 600 pixels:
@media (max-width: 600px) {
/* Estilos para telas menores que 600 pixels */
}
Dentro das media queries, podemos definir qualquer regra de estilo que desejarmos. Isso nos permite criar layouts flexíveis que se ajustam automaticamente ao tamanho da tela.
Conclusão
O CSS é uma linguagem de estilo poderosa que permite controlar a aparência dos elementos HTML. Com suas regras de estilo, seletores e propriedades, podemos criar designs atraentes e responsivos para nossos sites. Ao separar a apresentação do conteúdo, o CSS facilita a manutenção e a atualização do design, tornando-o uma ferramenta essencial para qualquer desenvolvedor web.