O documento fornece uma introdução ao CSS (Cascading Style Sheets), explicando sua sintaxe, incluindo seletores, propriedades e valores, bem como a importância de separar o estilo do conteúdo HTML. Além disso, aborda a aplicação de estilos através de folhas de estilo externas, internas e inline, e descreve o uso de seletores de classe e ID para estilizar elementos HTML distintos. O texto também menciona a herança de estilos entre diferentes folhas de estilo, destacando as vantagens e melhores práticas para o uso do CSS na web.

1. CSS
Cascading Style Sheet
Entendendo a base e a sintaxe do CSS

2. CSS Introdução
O que é CSS?
● CSS significa C ascading S tyle S heets
● CSS descreve como elementos HTML devem
ser exibidos na tela, papel ou em outras
mídias
● CSS economiza um monte de trabalho . Ele
pode controlar o layout de várias páginas da
Web de uma só vez
● Folhas de estilo externas são armazenados
em arquivos CSS
CSS Demo - uma página HTML - vários estilos!
Aqui vamos mostrar uma página HTML exibida com
quatro folhas de estilo diferentes. Clique no botão
"Stylesheet 1", "Stylesheet 2", "Stylesheet 3",
"Stylesheet 4" links abaixo para ver os diferentes
estilos:

3. Sem estilo

4. Sintaxe
A sintaxe CSS é constituída de três partes: um seletor (selector), um
propriedade (property) e um valor (value):
O seletor é normalmente o elemento/tag HTML que você deseja definir, a
propriedade é o atributo que você deseja mudar, e cada propriedade
pode ter um valor. A propriedade e o valor são separados por dois pontos
e circundadas por chaves:
Por que usar CSS?
CSS é usado para definir estilos para suas páginas da web, incluindo
o design, layout e as variações na exibição para diferentes
dispositivos e tamanhos de tela.
CSS resolveu um grande problema
HTML nunca foi destinado a conter tags de formatação de uma página
web!
HTML foi criado para descrever o conteúdo de uma página web,
como:
<H1> Este é um título </ h1>
<P> Este é um parágrafo. </ P>
Quando tags como <font> e atributos de cor foram adicionados à
especificação HTML 3.2, começou um pesadelo para os
desenvolvedores web. Desenvolvimento de grandes sites, onde fontes
e cores informações foram adicionadas para cada página, tornou-se
um processo longo e caro.
Para resolver este problema, o World Wide Web Consortium (W3C)
criou o CSS que removeu o estilo de formatação da página HTML e o
separou em um arquivo diferente.
Sintaxe CSS
selector {property: value}
body {color: black}
p {font-family: "sans serif"}
Se o valor contém múltiplas palavras, ponha aspas em torno do valor:
Observação: Se você deseja especificar mais de uma propriedade,
você deve separar cada propriedade com um ponto e vírgula. O
exemplo abaixo mostra como definir um parágrafo alinhado no centro,
com uma cor de texto vermelha:
p {text-align:center;color:red}

5. p
{
text-align: center;
color: black;
font-family: arial
}
Para tornar as definições de estilo mais legíveis, você pode descrever
uma propriedade em cada linha, assim:
h1,h2,h3,h4,h5,h6
{
color: green
}
Agrupamento
Você pode agrupar seletores. Separe cada seletor com uma vírgula. No
exemplo abaixo agrupamos todos os elementos header (título). Todos os
elementos header serão verdes:
p.right {text-align: right}
p.center {text-align: center}
<p class="right">
Este parágrafo será alinhado à direita.
</p>
<p class="center">
Este parágrafo será centralizado.
</p>
<p class="right" class="center">
Este é um parágrafo.
</p>
O Seletor class (classe)
Com o seletor class você pode definir diferentes estilos para o mesmo
tipo de elemento HTML. Digamos que você gostaria de ter dois tipos de
parágrafos em seu documento: uma parágrafo alinhado à direita, e um
parágrafo centralizado. Eis como você pode fazer isso com estilos:
Você tem que usar o atributo class no seu documento HTML:
Observação: Somente um atributo class pode ser especificado para
cada elemento HTML! O exemplo abaixo está errado:

6. .center {text-align: center}
<h1 class="center">
Este título será centralizado
</h1>
<p class="center">
Este parágrafo será também centralizado.
</p>
Você também pode omitir o nome da tag no seletor para definir um estilo
que será usado por todos os elementos HTML que tem uma certa
classe. No exemplo abaixo, todos os elementos HTML com
class="center" serão centralizados:
No código abaixo tanto o elemento h1 quanto o elemento p tem
class="center". Isto significa que ambos os elementos seguirão as regras
do seletor ".center": p#para1
{
text-align: center;
color: red
}
*#wer345 {color: green}
O seletor id
O seletor id é diferente do seletor class selector! Enquanto um seletor
class pode ser aplicado a VÁRIOS elementos numa página, um seletor
id sempre se aplica a somente UM elemento.
Um atributo ID deve ser único dentro do documento.
A regra de estilo abaixo será aplicada a um elemento p que tem seu
valor id como "para1":
A regra se estilo abaixo será aplicada ao primeiro elemento que tiver o
valor id de "wer345":
<h1 id="wer345">Algum texto</h1>
A regra de estilo abaixo será aplicada a este elemento h1:

7. p#wer345 {color: green}
<h2 id="wer345">Algum texto</h2>
A regra de estilo abaixo será aplicada a um elemento p que tiver o
valor id de "wer345":
A regra acima não será aplicada a este elemento h2:
/* Este é um comentário */
p
{
text-align: center;
/* Este é outro comentário */
color: black;
font-family: arial
}
Comentários em CSS
Você pode inserir um comentário na CSS para explicar o seu código, o
que pode ajuda-lo quando você editar o código fonte numa data
posterior. Um comentário será ignorado pelo navegador. Um comentário
em CSS começa com "/*", e termina com "*/", assim:
<head>
<link rel="stylesheet" type="text/css"
href="meuestilo.css" />
</head>
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Como Inserir uma Folha de Estilo
Quando um navegador lê uma folha de estilo, ele formata o documento
de acordo com ela. Há três maneiras de inserir uma folha de estilo:
Folha de Estilo Externa
Uma folha de estilo é ideal quando o estilo é aplicado a muitas páginas.
Com uma folha de estilo externa, você pode mudar a aparência de um
sítio Web inteiro mudando apenas um arquivo. Cada página deve
vincular-se com a folha de estilo usando a tag <link>. A tag <link> vai
dentro da seção head:
O navegador lerá as definições de estilo do arquivo meuestilo.css, e
formatará o documento de acordo com ela.
Uma folha de estilo externa pode ser escrita em qualquer editor de
texto. O arquivo não deve conter qualquer tag html. A sua folha de
estilo deve ser salva com uma extensão .css. Um exemplo de uma
folha de estilo está mostrado abaixo:

8. <head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Folha de Estilo Interna
Uma folha de estilo interna deve ser usada quando um único documento
tem um estilo particular. Você define estilos internos na seção head
usando a tag <style>, assim:
O navegador agora lerá as definições de estilo, e formatará o documento
de acordo com elas.
Observação: Um navegador normalmente ignora tags desconhecidas.
Isto significa que um navegador antigo que não suporta estilos, irá
ignorar a tag <style>, mas o conteúdo da tag <style> será exibido na
página. É possível prevenir um navegador antigo de exibir o conteúdo
escondendo-o num elemento de comentário HTML.
<p style="color: sienna; margin-left: 20px">
Este é um parágrafo
</p>
Estilos Inline (em linha)
Um estilo em linha perde muitas das vantagens das folhas de estilo pela
mistura de conteúdo com apresentação. Use este método com
parcimônia, como quando um estilo deve ser aplicado a uma única
ocorrência de um elemento.
Para usar estilos inline você usa o atributo de estilo na tag relevante. O
atributo de estilo pode conter qualquer propriedade CSS. O exemplo
mostra como mudar a cor e a margem esquerda de um parágrafo:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
Folhas de Estilo Múltiplas
Se algumas propriedades foram configuradas para o mesmo seletor em
diferentes folhas de estilo, os valores serão herdados da folha de estilo
mais específica
Por exemplo, uma folha de estilo externa tem estas propriedades para o
seletor h3:

9. h3
{
text-align: right;
font-size: 20pt
}
E uma folha de estilo interna tem estas propriedades para o seletor h3:
color: red;
text-align: right;
font-size: 20pt
Se a página com a folha de estilo interna também se vincula com a
folha de estilo externa as propriedades para h3 serão:
A cor é herdada da folha de estilo externa e o alinhamento do texto e o
tamanho da fonte são substituídos pela folha de estilo interna.