O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a apresentação de documentos HTML. Ao separar a estrutura (HTML) da apresentação (CSS), é possível criar páginas web mais organizadas, manuteníveis e esteticamente agradáveis. Neste artigo vamos explorar as diferentes maneiras de incluir CSS em uma página HTML, apresentar exemplos práticos e discutir boas práticas para a organização do CSS.
Antes de começarmos, se você está dando os primeiros passos no desenvolvimento web, recomendamos a leitura do artigo Como criar sua primeira página HTML. Ele fornece uma base sobre HTML, a linguagem de marcação que dá estrutura às páginas web. Com esse conhecimento, você estará pronto para avançar na personalização visual com CSS, que abordaremos a seguir.
Para que serve CSS?
Assim como o HTML define a estrutura do conteúdo, o CSS define como os elementos HTML devem ser exibidos visualmente. Isso pode incluir a definição de cores, fontes, espaçamentos, alinhamentos e até animações.
Estrutura do CSS
O CSS utiliza uma estrutura simples composta por propriedades e valores.
Propriedade: É o que será alterado no elemento HTML, como color (cor), font-size (tamanho da fonte), margin (margem), entre outros.
Valor: Define o comportamento da propriedade, como red (vermelho) para color ou 24px para font-size.
Cada conjunto de propriedade+valor é chamado de declaração (declaration) e quando inseridos no atributo style de um elemento, ou seja, de forma inline como veremos a seguir, devem ser separados por ponto e vírgula, da seguinte forma:
color: red;font-size: 24px;
Porém, quando o CSS é declarado dentro da tag <style> ou em um arquivo externo, sua estrutura é composta por regras (rules), cuja estrutura é a seguinte:
Cada regra é composta por um seletor e um bloco de declarações. O seletor é a especificação de quais elementos HTML serão afetados pelas declarações. Por exemplo, podemos aplicar uma regra a todas as tags <p> de uma página.
Tipos de inclusão de CSS
Estilos inline
Estilos inline são aplicados diretamente aos elementos HTML usando o atributo “style”. Isso pode ser útil em situações pontuais, nas quais você precisa aplicar um estilo específico e rápido, sem mexer no restante do código.
<h1 style="color: red; font-size: 24px;">Título com Estilo Inline</h1>
No código acima, são definidos os estilos a serem aplicados ao elemento <h1>. Cada propriedade é seguida de um valor.
Prós:
- Simplicidade: é fácil e rápido adicionar estilos inline diretamente em um elemento.
- Específico: os estilos aplicam-se imediatamente ao elemento específico, sem afetar outros.
Contras:
- Difícil de manter: em projetos maiores, fica confuso controlar e ajustar múltiplos estilos inline.
- Não reutilizável: cada estilo precisa ser redefinido para cada elemento, o que resulta em repetição de código.
- “Poluição do código”: misturar conteúdo (HTML) com estilo (CSS) pode tornar o código HTML bagunçado e difícil de ler.
Estilos internos
Os estilos internos são definidos dentro da tag “<style>” no “<head>” da página HTML. Esta abordagem é útil para quando você precisa aplicar estilos a uma única página, sem a necessidade de criar um arquivo CSS separado.
<head>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: red;
}
</style>
</head>
No exemplo acima foi especificado o seletor, que define quais elementos serão afetados pelo estilo (neste caso, as tags <body> e <h1>), seguidos das regras CSS que definem as modificações a serem aplicadas a esses elementos, como a cor de fundo da página e a cor do texto dos cabeçalhos.
Prós:
- Centralizado por página: todos os estilos são agrupados em um só lugar, dentro da própria página HTML.
- Sem arquivos externos: você não precisa de arquivos CSS adicionais, o que pode ser conveniente para páginas simples ou temporárias.
Contras:
- Não reutilizável: os estilos internos só afetam aquela página específica, tornando difícil aplicar os mesmos estilos em outras páginas.
- Pouco eficiente: se várias páginas precisarem dos mesmos estilos, você terá que duplicar o código, o que prejudica a manutenção.
- Diminui a separação de responsabilidades: embora melhor que o estilo inline, ainda mistura HTML com CSS, dificultando a organização em projetos maiores.
Estilos externos
A forma mais organizada e recomendada de adicionar CSS a uma página web é utilizando um arquivo externo. Com essa abordagem, você pode separar os estilos em um arquivo .css independente, permitindo reutilização e fácil manutenção em várias páginas.
No seu editor de código, crie um arquivo com o nome de sua preferência (ex: “estilo.css”) dentro de uma pasta chamada estilos. Neste arquivo, adicione suas regras de estilo CSS. Por exemplo:
body {
background-color: #f0f0f0;
}
p {
color: red;
}
Agora, abra seu arquivo HTML (ex: index.html) e adicione o link para o arquivo CSS no cabeçalho do documento, entre as tags <head> e </head>. Veja o exemplo:
<head>
<link data-pmdelayedstyle="estilos/estilo.css" rel="stylesheet" />
</head>
Salve ambos os arquivos (index.html e estilos/estilo.css) e abra o HTML no navegador. Se tudo foi feito corretamente, o texto do parágrafo deverá aparecer na cor vermelha.
Vantagens do CSS externo
O uso de arquivos CSS externos traz várias vantagens:
- Manutenção simplificada: Alterar um arquivo CSS pode atualizar o estilo de várias páginas simultaneamente, sem a necessidade de modificar cada documento HTML individualmente.
- Reutilização: Você pode reutilizar o mesmo arquivo CSS em diferentes páginas ou até em diferentes projetos.
- Separação de responsabilidades: O conteúdo (HTML) e a apresentação (CSS) ficam separados, o que promove um código mais limpo e organizado.
Conclusão
Existem diversas maneiras de incluir CSS em uma página HTML, cada uma com seus prós e contras. Para projetos simples, estilos inline ou internos podem funcionar, mas para projetos maiores, é essencial seguir as boas práticas e utilizar estilos externos, mantendo uma clara separação entre conteúdo e apresentação.
Agora que você sabe como incluir CSS em suas páginas HTML, pode explorar as diversas possibilidades que essa linguagem de estilização oferece, alterando a aparência de suas páginas.