CSS (Cascading Style Sheets) é uma linguagem de folha de estilo 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 do 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 vinculado a um ou mais arquivos CSS.
O CSS funciona associando regras de estilo a elementos HTML específicos ou a grupos de elementos, controlando aspectos como cores, fontes, espaçamento, posicionamento e muito mais.
Exemplos de como o CSS é usado:
Estilo de texto:
h1 {
color: #333;
font-size: 24px;
font-weight: bold;
}Essa regra CSS define a cor, o tamanho 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;
}Essa regra CSS define a largura de um elemento com a classe "container", centraliza-o horizontalmente na página e usa o flexbox para distribuir seus elementos filhos uniformemente.
Design responsivo:
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}Essa consulta de mídia 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 consultas de mídia permitem que os sites tenham boa aparência em monitores grandes, bem como em tablets e telefones 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;
}Essa regra CSS define a cor do plano de fundo e a cor do texto para elementos com a classe "botão" e adiciona um efeito de transição suave quando a cor do plano de fundo muda ao passar o mouse.
Esses são apenas alguns exemplos de como o CSS é usado para estilizar e formatar páginas da Web.
O CSS oferece uma ampla variedade 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 atraentes.