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