O que é CSS

O que é o CSS?
CSS é a linguagem que usamos para criar estilos (formatar) um documento

HTML.
CSS descreve como os elementos HTML devem ser exibidos.
1º exemplo
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Meu primeiro exemplo de CSS</h1>

<p>Isso é um parágrafo</p>
</body>
</html>
Uma regra CSS consiste em um seletor e um bloco de declaração.

Sintaxe CSS
O seletor aponta para o elemento HTML que você deseja estilizar.
O bloco de declaração contém uma ou mais declarações separadas por ponto

e vírgula.
Cada declaração inclui um nome de propriedade CSS e um valor, separados

por dois pontos.
Várias declarações CSS são separadas por ponto e vírgula e os blocos de

declaração são cercados por chaves.
Exemplo
Neste exemplo, todos os elementos <p> serão alinhados ao centro, com uma
cor de texto vermelha:
p {
color: red;
text-align: center;
}
O seletor de id CSS
O seletor id usa o atributo id de um elemento HTML para selecionar um

elemento específico.
O id de um elemento é único dentro de uma página, então o seletor de id é

usado para selecionar um elemento único!
Para selecionar um elemento com um id específico, escreva um caractere hash

(#), seguido do id do elemento.
Exemplo 2
A regra CSS abaixo será aplicada ao elemento HTML com id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Olá Mundo! </p>
<p>Este parágrafo não é afetado pelo estilo. </p>
</body>
</html>
O seletor de classe CSS
O seletor de classe seleciona elementos HTML com um atributo de classe

específico.
Para selecionar elementos com uma classe específica, escreva um caractere

ponto (.), seguido do nome da classe.
Exemplo
Neste exemplo, todos os elementos HTML com class="center" serão vermelhos
e alinhados ao centro:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center"> Estou em vermelho e alinhado ao centro </h1>

<p class="center"> Estou em vermelho e alinhado ao centro.</p>
</body>
</html>
Você também pode especificar que apenas elementos HTML específicos

devem ser afetados por uma classe.
Exemplo
Neste exemplo, apenas os elementos <p> com class="center" serão vermelhos

e alinhados ao centro:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Não serie afetado</h1>
<p class="center"> Estou em vermelho e alinhado ao centro.</p>
</body>
</html>
Elementos HTML também podem se referir a mais de uma classe.

Exemplo
Neste exemplo, o elemento <p> será estilizado de acordo com class="center" e

class="large":
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Não serei afetado</h1>

<p class="center">Estou em vermelho e alinhado ao centro</p>
<p class="center large"> Estou em vermelho, alinhado ao centro e minha fonte
é “grande”</p>
</body>
</html>
O seletor universal CSS

O seletor universal (*) seleciona todos os elementos HTML na página.
Exemplo
A regra CSS abaixo afetará todos os elementos HTML na página:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Olá Mundo!</h1>
<p>Todo elemento nessa página será afetado por esse estilo. </p>
<p id="para1">Eu também!</p>
<p>e também eu...!</p>
</body>
</html>
O seletor de agrupamento CSS
O seletor de agrupamento seleciona todos os elementos HTML com as

mesmas definições de estilo.
Veja o seguinte código CSS (os elementos h1, h2 e p têm as mesmas

definições de estilo):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Será melhor agrupar os seletores, para minimizar o código.
Para agrupar seletores, separe cada seletor com uma vírgula.
Exemplo
Neste exemplo agrupamos os seletores do código acima:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS externo
Com uma folha de estilo externa, você pode alterar a aparência de um site
inteiro alterando apenas um arquivo!
Cada página HTML deve incluir uma referência ao arquivo de folha de estilo
externo dentro do elemento <link>, dentro da seção head.
Exemplo
Estilos externos são definidos dentro do elemento <link>, dentro da seção

<head> de uma página HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="meu-estilo.css">
</head>
<body>
<h1>Isso é um Título em H1</h1>

<p>Isso é um parágrafo.</p>
</body>
</html>
Aqui está a aparência do arquivo "meu-estilo.css":
"meu-estilo.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

O que é CSS

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

O que é CSS

Enviado por

Direitos autorais:

Formatos disponíveis

O que é o CSS?

CSS é a linguagem que usamos para criar estilos (formatar) um documento

<h1>Meu primeiro exemplo de CSS</h1>

Uma regra CSS consiste em um seletor e um bloco de declaração.

O seletor aponta para o elemento HTML que você deseja estilizar.

O bloco de declaração contém uma ou mais declarações separadas por ponto

Cada declaração inclui um nome de propriedade CSS e um valor, separados

Várias declarações CSS são separadas por ponto e vírgula e os blocos de

O seletor id usa o atributo id de um elemento HTML para selecionar um

O id de um elemento é único dentro de uma página, então o seletor de id é

Para selecionar um elemento com um id específico, escreva um caractere hash

A regra CSS abaixo será aplicada ao elemento HTML com id="para1":

O seletor de classe CSS

O seletor de classe seleciona elementos HTML com um atributo de classe

Para selecionar elementos com uma classe específica, escreva um caractere

<h1 class="center"> Estou em vermelho e alinhado ao centro </h1>

Você também pode especificar que apenas elementos HTML específicos

Neste exemplo, apenas os elementos <p> com class="center" serão vermelhos

Elementos HTML também podem se referir a mais de uma classe.

Neste exemplo, o elemento <p> será estilizado de acordo com class="center" e

<h1 class="center">Não serei afetado</h1>

O seletor universal CSS

A regra CSS abaixo afetará todos os elementos HTML na página:

O seletor de agrupamento CSS

O seletor de agrupamento seleciona todos os elementos HTML com as

Veja o seguinte código CSS (os elementos h1, h2 e p têm as mesmas

Será melhor agrupar os seletores, para minimizar o código.

Para agrupar seletores, separe cada seletor com uma vírgula.

Neste exemplo agrupamos os seletores do código acima:

Estilos externos são definidos dentro do elemento <link>, dentro da seção

<h1>Isso é um Título em H1</h1>

Aqui está a aparência do arquivo "meu-estilo.css":

Você também pode gostar