HTML Básico – Estilos

Início » HTML Básico – Estilos

Essa é a parte 9 de 16 na série HTML

Essa é uma aula que eu gosto bastante porque eu acho extremamente importante entender sobre estilos e a parte visual das nossas páginas web.

Preciso deixar claro que o HTML é bastante limitado em relação a isso, tendo em vista que ele foi projetado para ser uma forma simples de exibir informações online.

Contudo, o CSS (Cascading Style Sheets) – ou folhas de estilo – foram introduzidas em 1996 pelo World Wide Web Consortium (W3C) para fornecer uma forma melhor de estilizar os elementos HTML.

Utilizando CSS você pode especificar muitos detalhes, como fonte, tamanhos, cores, fundos, alinhamento, espaçamento, bordas, entre diversas outras propriedades de estilo.

Como Adicionar Estilo ao HTML

Há três formas principais de trabalhar com estilos em nossos elementos HTML:

Estilos Embutidos: Usamos o atributo style na tag de abertura do elemento
Estilos Incorporados: Usamos a tag <style> – normalmente dentro da tag <head>
Folha de Estilo Externa: Usamos a tag <link> para apontar um arquivo CSS externo

Nota: Existe uma prioridade de renderização, digamos assim. Os estilos embutidos tem prioridade mais alta e as folhas de estilo externas têm menor prioridade. Quando há duplicação/conflito de estilos, segue-se essa prioridade.

Estilos embutidos

Como falei, os estilos embutidos são aqueles que vão diretamente no elemento HTML através do atributo style.

Portanto, são totalmente exclusivos daquele elemento onde foi especificado e usamos as regras CSS diretamente na tag de abertura.

Para definir as propriedades e valores CSS como estilo de um elemento, usamos o conjunto propriedade:valor separados por ponto-e-vírgula (;).

Basicamente, é a mesma forma como você trabalharia nos estilos embutidos ou folhas de estilos externas, só que como valor do atributo style.

Por questão de boas práticas, tente colocar todas essas propriedades na mesma linha, ou seja, sem quebrar a linha após o ponto-e-virgula, como fazemos nos outros modos.

Aqui está um exemplo de uso:

<h3 style="font-size:40px; color:green;">Isso é um Cabeçalho</h3>
<p style="color: yellow; font-style:italic;">Isso é um parágrafo estilizado</p>
<div style="background: red; color: white; border: 1px solid yellow;">Isso é um container</div>

Resultado:

Isso é um Cabeçalho

Isso é um parágrafo estilizado

Isso é um container

Parece interessante, mas na verdade, usar estilos embutidos é considerada uma prática ruim – eu mesmo quase nunca uso!

A razão disso, é porque força o estilo do elemento, visto que tem prioridade e, além disso, faz com que se misture com o conteúdo do documento tornando a visualização pior e difícil a manutenção.

Imagine que você tenha estilizado de forma embutida cada parágrafo e decida mudar a cor, por exemplo.

Nesse caso, você teria que ir em cada elemento e fazer a substituição, enquanto faria de forma mais rápida se fosse incorporado ou externo.

Nota: A forma mais indicada de usar estilos CSS é usando folhas de estilos externas.

Folhas de estilo incorporadas

Ainda melhor que estilos embutidos, usar folhas de estilo incorporadas dá maior controle sobre os estilos dentro do documento no qual estão incorporadas.

Como eu disse, geralmente esses estilos vão ser usados dentro da <style> que, por sua vez, deveria estar dentro da tag <head>.

Um exemplo de como vc deveria usar isso:

<head>
    <style>
        body {background: #333;}
        h1 {font-size: 50px;}
        p {
            color: #999, 
            font-size: 16px
        }
    </style>
</head>

Folhas de estilo externas

Se você está criando um site ou um conjunto de páginas e vai querer compartilhar alguns estilos com essas páginas, o mais recomendável é usar folhas de estilo externas.

Basicamente, uma folha de estilo CSS externa vai contem todos os estilos que você queira definir e vinculará cada um deles ao elementos respectivos do seu documento HTML, quando linkado.

A grande vantagem de usá-las, é que, se precisar fazer alterações, basta editar um arquivo para aplicar as mudanças em todas as páginas que linkaram esse arquivo.

Outra informação importante, é que você pode anexar essas folhas de estilo externas de dois modos – vinculando ou importando.

Vinculando folhas de estilo externas

Uma folha de estilo externa, nada mais é do que um arquivo .css contendo todos as regras CSS.

Para vincularmos esse arquivo, adicionamos a tag <link> dentro da seção <head> da página, da seguinte forma:

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

Importando filhas de estilo externas

Além da opção de linkar diretamente, você pode usar o recurso de importação usando @import que é um outro método de anexar um arquivo css.

Esse comando diz para o navegador carregar uma folha de estilo externa especificada.

Estamos falando sobre folhas de estilo externas carregando novas folhas de estilo também externas, mas isso poderia ser usado dentro da tag <style> de estilo incorporado.

Ficaria basicamente assim o código dentro do arquivo CSS externo:

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}

Nota: A importação com @import não é tão recomendada porque pode comprometer o desempenho da página, portanto, deve ser evitada. Contudo, se for usá-la, deve especificar as importações logo no início do arquivo CSS externo.

Navegação<< HTML Básico – Formatação de TextoHTML Básico – Imagens >>

Comments are closed.