Cascading Style Sheets (CSS) é uma linguagem de programação baseada em regras, desenvolvida pelo World Wide Web Consortium (W3C) em 1996, por um motivo simples. A HyperText Markup Language (HTML), que é usada para formatar e vincular conteúdos nas páginas da web, não foi criada para permitir estilos avançados ou capacidades de layout.
Por exemplo, a introdução da tag <font> na versão 3.2 do HTML foi uma tentativa de permitir o estilo de textos, mas os designers amadores abusaram dela, e não havia opções de fallback como as que existem hoje em CSS. A melhor prática atual é, portanto, manter a formatação (HTML) e o estilo (CSS) separados.
CSS não é tecnicamente uma necessidade, mas uma página da web que contenha apenas elementos HTML pareceria muito simples e desatualizada. Continue lendo para saber mais sobre o CSS.
A diferença entre uma página da web que implementa CSS e uma que não implementa é enorme e certamente perceptível.
Em algum momento, você pode ter visto um site que falhou ao carregar completamente, exibindo apenas um fundo branco simples com texto preto e links azuis sublinhados. Isso significa que a parte CSS da página da web não foi carregada corretamente ou não existe de forma alguma.
Antes de usar o CSS, todo estilo tinha que ser incluído inline na marcação HTML. Isso significava que os desenvolvedores web precisavam descrever a cor, o tamanho da fonte, os alinhamentos e tudo mais para cada bloco de texto na página.
O CSS permite que você estilize uma lista de regras de design em um arquivo separado, que são referenciadas na marcação HTML. Isso torna a marcação HTML real muito mais limpa e fácil de manter.
Em resumo, o CSS elimina a necessidade de descrever repetidamente como cada elemento individual deve se parecer. Isso economiza tempo, reduz o código e torna-o menos propenso a erros.
O CSS também permite que você priorize múltiplos estilos em cada página HTML e até em todo o site, com exceções para diferentes tamanhos de tela, tornando as possibilidades de personalização quase infinitas.
O CSS usa uma sintaxe simples e legível por humanos, com um conjunto de regras que a governam. Como mencionamos antes, o HTML nunca foi projetado para usar elementos de estilo, mas apenas para descrever a formatação do texto. Por exemplo: <p>Este é um parágrafo.</p>.
Mas como você estiliza o parágrafo? A estrutura da sintaxe do CSS é bem simples. Ela tem um seletor e um bloco de declaração. Você seleciona um elemento e depois declara o que quer fazer com ele. Bem direto, certo?
No entanto, existem regras que você deve lembrar. As regras de estrutura são bem simples, então não se preocupe.
O seletor aponta para os elementos HTML que você deseja estilizar. O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.
Cada declaração inclui o nome de uma propriedade CSS e um valor, separados por dois pontos. Uma declaração CSS sempre termina com ponto e vírgula, e os blocos de declaração são cercados por chaves.
Vamos ver um exemplo:
p {
color: blue;
font-weight: bold;
}
Todos os elementos <p> serão coloridos de azul e em negrito.
Em outro exemplo, todos os elementos <p> serão alinhados ao centro, terão 16 pixels de largura e cor de fundo rosa.
p {
text-align: center;
width: 16px;
background-color: pink;
}
Vamos abordar brevemente cada estilo. Para uma explicação detalhada de cada método, haverá um link abaixo da visão geral.
Vamos começar falando sobre o estilo interno. Estilos CSS feitos dessa maneira são carregados sempre que um site inteiro é atualizado, o que pode aumentar o tempo de carregamento. Além disso, você não poderá usar o mesmo estilo CSS em várias páginas, pois ele está contido dentro de uma única página. No entanto, isso também traz benefícios. Ter tudo em uma página facilita o compartilhamento do modelo para uma prévia.
O método externo pode ser o mais conveniente. Tudo é feito externamente em um arquivo .css. Isso significa que você pode fazer todo o estilo em um arquivo separado e aplicar o CSS a qualquer página que desejar. O estilo externo também pode melhorar o tempo de carregamento.
Por último, vamos falar sobre o estilo inline de CSS. O estilo inline funciona com elementos específicos que possuem a tag <style>. Cada componente deve ser estilizado, então pode não ser a melhor ou mais rápida maneira de lidar com o CSS – na verdade, é muito semelhante aos estilos inline do HTML que o CSS foi projetado para substituir. Mas pode ser útil. Por exemplo, se você quiser mudar um único elemento rapidamente, visualizar as mudanças ou talvez se você não tiver acesso aos arquivos CSS.
Vamos resumir o que aprendemos aqui sobre o CSS e como ele ajuda na estética das páginas da web: