CSS: regras, seletores, propriedades

CSS (Cascading Style Sheets) é uma linguagem de estilo usada para projetar páginas da web. Ele permite separar o conteúdo da página de sua apresentação, facilitando o trabalho com layouts e design.

CSS consiste em um conjunto de regras, cada uma das quais determina como um determinado elemento em uma página da web deve ser estilizado. As regras incluem selecionar elementos usando seletores e definir propriedades nesses elementos. Vejamos os principais componentes do CSS – regras, seletores e propriedades.

Regras

Uma regra CSS consiste em um seletor e um bloco de propriedades. A regra informa ao navegador quais elementos da página da Web devem ser estilizados e como eles devem ser estilizados. Cada regra começa com um seletor que seleciona os elementos e termina com um bloco de propriedades que se aplicam aos elementos selecionados.

Aqui está um exemplo de uma regra simples:

Aqui `p` é um seletor que seleciona todos os parágrafos da página. Dentro do bloco de propriedades, os estilos dos parágrafos são definidos: cor do texto azul e tamanho da fonte de 16 pixels.

Seletores

Os seletores permitem selecionar um ou mais elementos em uma página da Web para aplicar determinados estilos. Os seletores podem ser muito simples ou mais complexos e permitem selecionar elementos com base em seu tipo, classes, IDs, atributos e até mesmo sua localização na página.

Exemplos de seletores simples:

• `p` – seleciona todos os parágrafos.
• `.header` – seleciona todos os elementos com a classe “header”.
• `#logo` – seleciona o elemento com id “logo”.

Exemplos de seletores mais complexos:

• `ul li` – seleciona todos os elementos da lista `li` que são filhos do elemento `ul`.
• `input` – seleciona todos os campos de texto na página.

Propriedades

As propriedades determinam a aparência dos elementos selecionados usando seletores. Cada propriedade tem um valor que especifica a aparência do elemento.

Exemplos de propriedades:

• `color` – define a cor do texto do elemento.
• `font-size` – define o tamanho da fonte.
• `background-color` – define a cor de fundo do elemento.
• `border` – define o estilo, espessura e cor da borda do elemento.

Aqui está um exemplo de uso de propriedades:

Esta regra seleciona todos os cabeçalhos h1 e define a cor do texto como vermelho, tamanho da fonte 24px, fundo amarelo e borda preta com 1px de espessura.

Combinadores

Os combinadores em CSS permitem combinar seletores e criar regras mais específicas. Aqui estão alguns exemplos de combinadores:

• `div p` – seleciona todos os elementos `p` que são filhos de elementos `div`.
• `.menu-item > a` – seleciona todos os elementos `a` que são descendentes diretos de elementos com a classe `.menu-item`.
• `h2 + p` – seleciona todos os elementos `p` que vêm diretamente após os elementos `h2`.

O uso de combinadores permite ajustar como os estilos são aplicados aos elementos em uma página.

Pseudoclasses e pseudoelementos

Pseudoclasses e pseudoelementos permitem selecionar elementos que estão em determinados estados ou possuem partes específicas. Eles são especificados após o seletor principal e são indicados por dois pontos.

Exemplos de pseudoclasse:

• `:hover` – Aplica estilos quando o cursor passa sobre um elemento.
• `:active` – aplica estilos quando o elemento está ativo (clicando em um botão, por exemplo).
• `:focus` – aplica estilos quando o elemento tem foco (por exemplo, um campo de entrada quando é clicado).

Exemplos de pseudo elementos:

• `::before` – adiciona conteúdo antes do conteúdo do elemento selecionado.
• `::after` – adiciona conteúdo após o conteúdo do elemento selecionado.
• `::first-line` – aplica estilos à primeira linha de texto no elemento.
• `::first-letter` – aplica estilos à primeira letra do texto no elemento.

Importar arquivos CSS

Para tornar seu código mais estruturado e fácil de manter, o CSS permite que você importe estilos de outros arquivos. Isso é feito com o comando `@import`, que pode ser colocado no topo do arquivo CSS.

Dessa forma, você pode dividir os estilos em diferentes arquivos, o que facilitará a edição e reduzirá o tamanho de cada um.

Cascata e prioridades

O CSS é baseado no princípio de cascata, o que significa que os estilos podem ser definidos em diferentes locais e fontes, e o navegador decidirá qual estilo aplicar com base nas prioridades. Cascata inclui:

• Precedência do seletor: O navegador respeita a especificidade dos seletores. Quanto mais específico o seletor, maior sua precedência.
• Ordem do estilo: se duas regras tiverem a mesma especificidade, a última regra será aplicada ao elemento.
• Importância do estilo: Você pode definir a importância de um estilo usando `!important`. Isso faz com que o estilo tenha precedência.

É importante usar `!important` com cuidado para evitar futuros problemas de manutenção de código.

Consultas de mídia

O CSS permite que os estilos se adaptem com base nas configurações do dispositivo, como largura e resolução da tela. As consultas de mídia permitem que você crie designs responsivos com boa aparência em uma variedade de dispositivos, de telefones celulares a desktops.

Exemplo de consulta de mídia:

Neste exemplo, os estilos serão aplicados aos elementos da página quando a largura da tela não exceder 768 pixels.

O CSS é uma poderosa ferramenta de estilo da Web e esses princípios básicos o ajudarão a começar a usá-lo para criar designs bonitos e funcionais. A prática e a experiência irão ajudá-lo a melhorar suas habilidades e se tornar um desenvolvedor front-end experiente.