You are on page 1of 25

Unidade 1 - Conteúdo

O QUE É CSS
NOVIDADES DO CSS3
COMO FUNCIONA
SINTAXE
SELETORES
O que é o CSS?
Cascading Style Sheets (Folhas de Estilo em Cascata) que você deve conhecer pela sigla CSS é uma
linguagem de formatação para definir o estilo de uma página da web. Graças ao CSS é possível separar
o conteúdo da formatação além de configurar e controlar cada aspecto do design do layout de uma
página.
É importante diferenciar o HTML do CSS. HTML organiza e entrega a informação enquanto que o CSS
formata esta mesma informação. Esta informação pode ser um vídeo, uma imagem, um texto ou outro
elemento que o HTML possua. Na maioria das vezes está informação é um elemento visual.
A integração de HTML, CSS e Javascript aumenta as possibilidades de uso, porém a versão 3 do CSS
trouxe inúmeros novos recursos inclusive para animações simples sem o uso do Javascript.


História do CSS?
A linguagem CSS nem sempre existiu mas formatar e estruturar documentos digitais não é algo novo.
Desde os anos 70 já existiam linguagens como a SGML para estes fins. Mas o grande marco foi o
surgimento do HTML. Inicialmente a ideia do HTML não era a formatação e sim a estrutura dos dados.
Mas a medida que ele foi evoluindo e ganhando popularidade agregou recursos para controle da
aparência. Com o tempo isto criou problemas. A linguagem começou a ficar muito complexa e difícil
de se manter. Este quadro se agravou com as diferenças entres os navegadores.
Em 1995 Håkon e Bert Bos apresentaram uma proposta da linguagem para W3C - World Wide Web
Consortium .Em 1996 a recomendação oficial do CSS Nível 1 foi lançado. A aceitação da linguagem fez
com que dois anos depois o CSS Nível 2 chegasse. As mudanças desencadeadas da Web foram muitas
desde a adoção do CSS nas práticas de desenvolvimento. Depois de vários anos veio a necessidade de
uma reformulação, e então chegamos ao CSS Nível 3.


A versão 3
CSS3 é a versão mais recente do CSS. Está versão homologada pela World Wide Web Consortium
(W3C), é voltado para o conceito da Web 2.0 e para isto trás recursos para transições, imagens, e
efeitos para criação de animações.
Navegadores como Google Chrome, Opera, Safari, Mozilla Firefox e Internet Explorer a partir da versão
9 dão suporte ao CSS3. O novos recursos do CSS3 facilita o trabalho dos desenvolvedores e proporciona
aos suários, pela variedade de transformações na apresentação de uma página.

Como funciona?
A principal função do CSS é separar a formatação de um conteúdo da estrutura HTML. O navegador
solicita ao servidor as informações. A estrutura em HTML é carregada e a nela uma ligação (link) de
uma folha de estilo, um arquivo CSS que também será carregada. Caso hajam scripts estes também se
juntarão ao outros.
O resultado apresentado no navegador a junção de todas estas linguagens e tecnologias.


Sintaxe
A sintaxe do código CSS é divida entre seletores e propriedades. Veja o exemplo da estrutura:

O seletor p aponta para o elemento HTML representado pela tag <p>

Seletores
Os seletores representam estruturas que são usadas como condições para a formatação. podemos
atribuir qualquer propriedade para os elementos representados pelas tags no html e referenciados
pelos seletores.
Por exemplo se temos a Tag <p> no código HTML e desejamos formata-la no código CSS criaremos o
seletor p e dentro das chaves { } vamos atribuir as propriedades e seus valores.
Exemplo:
p {
color: # 000000;
}
Já vimos este exemplo ao falar da sintaxe.
Existem diversos tipos de seletores, e cada tipo permite alterar as condições em que faremos a
formatação.
Tipos de Seletores
Seletores de Classe
Quando precisamos de aplicar a mesma formatação a elementos mesmo que sejam tags HTML diferentes
criamos uma classe. Todos os itens com a mesma classe herdarão as características declaradas no CSS. O
seletor da classe no CSS é iniciado com um ponto antes no nome. Veja o exemplo abaixo.
Exemplo:
Código HTML
<p class=“destaque”> Teste de Classe </p>
<div class=“destaque”> Este texto está formatado como o anterior</div>

Código CSS
.destaque {
color: # ffffff;
background:# 000000;
}

Tipos de Seletores
Seletores de ID
Quando o objeto a ser formatado é único utilizamos o seletor de ID para identificação. Neste caso apenas o
objeto identificado será alvo daquelas modificações. No CSS representamos um ID com o caractere # antes
do nome do seletor. Veja o exemplo abaixo.
Exemplo:
Código HTML
<p id=“titulo”> Teste de ID</p>
<div >Este texto está formatado como o anterior</div>

Código CSS
#titulo {
color: # eeeeee;
background:# cccccc;
}


Tipos de Seletores
Seletor Asterisco - *
Quando precisamos de aplicar a mesma formatação a todos elementos mesmo que sejam tags HTML
diferentes aplicamos o seletor asterisco. Todos os itens herdarão as características declaradas no CSS. Isto´é
muito útil para a técnica de reset. Veja o exemplo abaixo.
Exemplo:
Código HTML
<p >Teste de Asterísco * </p>
<div> Este texto está formatado como o anterior</div>

Código CSS
* {
color: # ffffff;
background:# eeeeee;
}

Tipos de Seletores
Seletor Adjacente - A + B
Este tipo de seletor é representado com um sinal de mais + entre os elementos. Ele aplica a formatação ao
elemento B que vem diretamente depois de A. Veja o exemplo abaixo.
Exemplo:
Código HTML
<p >Seletor Adjacente</p>
<div> Esta DIV será formatada.</div>
<div> Esta DIV não será formatada .</div>
Código CSS
p + div{
color: # ffffff;
background:# 000000;
font-weight: bold;
}

Tipos de Seletores
Seletor de Filhos - A B
Este tipo de seletor é representado sem sinais, utilizando apenas os nomes dos elementos, sua classe
ou id. Ele aplica a formatação ao elemento B que seja filho de A. Veja o exemplo abaixo.
Exemplo:
Código HTML
<div> Este <a> link </a> será formatado. <a>Este também</a></div>
<a> Este link não será formatado .</a>
Código CSS
div a{
color: # cccccc;
font-weight: bold;
}

Tipos de Seletores
Seletor de Filhos Diretos - A > B
Este tipo de seletor é representado com um sinal de maior > entre os elementos. Ele aplica a formatação ao
elemento B que seja o primeiro filho de A. Veja o exemplo abaixo.
Exemplo:
Código HTML
<ul>
<li>MG
<ul> <li> Belo Horizonte </li> </ul>
</li>
<li>SP</li>
</ul>
Código CSS
ul > li{
font-weight: bold;
}

Tipos de Seletores
Seletor not - A:not(B)
Este tipo de seletor é representado com uma expressão :not(). Ele aplica a formatação a todo elemento A
com exceção do elemento B. Veja o exemplo abaixo.
Exemplo:
Código HTML
<p class=“subtítulo”>Este é o subtítulo e não será formatado</p>
<p>Este paragrafo será formatado.</p>
<p> Este também.</p>
Código CSS
p:not(.subtitulo){
color: # eeeeee;
font-weight: bold;
}

Tipos de Seletores
Seletor de atributo - a[href*=“string"]
Este tipo de seletor é representado com uma expressão elemento[atributo=valor do atributo]. Ele
aplica a formatação a todo elemento que contenha naquele atributo o valor passado. Veja o exemplo
abaixo.
Exemplo:
Código HTML
<a href="http://www.google.com">Este link será formatado</a>
<a href="http://www.facebook.com">Este link não será formatado</a>
Código CSS
a[href*=“google"] {
color: # eeeeee;
font-weight: bold;
}

Tipos de Seletores

Existem diversos outros tipos de seletores que não foram abordados aqui. Infelizmente foi necessário
escolher alguns tipos para que o conteúdo não fique muito extenso. Recomendo que acessem os links
abaixo para ver mais detalhes.

www.w3.org/Style/CSS
www.w3schools.com/css
www.w3c.br



CSS INTERNO

Este tipo de aplicação foi usado por muito
tempo mas não a forma mais eficiente de
se trabalhar com CSS. Consiste em
declarar todo o conteúdo da formatação
CSS dentro da tag <style> na própria
página HTML.

Crie uma página e salve como
exemplo1.html. Agora digite o código de
exemplo
Exemplo 1
CSS EXTERNO

Outra forma de trabalhar é criar um arquivo onde ficará todo o Código CSS. O arquivo da folha de
estilo será salvo no formato .css e nele ficará toda formatação separada da estrutura do HTML. A
folha de estilo será relacionada à página HTML através da tag <link>.

Crie uma página e salve como exemplo2.html e digite o código HTML do exemplo 2. Agora crie uma
página e salve como exemplo2.css e digite o código CSS do exemplo 2.
CSS EXTERNO
exemplo2.html exemplo2.css
CSS EXTERNO

Uma das vantagens de se trabalhar com o CSS em um arquivo é externo é que se você tiver várias
páginas tanto a manutenção quanto a criação das mesmas se torna mais fácil e rápido. Isto porque
você só fará alterações em uma única página, na folha de estilo e automaticamente todas as páginas
HTML que possuírem uma ligação com o arquivo CSS herdarão a formatação.
CSS EXTERNO

A conexão entre o arquivo HTML e arquivo CSS foi feita através da tag <link>.
<link href="exemplo2.css" type="text/css" rel="stylesheet" media="all">
href - Contém a url do arquivo
type – Contém o tipo do arquivo da folha de estilo
rel – Com o valor stylesheet especifica que se trata de uma folha de estilo
media - Especifica o tipo de media de destino
PROPRIEDADES

Uma propriedade é uma característica a ser estilizada pelo CSS. Por exemplo se eu quiser alterar o
tamanho das letras utilizo a propriedade font-size . Existem diversos tipos de propriedades e cada
uma aceita certo de valores. Por exemplo font-size aceita apenas números seguidos da unidade ou
não como em font-size:16px.
PROPRIEDADES - FONT
Propriedade Função
color Cor da fonte
font-family Tipo da fonte
font-size Tamanho da fonte
font-style Estilo da fonte
font-variant Para fontes maiúsculas de menor altura
font-weight Intensidade do negrito
font Forma abreviada para todas as propiedades
Exemplo
p {
color: #eeeeee;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 16px;
font-family: sans-serif;
}