Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 02 - Introdução ao CSS

Introdução ao CSS

O CSS

O CSS (Cascade Style Sheets) é uma linguagem que auxilia a estilização de páginas HTML. Enquanto o HTML se preocupa com a organização e estruturação do conteúdo, o CSS se preocupa com a aparência desse conteúdo.

O CSS foi criado em 1996 como uma linguagem focada em especificar como a aparência da página deve ser. Com o CSS é possível escolher cores, fontes, posicionamentos, etc.

O CSS pode ser incluído no documento HTML de várias formas. A mais simples é escrever o código CSS no cabeçalho do documento HTML dentro das tags <style></style>, como no exemplo abaixo:[][texto]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aula 02</title>
    <style>
        body {
            background-color: blue;
        }
    </style>
</head>
<body>
</body>
</html>

O código CSS deve fornecer um seletor (elementos onde o estilo será aplicado) seguido por uma lista de propriedades com seus respectivos valores.

Importando via arquivo

É possível importar um arquivo CSS de um arquivo externo. Essa forma é a mais indicada, pois assim é possível reaproveitar o arquivo para vários documentos HTML, facilitando a manutenção.

Para importar um arquivo CSS em uma página HTML, utilize a tag <link>, conforme o exemplo a seguir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aula 02</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
</body>
</html>

Definição inline

Além das formas vistas, é possível indicar um código CSS diretamente na tag HTML em que se deseja aplicar o estilo. Nesse caso, deve-se omitir o seletor, uma vez que o CSS já encontra-se definido na própria tag que será aplicado.

No exemplo abaixo, o CSS foi definido através da propriedade style da tag <body>. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aula 02</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body style="background-color: #FF0000">
</body>
</html>

Caso exista mais de uma definição de estilo para um mesmo elemento HTML, o CSS aplicado depende da prioridade das definições. Definições mais específicas têm prioridade em relação a definições globais. Nesse caso, a definição inline tem prioridade nas definições realizadas no arquivo CSS importado.


Versão 5.3 - Todos os Direitos reservados