Neste tutorial, você aprenderá como aplicar regras de estilo a elementos HTML.
Estilizando elementos HTML
HTML é muito limitado quando se trata de apresentação de páginas da web. Ele foi originalmente projetado como uma maneira simples de apresentar informações. CSS (Cascading Style Sheets) foi introduzido pelo World Wide Web Consortium (W3C) em dezembro de 1996 para fornecer uma maneira melhor de estilizar elementos HTML.
Usando CSS, é fácil especificar tamanho e fonte da fonte, cor do texto e do plano de fundo, alinhamento de texto e imagens, quantidade de espaço entre elementos, bordas e contornos de elementos e muitas outras propriedades.
Adicionar estilos a elementos HTML
As informações de estilo podem ser anexadas como um documento separado ou incorporadas no próprio documento HTML. Aqui estão três maneiras de implementar informações de estilo em um documento HTML.
- Estilos embutidos — use atributos de style em tags de abertura HTML.
- Estilos incorporado– use o elemento <style> na seção de cabeçalho do documento.
- Folhas de estilo externas – Use o elemento <link> para apontar para um arquivo CSS externo.
Neste artigo, examinaremos todos esses diferentes tipos de folha de estilo, um por um.
Nota: Os estilos embutidos têm a prioridade mais alta e as folhas de estilo externas têm a prioridade mais baixa. Isso significa que, se você especificar estilos para parágrafos na folha de estilo incorporada e na folha de estilo externa, as regras de estilo conflitantes na folha de estilo incorporada substituirão a folha de estilo externa.
Estilos embutidos
Os estilos inline ou embutidos são usados para aplicar regras de estilo exclusivas aos elementos, colocando as regras CSS diretamente na tag de abertura. Ele pode ser anexado a um elemento usando o atributo style.
A propriedade style inclui muitos pares de propriedades e valores CSS. Cada property: value é separado por um ponto e vírgula (;) como você escreveria em uma folha de estilo incorporada ou externa. Mas precisa estar tudo em uma linha, ou seja, sem nova linha após o ponto e vírgula.
O exemplo a seguir mostra como definir a cor e o tamanho da fonte do texto:
<h1 style="color:red; font-size:30px;">Este é um título</h1>
<p style="color:green; font-size:18px;">Este é um parágrafo.</p>
<div style="color:green; font-size:18px;">Este é um texto.</div>O uso de estilos embutidos geralmente é considerado uma prática ruim. Como as regras de estilo são incorporadas diretamente na marcação html, isso faz com que a apresentação se misture com o conteúdo do documento, tornando muito difícil atualizar ou manter o site.
Nota: Torna-se impossível estilizar pseudo-elementos e pseudo-classes usando estilos internos. Portanto, você deve evitar usar atributos de estilo na marcação. Usar uma folha de estilo externa é a maneira preferida de adicionar informações de estilo a um documento HTML.
Folhas de estilo incorporadas
As folhas de estilo incorporadas ou incorporadas afetam apenas o documento no qual estão incorporadas.
As folhas de estilo incorporadas são definidas usando a tag <style> na seção <head> do documento HTML. Você pode definir qualquer número de elementos <style> na seção <head>.
O exemplo a seguir demonstra como incorporar regras de estilo em uma página da Web.
<head>
<style>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>Folhas de estilo externas
As folhas de estilo externas são ideais quando os estilos são aplicados a muitas páginas.
Uma folha de estilo externa contém todas as regras de estilo em um documento separado que você pode vincular a partir de qualquer documento HTML em seu site. As folhas de estilo externas são as mais flexíveis porque, com as folhas de estilo externas, você pode alterar a aparência de todo o site atualizando apenas um arquivo.
Você pode anexar folhas de estilo externas de duas maneiras – vinculando e importando:
Vinculando Folhas de Estilo Externas
As folhas de estilo externas podem ser vinculadas a documentos HTML usando a tag <link>.
A tag <link> está dentro da seção <head> assim:
<head>
<link rel="stylesheet" href="css/style.css">
</head>Importando folhas de estilo externas
A regra @import é outra maneira de carregar folhas de estilo externas. A instrução @import instrui o navegador a carregar uma folha de estilo externa e usar seus estilos.
Você pode usá-lo de duas maneiras. A maneira mais fácil de fazer isso é usá-lo no elemento <style> na seção <head>. Observe que outras regras CSS ainda podem ser incluídas no elemento <style>.
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>Da mesma forma, você pode importar uma folha de estilo dentro de outra folha de estilo usando a regra @import.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}Nota: Todos as regras @import devem aparecer no início da folha de estilo. Quaisquer regras de estilo definidas na própria folha de estilos substituem as regras conflitantes na folha de estilos importada. A regra @import pode causar problemas de desempenho e geralmente você deve evitar importar folhas de estilo.
