Home CSS Aplicando estilos CSS
Aplicando estilos CSS
CSS Luiz Augusto Vieira 08/01/2018
Um arquivo CSS cascading style sheet (folha de estilos em cascata), permite que você separe os conteúdos HTML do seu sites do seu estilo CSS.
Você usa arquivos HTML para organizar os conteúdos, mas toda a apresentação (fontes, cores, plano de fundo, bordas, formatação de texto, efeitos de link, etc.) são realizadas dentro de um CSS.
Neste ponto você tem algumas opções de como usar o CSS, internamente ou externamente.
ESTILO INTERNO
Primeiro vamos explorar o método interno. Desta forma, você está simplesmente colocando o código CSS nas tags <head> e </head> de cada arquivo HTML que você deseja usar com o CSS.
No nosso exemplo abaixo, digamos que queremos que nosso cabeçalho e nosso parágrafo, tenham os seguintes estilos:
<h1> tenha a cor vermelha;
<h2> tenha a cor verde;
<p> tenha a cor azul.
Veja como fica nosso CSS:
<!DOCTYPE html>
<html>
<head>
<title>Aplicando estilos CSS Interno</title>
<style>
h1 {color: red;}
h2 {color: green;}
p {color: blue;}
</style>
</head>
<body>
<h1>Este é meu primeiro cabeçalho. É o mais importante.</h1>
<h2>Este é meu segundo cabeçalho. É um pouco menos importante.</h2>
<p>Este é o meu parágrafo</p>
</body>
</html>
Veja abaixo o resultado no seu navegador:
Com este exemplo, cada arquivo HTML contém o código CSS necessário para o estilo da página. O que significa que todas as mudanças que você quiser fazer em uma página, terão que ser feitas para todas individualmente, caso cada página use um cabeçalho diferente.
Este método pode ser bom se você precisar usar apenas uma página, ou se você quiser que diferentes páginas tenham estilos variáveis.
ESTILO EXTERNO
Os estilos externos são exatamente os mesmos estilos internos, exceto que eles são salvos em um arquivo separado com a extensão ” .CSS “.
Vamos ao exemplo, use algum editor de texto, como Bloco de Notas, Notepad++, Dreamweaver e etc.
Crie um novo arquivo e salve com nome de style.css numa pasta qualquer com seguinte código:
h1 {
color: red;
}
h2 {
color: green;
}
p {
color: blue;
}
Agora precisamos dizer ao nosso arquivo HTML que use esse arquivo de style.css.
Fazemos isso de duas formas como mencionado abaixo dentro da tag <head>:
<link rel="stylesheet" type="text/css" href="styles.css">
Ou usa o “@import url” para importar nosso CSS para o nosso HTML.
<style type=”text/css”>@import url(styles.css)</style>
Isso diz ao navegador que este arquivo é um CSS, e onde procurá-lo através do atributo href. Seu arquivo HTML agora deve ficar assim:
<!DOCTYPE html>
<html>
<head>
<title>Aplicando estilos CSS Externo</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este é meu primeiro cabeçalho. É o mais importante.</h1>
<h2>Este é meu segundo cabeçalho. É um pouco menos importante.</h2>
<p>Este é o meu parágrafo</p>
</body>
</html>
Salve um arquivo com o código acima na mesma pasta onde foi salvo o arquivo style.css, porém, este deve ser salvo com nome de index.html e depois basta abrir no navegador para visualizar.
Veja abaixo o resultado no seu navegador:
Quando se usa estilos externos, o HTML e CSS ficam separados. Então podemos trabalhar neles de forma independente.
Se você adicionou outro parágrafo, esse também seria vermelho. Além disso, se você adicionou mais estilos styles.css, você veria essas alterações se você atualizar.
Nota: Separar todos os arquivos, torna as coisas mais fáceis de modificar e também é uma boa prática.
ESTILO INLINE
Os estilos inline, são os estilos que estão dentro das linhas de código HTML. Eles que vão modelar a tag HTML, para isso você usa o atributo style com o valor de seu CSS.
No exemplo abaixo, digamos que queremos que o nosso cabeçalho <h1> fosse azul.
Veja como você faria isso em inline:
<!DOCTYPE html>
<html>
<head>
<title>Aplicando estilos CSS Inline</title>
</head>
<body>
<h1 style="color: blue">Este é meu primeiro cabeçalho. É o mais importante.</h1>
<h2>Este é meu segundo cabeçalho. É um pouco menos importante.</h2>
<p>Este é o meu parágrafo</p>
</body>
</html>
Veja o resultado no seu navegador:
Nota: Você deve evitar o estilo desta maneira, tanto quanto possível. Pois além de poluir o HTML, não é uma boa prática.
ATÉ O PRÓXIMO POST
Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.
Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro
Curta nossa Fanpage: https://www.facebook.com/htmlecsspro
Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro
Olá, deixe seu comentário para Aplicando estilos CSS