Adicionar CSS ao HTML: um guia com exemplos
Para formatar um HTML de maneira atraente, você pode utilizar a linguagem de folha de estilos CSS. Com CSS, você define atributos como layout, cor e forma dos elementos individuais do HTML. As instruções de estilo do CSS existem independentemente do HTML e precisam ser adicionadas ao HTML no documento.
- Fique online com 99,99% de tempo de atividade e segurança robusta
- Aumente o desempenho com um clique à medida que o tráfego cresce
- Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana
Quais métodos existem para adicionar CSS ao HTML
Quando você quiser adicionar CSS ao HTML, você pode fazer isso por meio de stylesheets internos ou externos. Nos stylesheets internos, as instruções CSS estão diretamente no documento HTML. Existe a possibilidade de integrar CSS no início do arquivo HTML ou diretamente e de forma contínua no código-fonte. Nesta metodologia, um bom entendimento básico de HTML e de sua sintaxe é essencial.
No desenvolvimento de sites, a maneira mais comum e limpa é a utilização de stylesheets CSS externos. Com isso, a adição de CSS ocorre por meio de uma linkagem do documento HTML com um arquivo CSS externo. A seguir, apresentamos uma visão geral das três metodologias:
- Estilo inline, ou seja, diretamente no código-fonte
- no início do documento HTML
- externalizado em um arquivo CSS externo
MyWebsite é sua virada de chave para uma presença web profissional, e inclui consultor pessoal!
- Certificado SSL
- Domínio
- Suporte 24 horas
Estilo inline
Com esta metodologia, a instrução de estilo é adicionada diretamente no código-fonte por meio de uma tag style. As propriedades desejadas são atribuídas apenas a um elemento HTML específico, permitindo designs diferentes ao longo do documento HTML. No exemplo abaixo, o cabeçalho h1 deve ser exibido na cor azul e com tamanho de fonte 14:
<h1 style="color: blue; font-size: 14px;">Isto é um título/h1>Ao adicionar CSS ao HTML dessa forma, você deve levar em consideração de que muitos benefícios do CSS podem ser perdidos. Isso inclui a capacidade de definir um comando abrangente que se aplica a todos os elementos h1 no documento HTML. Além disso, pode haver um maior esforço de manutenção, pois é necessário alterar diretamente o código HTML.
Adicionar CSS no início do HTML
Adicionando o CSS no início do seu arquivo HTML, você deve escrever CSS ao HTML na seção de cabeçalho do seu documento HTML. A tag style torna-se parte do elemento head e aplica-se a todo o arquivo. Aqui, as instruções de estilo CSS ainda estão contidas no próprio documento, mas são claramente separadas do código HTML. No exemplo abaixo, o mesmo comando do exemplo anterior é aplicado. Desta vez, no entanto, todos os títulos h1 no arquivo serão formatadas conforme especificado.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue; font-size: 14px;}
</style>
</head>
<body>
<h1>Este é um título</h1>
<p>Este é um parágrafo.</p>
</body>
</html>Integrar CSS com arquivo externo
Esta é provavelmente a melhor maneira de adicionar CSS ao HTML. Um site muitas vezes consiste em várias páginas, por isso faz sentido armazenar instruções de estilo em um arquivo separado. Isso permite uma separação clara entre conteúdo e design e facilita a manutenção. O arquivo externo é simplesmente linkado ao documento HTML. Você salva a folha de estilo externa com a extensão .css e usa uma tag link para linkar o CSS no HTML. No exemplo, o arquivo CSS tem o nome “stylesheet.css”.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Este é um título</h1>
<p>Este é um parágrafo.</p>
</body>
</html>O atributo rel define aqui o tipo de relação lógica e href refere-se ao arquivo CSS a ser embutido. Observe que o elemento link também pode ter outros atributos. Com a propriedade media=”print”, por exemplo, você especifica que a folha de estilo é usada apenas na visualização para impressão. A folha de estilo externa não contém tags HTML, mas apenas o respectivo seletor e chaves com as declarações, como no exemplo a seguir:
h1 {
color: blue;
font-size:14px;
}Os novos recursos mais comuns de CSS
Dentro desses métodos clássicos para adicionar CSS ao HTML, diversas novas funcionalidades foram desenvolvidas nos últimos anos, tornando o design de sites ainda mais flexível. Com seletores modernos como :has(), é possível direcionar elementos-pai dependendo de seus filhos, enquanto consultas de contêiner garantem que componentes individuais se ajustem ao tamanho de seus respectivos contêineres, independentemente da largura da janela. Esses e outros novos recursos permitem implementar designs mais modulares, dinâmicos e amigáveis ao usuário, sem recorrer a soluções complexas ou ao JavaScript.
Pseudoclasse CSS :has()
Trata-se de um seletor pai que pode vincular estilos predefinidos a determinadas condições. Por exemplo, um campo pode ser colorido de vermelho com uma entrada inválida e de verde com uma entrada válida:
.form-group:has(input:invalid) {
border: 2px solid red;
}
.form-group:has(input:valid) {
border: 2px solid green;
}Consultas de contêiner
Consultas de contêiner permitem adicionar CSS ao HTML, vinculando regras de CSS não apenas ao tamanho da janela inteira do navegador (como com consultas de mídia CSS), mas também ao tamanho do contêiner ao redor.
Assim, cada módulo ou componente pode se adaptar individualmente, dependendo de quanto espaço está disponível em seu elemento pai. Isso possibilita um web design responsivo modular e realmente flexível, independente da largura da janela. Por exemplo, pode-se definir que cartões com imagem e texto sejam exibidos lado a lado em uma linha assim que seu contêiner adjacente for suficientemente largo.
Se o contêiner for mais estreito que um valor definido, neste exemplo 400 pixels, então a exibição padrão permanece.
@container (min-width: 400px) {
.card { flex-direction: row; }
}Aninhamento de CSS
Aninhamento de CSS permite aninhar seletores diretamente dentro de outros seletores, semelhante ao que já se conhece no SCSS ou LESS CSS.
Dessa forma, o código permanece mais organizado, pois os estilos relacionados ficam em um único local, em vez de repetir longas cadeias de seletores. Neste exemplo, todos os botões recebem o mesmo estilo básico, e, dependendo da classe adicional (primary ou secondary), eles ganham um visual diferente:
button {
padding: 0.5rem 1rem;
border: none;
&.primary {
background: blue;
color: white;
}
&.secondary {
background: gray;
color: black;
}
}Novas funções de cor
Com as novas funções CSS, como color-mix() ou light-dark(), você pode misturar cores dinamicamente diretamente no stylesheet ou escolher automaticamente variantes de acordo com a luminosidade. Isso possibilita criar transições de cor, temas ou ajustes para modo escuro, sem precisar calcular valores de cor fixos previamente.
Assim, o CSS se torna mais flexível, pois as cores não são apenas definidas de forma estática, mas podem ser calculadas e ajustadas. Neste exemplo, a cor de fundo de todos os elementos com a classe .btn é definida pela função CSS color-mix() em uma proporção de 50:50 entre vermelho e azul, resultando em violeta.
.btn {
background: color-mix(in srgb, red 50%, blue);
}Scroll snap
Scroll Snap é uma função CSS que permite definir que elementos se “encaixem” automaticamente em posições específicas ao rolar. Isso facilita a criação de galerias de imagens, carrosséis ou seções de página que param suavemente em um ponto definido ao rolar.
Isso garante uma navegação fluida e amigável ao usuário. No exemplo a seguir, o container pai .slider faz o scroll horizontalmente (x) e assegura que o encaixe seja obrigatório (mandatory). Cada elemento filho .slide se alinha ao rolar de modo que se “encaixe” no início do container (start).
.slider {
scroll-snap-type: x mandatory;
}
.slide {
scroll-snap-align: start;
}