Inserir CSS inline, CSS incorporado e CSS externo
CSS - Cascading Style Sheets (Folha de Estilos em Cascata), é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML.
Três modos de inserir o CSS em arquivos HTML:
- CSS Inline
- CSS Incorporado
- CSS Importado
As declarações CSS são escritas da seguinte forma:
Neste exemplo é definido a cor do texto.
color: #e83e0f;
color - nome da propriedade
(:) separa a propriedade do seu valor
#e83e0f - valor da propriedade
(;) finaliza uma instrução CSS
- CSS Inline
Uma folha de estilo inline, quando as regras CSS são declaradas dentro da tag de abertura do elemento HTML com uso do atributo style.
Criar um arquivo "css_inline.html", colocar o código abaixo.
<!DOCTYPE html>
<html>
<head>
<title> Estilo Inline </title>
<meta charset="UTF-8">
</head>
<body style="background-color: #fff1cb;">
<h1 style="color: #e83e0f;"> Curso de HTML5, CSS3 e Bootstrap</h1>
<p style="color: #0d7cff; font-size: 18px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Proin venenatis faucibus nulla, nec fringilla neque condimentum quis.
</p>
</body>
</html>
- CSS Incorporado
Uma folha de estilo incorporada, quando as regras CSS são declaradas na seção head do próprio documento HTML.
Criar um arquivo "css_incorporado.html", colocar o código abaixo.
<!DOCTYPE html>
<html>
<head>
<title> Estilo Incorporado </title>
<meta charset="UTF-8">
<style>
body{
background-color: #7affa8;
}
h1{
color: #005e16;
}
p{
color: #e80000;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Curso de HTML5, CSS3 e Bootstrap</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Proin venenatis faucibus nulla, nec fringilla neque condimentum quis.
</p>
</body>
</html>
- CSS Importado
Uma folha de estilo externa, quando as regras CSS são implementadas em um documento a parte do documento HTML, isto é, a folha de estilo é um arquivo separado do arquivo html. Um arquivo de folha de estilo deve ser gravado com a extensão .css
Criar um arquivo "css_externo.html", colocar o código abaixo.
<!DOCTYPE html>
<html>
<head>
<title> Estilo Incorporado </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="folha_estilo.css">
</head>
<body>
<h1>Curso de HTML5, CSS3 e Bootstrap</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Proin venenatis faucibus nulla, nec fringilla neque condimentum quis.
</p>
</body>
</html>
Criar um arquivo "folha_estilo.css", colocar o código abaixo.
body{
background-color: #8a1000;
}
h1{
color: #FFF;
}
p{
color: #FFF;
font-size: 18px;
}
Baixar o código fonte: Clique aqui