CSS (Folhas de Estilo em Cascata)

CSS (Cascading Style Sheets) é uma linguagem de folha de estilos usada para descrever a apresentação e a formatação de um documento escrito em HTML ou XML. Ela permite que os desenvolvedores separem o design visual e o layout de uma página da web de sua estrutura e conteúdo.

Ao separar o design visual (CSS) da estrutura e conteúdo (HTML), os usuários podem simplesmente alterar o arquivo CSS para obter um design completamente diferente.

O site CSS Zen Garden demonstra isso. O site lista variações de seu design. A única coisa que cria essa mudança visual é o uso de um arquivo CSS diferente.

A maioria dos sites usa CSS. Na seção head do HTML de uma página, há um URL que vincula a um ou mais arquivos CSS.

O CSS funciona associando regras de estilo a elementos HTML específicos ou grupos de elementos, controlando aspectos como cores, fontes, espaçamento, posicionamento e muito mais.

Exemplos de como o CSS é usado:

Estilização de texto:

h1 {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

Esta regra CSS define a cor, o tamanho da fonte e a espessura da fonte para todos os elementos da página.

Layout e posicionamento:

.container {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

Esta regra CSS define a largura de um elemento com a classe “container”, o centraliza horizontalmente na página e usa flexbox para distribuir seus elementos filhos uniformemente.

Design responsivo:

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Esta media query CSS aplica estilos a elementos com a classe “column” quando a largura da tela é de 600 pixels ou menos, tornando o layout responsivo a diferentes tamanhos de tela.

As media queries permitem que os sites fiquem bem em monitores grandes, bem como em tablets e celulares.

Efeitos especiais: Animação e transições:

.button {
  background-color: #007bff;
  color: #fff;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

Esta regra CSS define a cor de fundo e a cor do texto para elementos com a classe “button” e adiciona um efeito de transição suave quando a cor de fundo muda ao passar o mouse.

Estes são apenas alguns exemplos de como o CSS é usado para estilizar e formatar páginas da web.

O CSS oferece uma ampla gama de propriedades e seletores que permitem aos desenvolvedores criar designs visualmente atraentes e responsivos, aprimorando a experiência do usuário e tornando os sites mais envolventes.