Estilização de layouts em CSS

Página 23

Estilização de layouts em CSS

O CSS é uma linguagem de estilo utilizada para definir a aparência de um documento HTML. Com ele, é possível definir cores, fontes, tamanhos, espaçamentos e outros elementos visuais que compõem um layout. A estilização de layouts em CSS é uma tarefa essencial para a criação de um site ou aplicação web com uma aparência agradável e profissional.

Seletores CSS

Para estilizar um elemento HTML com CSS, é necessário selecioná-lo utilizando um seletor. Existem diversos tipos de seletores, como o seletor de tag, seletor de classe, seletor de id, seletor de atributo, entre outros.

O seletor de tag é utilizado para selecionar todos os elementos de um determinado tipo, como por exemplo:

body {
  font-family: Arial, sans-serif;
}

O seletor de classe é utilizado para selecionar elementos que possuem uma classe específica, como por exemplo:

.destaque {
  background-color: yellow;
}

O seletor de id é utilizado para selecionar elementos que possuem um id específico, como por exemplo:

#cabecalho {
  border-bottom: 1px solid black;
}

Propriedades CSS

As propriedades CSS são utilizadas para definir o estilo de um elemento selecionado. Existem diversas propriedades disponíveis, como por exemplo:

• background-color: define a cor de fundo do elemento;
• color: define a cor do texto do elemento;
• font-family: define a família de fontes utilizada pelo elemento;
• font-size: define o tamanho da fonte utilizada pelo elemento;
• margin: define as margens do elemento;
• padding: define o espaçamento interno do elemento;
• border: define a borda do elemento;
• width: define a largura do elemento;
• height: define a altura do elemento;
• display: define como o elemento deve ser exibido (block, inline, inline-block, etc);
• float: define como o elemento deve se posicionar em relação aos outros elementos;
• position: define como o elemento deve ser posicionado na página (static, relative, absolute, fixed);
• z-index: define a ordem de empilhamento dos elementos posicionados;
• opacity: define a opacidade do elemento;
• transition: define a transição de uma propriedade CSS;
• animation: define uma animação CSS.

Cascata e Especificidade

Quando várias regras CSS são aplicadas a um mesmo elemento, é necessário determinar qual delas deve prevalecer. Isso é feito através da cascata e da especificidade.

A cascata define que as últimas regras CSS declaradas têm prioridade sobre as anteriores. Por exemplo:

p {
  color: red;
}

p {
  color: blue;
}

Nesse caso, todos os parágrafos terão a cor azul, pois a segunda regra sobrescreve a primeira.

A especificidade define que as regras CSS mais específicas têm prioridade sobre as menos específicas. Por exemplo:

p {
  color: red;
}

#cabecalho p {
  color: blue;
}

Nesse caso, todos os parágrafos terão a cor vermelha, exceto os que estiverem dentro do elemento com id "cabecalho", que terão a cor azul.

Conclusão

A estilização de layouts em CSS é uma tarefa fundamental para a criação de um site ou aplicação web com uma aparência agradável e profissional. Utilizando os seletores e propriedades CSS corretamente, é possível definir cores, fontes, tamanhos, espaçamentos e outros elementos visuais que compõem um layout. Além disso, é importante entender a cascata e a especificidade para garantir que as regras CSS sejam aplicadas corretamente aos elementos selecionados.

Next page of the Free Ebook:

24Estilização de responsividade em CSS