A maneira mais simples e eficiente de aprender HTML 5. Aula 6 - Estilos

Quando se pretende aplicar a mesma formatação em várias partes do documento torna-se vantajoso utilizar estilos.

Um estilo é um conjunto de formatações a que foram atribuídas a uma classe, tag html ou a uma identidade do documento.

Há 3 maneiras de adicionar estilos CSS ao seu documento HTML5, inline, ou seja, na própria tag usando o parâmetro style="", você pode usar CSS interno e incluir toda formatação entre o par de tags <head> do documento, pode usar um link para um arquivo externo com extensão .css

CSS Interno

Código CSS interno é colocado na seção <head> de um documento HTML. As classes e IDs nos elementos HTML podem ser usados para se referir ao código CSS que contém a formatação, mas eles só estão ativos nessa página específica. Estilos incorporados desta forma são baixados cada vez que a página carrega, ou seja, vai sempre fazer parte do carregamento da página. No entanto, existem alguns casos quando a pagina de estilos interna é útil. Um exemplo são as Newsletter ou mesmo e-mails comuns onde podemos criar um documento e formatá-lo com estilos CSS, nesse caso o estilo deve ser interno, assim os serviços de e-mails não vão bloquear os estilos. Isso acontece quando você tenta fazer isso usando um estilo externo porque a busca do estilo acontece através de um link. Um exemplo de pagina de estilo interna:


<head>
	<style type="text/css">
		p {color:white; font-size: 10px;}
		.center {display: block; margin: 0 auto;}
		#button-go, #button-back {border: solid 1px black;}
	</style>
</head>
        

Vantagens de CSS Interno:

  • Apenas uma página é afetada pela pagina de estilos.
  • Classes e IDs podem ser usados ​​por stylesheet interno.
  • Não há necessidade de carregar vários arquivos. HTML e CSS podem estar no mesmo arquivo.

Desvantagens de CSS Interno:

  • Aumento do tempo de carregamento da página.
  • Ela afeta apenas uma página – não é útil se você quiser usar o mesmo CSS em vários documentos.

CSS Externo

Provavelmente a melhor maneira de adicionar CSS ao seu site, é vinculá-lo a um arquivo .css externo. Dessa forma, quaisquer alterações feitas em um arquivo CSS externo serão refletidas em seu site globalmente.

Outra vantagem é que os navegadores fazer cache desse arquivo e isso melhora o desempenho do site diminuindo o tempo de carregamento.

Uma referência a um arquivo CSS externo é colocada na seção <head> da página:


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

O arquivo style.css contém todas as regras de formatação, classes, IDs, querys e todo o resto.

Vantagens de CSS Externo:

  • Tamanho menor de páginas HTML e estrutura mais limpa.
  • Velocidade de carregamento mais rápida.
  • O mesmo arquivo .css pode ser usado em várias páginas.
  • Facilita a manutenção do site

Desvantagens de CSS Externo:

  • Até que o CSS externo seja carregado, a página pode não ser processada corretamente. Acontece, eu já vi.

CSS Inline

Como aqui não é o curso de CSS, vamos focar mais nesse estilo, mas deixo bem claro que não é o melhor estilo, recomendo fortemente que você estude CSS3 e aprenda a formatar seus documentos usando folhas de estilo externa. Nós temos o curso básico de CSS3 aqui também caso se interesse pelo assunto.

Voltando para o CSS inline, ele é usado na própria tag caso você queira formatar uma tag específica no documento, para isso usamos o parâmetro style. Como eu disse, isso não é recomendado. Imagine que você use essa mesma tag em várias páginas e ela tenha o mesmo estilo em cada uma delas, quando você resolver atualizar isso terá que fazer uma por uma. Contudo, em alguns casos pode ser bastante útil e por isso ela existe. Para quem escreve para um blog por exemplo, usa-se muito este estilo de formatação pois você está formatando apenas aquele texto e a formatação do paragrafo pode ser única.

Veja abaixo um exemplo de um documento HTML formatado usando o estilo inline.


<!DOCTYPE html>
<html>
	<body style="background-color:black;">

		<h1 style="color:white;padding:30px;">Tutoriais ClickArt</h1>
		<p style="color:white;">Somente aqui.</p>

	</body>
</html>
        

Vantagens do CSS Inline 

  • Útil se você quiser testar e visualizar alterações.
  • Útil para correções rápidas.
  • Reduzir solicitações HTTP.

Desvantagens do Inline CSS:

  • CSS Inline deve ser aplicado a cada elemento.
  • Conclusão

    Agora você está familiarizado com diferentes maneiras de adicionar CSS ao seu site e conhece as diferenças entre as páginas de estilo internas, externas e inline, veja alguns estilos que você pode aplicar em seu documento.

    Cor de fundo HTML

    A propriedade background-color define a cor de fundo para um elemento HTML. Este exemplo define a cor de fundo de uma página para blue:

    
    <body style="ackground-color:blue;">
    
    	<h1>Isso é um cabeçalho</h1>
    	<p>Aqui é um paragrafo.</p>
    
    </body>
            

    Cor do texto em HTML

    A propriedade color define a cor do texto para um elemento HTML:

    
    <h1 style="color:blue;">Isso é um cabeçalho</h1>
    <p style="color:red;">Aqui é um paragrafo.</p>
            

    Fontes HTML

    A propriedade font-family define a fonte a ser usada para um elemento HTML:

    
    <h1 style="font-family:verdana;">Isso é um cabeçalho</h1>
    <p style="font-family:courier;">Aqui é um paragrafo.</p>
            

    Tamanho do texto em HTML

    A propriedade font-size define o tamanho do texto para um elemento HTML:

    
    <h1 style="font-size:300%;">Isso é um cabeçalhog</h1>
    <p style="font-size:160%;">Aqui é um paragrafo.</p>
            

    Alinhamento de texto HTML

    A propriedade text-align define o alinhamento horizontal do texto para um elemento HTML:

    Resumo do capítulo

    • Use o atributo style para estilizar elementos HTML
    • Use background-color para cor de fundo
    • Use color para cores de texto
    • Use font-family para fontes de texto
    • Use font-size para tamanhos de texto
    • Use text-align para alinhamento de texto

    Aprenda as principais linguagens usadas na WEB.

    Aqui você tem acesso gratuito às principais linguagens de programação web, não perca tempo, acesse nosso conteúdo e comece a programar agora mesmo.

Compartilhe:

Sobre o autor

Analista de Sistemas com foco atual na área de WEB. Amante de boa música, estratégias criativas. Gosto de trabalhar com quem tem talento, se não for para ser perfeito, melhor nem começar. Gosto de liderança, estratégias e, principalmente, pôr a mão na massa.