HTML - Citações
Tipos de Folhas de Estilo
Existem três tipos principais de folhas de estilo usadas no desenvolvimento web: folhas de estilo internas, folhas de estilo externas e estilos inline. Cada tipo tem seus próprios benefícios e desvantagens, e entender quando usar cada um é fundamental para criar sites bem estruturados e fáceis de manter.
Folha de Estilo Interna
Uma folha de estilo interna é definida dentro da tag <style> na seção <head> de um documento HTML. Ela contém regras CSS que se aplicam aos elementos daquela página específica. Folhas de estilo internas são úteis quando você tem uma única página com estilos únicos ou quando deseja testar rapidamente alguns estilos sem criar um arquivo CSS separado.
| Vantagens | Desvantagens |
|---|---|
| Os estilos são mantidos dentro do documento HTML, facilitando o gerenciamento para sites de página única. | Os estilos não podem ser reutilizados em várias páginas, levando à duplicação de código. |
| Não são necessárias solicitações HTTP adicionais para buscar os estilos. | Misturar HTML e CSS pode tornar o código mais difícil de ler e manter. |
Exemplo de uma folha de estilo interna
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>Folha de Estilo Externa
Uma folha de estilo externa é um arquivo CSS separado que contém estilos para uma ou mais páginas HTML. Ela é vinculada ao documento HTML usando a tag <link> na seção <head>. Folhas de estilo externas são o método mais comum e preferido para aplicar estilos a um site, pois permitem a reutilização de código, facilidade de manutenção e separação de preocupações.
| Vantagens | Desvantagens |
|---|---|
| Os estilos podem ser reutilizados em várias páginas, reduzindo a duplicação de código. | É necessária uma solicitação HTTP adicional para buscar o arquivo CSS externo. |
| Separar HTML e CSS torna o código mais legível e fácil de manter. | Se o arquivo CSS externo falhar ao carregar, o site pode aparecer sem estilo. |
| Os estilos podem ser armazenados em cache pelo navegador, melhorando os tempos de carregamento da página. |
Exemplo de uma folha de estilo externa
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Estilos Inline
Estilos inline são aplicados diretamente a um elemento HTML usando o atributo style. Eles têm a maior especificidade e substituem estilos definidos em folhas de estilo internas ou externas. Estilos inline devem ser usados com moderação, pois misturam HTML e CSS, tornando o código mais difícil de ler e manter.
| Vantagens | Desvantagens |
|---|---|
| Útil para aplicar estilos rapidamente a um único elemento. | Misturar HTML e CSS torna o código mais difícil de ler e manter. |
| Maior especificidade, substituindo outros estilos. | Os estilos não podem ser reutilizados, levando à duplicação de código. |
| Mais difícil de aplicar estilos consistentes em todo o site. |
Exemplo de estilos inline
<p style="color: red; font-weight: bold;">Este é um parágrafo com estilos inline.</p>Vinculando Folhas de Estilo Externas
Para usar uma folha de estilo externa em seu documento HTML, você precisa vinculá-la usando a tag <link> dentro da seção <head> do seu arquivo HTML. A tag <link> é um elemento vazio, ou seja, não possui uma tag de fechamento, e requer vários atributos para conectar corretamente a folha de estilo ao documento.
O atributo rel especifica a relação entre o documento HTML e o recurso vinculado. Para vincular uma folha de estilo, o valor deve ser definido como "stylesheet". O atributo type indica o tipo de conteúdo sendo vinculado, que neste caso é "text/css". O atributo href especifica o caminho do arquivo para o arquivo CSS externo.
Exemplo: Vinculando uma Folha de Estilo Externa no Mesmo Diretório
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Se o arquivo CSS estiver localizado em um diretório diferente, você precisa especificar o caminho do arquivo apropriado no atributo href. Por exemplo, se o arquivo CSS estiver localizado em um subdiretório chamado "css", o código ficaria assim:
Exemplo: Vinculando uma Folha de Estilo Externa em um Subdiretório
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>Você também pode vincular folhas de estilo hospedadas em sites externos fornecendo a URL completa no atributo href:
Exemplo: Vinculando uma Folha de Estilo Externa a partir de uma URL
<head>
<link rel="stylesheet" type="text/css" href="https://example.com/styles.css">
</head>Você pode vincular várias folhas de estilo externas a um único documento HTML incluindo várias tags <link> na seção <head>. A ordem em que elas são vinculadas é importante, pois os estilos definidos nas folhas de estilo posteriores substituirão os das anteriores se eles visarem os mesmos elementos.