O CSS é uma linguagem essencial para o desenvolvimento web, permitindo definir a aparência e o layout das páginas HTML. Com ele, é possível personalizar cores, fontes, tamanhos, espaçamentos, posicionamentos e muitos outros aspectos visuais de um site.
Desde seu lançamento em 1996, o CSS tem sido amplamente adotado para separar a estrutura do conteúdo (HTML) da estilização, tornando o desenvolvimento mais organizado, flexível e eficiente.
Neste artigo, vamos entender como o CSS funciona, suas principais regras de sintaxe e os diferentes seletores utilizados para estilizar páginas web.
1 – O que é CSS?
O CSS (Cascading Style Sheets, que traduzido significa Folhas de Estilo em Cascatas) é uma linguagem de estilização, geralmente, utilizada em conjunto com HTML na construção de páginas web. Essa linguagem permite personalizar fontes e cores, definir espaçamentos entre textos, posicionar elementos na tela, aplicar bordas e elevações, entre outros.
O CSS foi desenvolvido em 1996 pelo W3C (World Wide Web Consortium), com o intuito de fornecer recursos de formatação visual para as páginas web, algo que o HTML não atende, pois ele foi projetado para estruturar as páginas.
Dessa forma, ao combinarmos CSS e HTML, conseguimos separar o código de personalização visual do código estrutural. Isto proporciona uma maior organização em nossos projetos e facilita sua manutenção em longo prazo. Inclusive, a utilização do CSS é vista como uma boa prática de desenvolvimento.
2 – Como funciona o CSS?
O CSS é uma ferramenta fundamental para a construção de sites com visuais modernos e responsivos. Sua estrutura de sintaxe é a seguinte:
Seletor {
Propriedade: Valor
}
Na prática, teremos um código semelhante a esse aqui:
.elementoHTML {
atributo1: valor;
atributo2: valor;
atributo3: valor;
}
Conforme podemos observar nos modelos acima, os códigos CSS são baseados em seletores de elementos e blocos de declaração delimitados por chaves.
Enquanto os seletores apontam para os elementos HTML que serão estilizados, os blocos de declaração possuem os atributos que serão modificados no elemento referenciado pelo seletor.
Dentro dos blocos, cada declaração possui um nome da propriedade CSS e um valor, separados por dois pontos. As declarações sempre terminam com um ponto-e-vírgula, independentemente de quantas declarações houver dentro do bloco.
2.1 – Exemplo prático
Para que possamos compreender com maior clareza o que é o CSS e como ele funciona, vamos ver um exemplo simples e prático.
Considere uma página index.html com o seguinte código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de CSS</title>
</head>
<body>
<h1>Bem-vindo ao CSS!</h1>
<p>Este é um exemplo de como o CSS estiliza uma página HTML.</p>
</body>
</html>O resultado desse documento HTML, sem nenhum tipo de estilização CSS, é esse aqui:
Observe que o HTML apresenta cada elemento na tela, sequencialmente, com uma formatação padrão. Agora, vamos atualizar o documento acima e inserir uma tag <link> no seu cabeçalho para referenciarmos o arquivo CSS que possui a estilização da página:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bem-vindo ao CSS!</h1>
<p>Este é um exemplo de como o CSS estiliza uma página HTML.</p>
</body>
</html>Vamos considerar esse código para o arquivo styles.css:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #3498db;
}
p {
font-size: 18px;
color: #333;
}Agora, o resultado é esse aqui:
Observe a diferença entre esta página que possui estilização CSS e a página anterior que não possui nenhum tipo de estilização.
No CSS, referenciamos os elementos HTML pelos seus nomes: <body>, <h1> e <p>. Nossa personalização aplicou ao <body> um fundo cinza, alterou a fonte dos textos e alinhou-lhes ao centro da página. No título da página, representado pelo elemento <h1>, aplicamos uma coloração azul, enquanto no parágrafo, representado pelo elemento <p>, definimos um tamanho de 18 pixels e aplicamos uma cor personalizada.
Até agora, referenciamos os elementos HTML pelos seus nomes. Porém, há outras formas de conectar o CSS com nossos documentos HTML, vamos conhecê-las no próximo tópico:
2.2 Seletores de elementos
Os seletores de CSS são usados para “selecionar” elementos HTML e aplicar estilos a eles. Eles permitem que você defina regras específicas para diferentes partes de um documento, tornando o design mais flexível e organizado. Existem três principais tipos de seletores. Vamos ver como eles como funcionam:
2.1 – Seletor de Tipo (Tag)
Aplica os estilos a todas as instâncias de uma determinada tag. Para usá-lo, coloca-se o nome da tag e abre-se chaves:
p {
color: blue;
}
Isso deixará a letra de todos os parágrafos (<p>) do documento em azul.
2.2 – Seletor de Classe (.)
Aplica os estilos a todos os elementos que pertencem a uma determinada classe. Para usá-lo, coloca-se um ponto, seguido do nome da classe e abre-se chaves:
.destaque {
font-weight: bold;
}Todos os elementos pertencentes a class="destaque" terão texto em negrito.
2.3 – Seletor de ID (#)
Aplica os estilos a um único elemento que possui um ID específico. Para usá-lo, coloca-se uma hashtag, seguida do ID do elemento e abre-se chaves:
#cabecalho {
background-color: gray;
}O elemento com id="cabecalho" terá um fundo cinza.
Saber conectar o CSS com um documento HTML através da tag <link> e entender a utilização de cada seletor apresentado acima já é um excelente começo para trabalhar com essa linguagem. Porém, se você tem interesse em conhecer outros recursos do CSS e ver exemplos práticos de uso da linguagem, acesse o site da W3Schools e confira os conteúdos publicados por lá. Tenho certeza que esse material lhe ajudará em seus estudos.
Conclusão
O CSS é uma ferramenta indispensável para qualquer desenvolvedor que deseja criar páginas web modernas e visualmente atraentes. Ao entender como funcionam os seletores e as propriedades de estilização, é possível personalizar completamente um site, tornando-o mais agradável e acessível para os usuários.
Além disso, a utilização correta do CSS melhora a organização do código, facilita sua manutenção a longo prazo e torna nossos sites responsivos. Se você deseja aprofundar seus conhecimentos, existem diversos materiais disponíveis online, como a documentação da W3Schools, por exemplo, que pode ajudar a aprimorar suas habilidades na linguagem.
Pesquise e teste cada funcionalidade da linguagem e se quiser conhecer mais sobre programação, clique aqui e acesse meus artigos sobre o assunto.
Espero que este conteúdo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações fique à vontade para entrar em contato.
