Curso de CSS3..

2. Unidade 1 - Conteúdo
O QUE É CSS
NOVIDADES DO CSS3
COMO FUNCIONA
SINTAXE
SELETORES
PROPRIEDADES

3. 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.

4. 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.

5. 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.

6. 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.

7. 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>

8. 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.

9. 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;
}

10. 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;
}

11. 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;
}

12. 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;
}

13. 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;
}

14. 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;
}

15. 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;
}

16. 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;
}

17. 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

18. 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

19. 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.

20. CSS EXTERNO
exemplo2.html exemplo2.css

21. 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.

22. 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

23. 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.

24. 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

25. Exemplo
p {
color: #eeeeee;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 16px;
font-family: sans-serif;
}

26. OUTRAS PROPRIEDADES
Existem diversas outras propriedades que serão abordadas ao longo das próximas aulas
Começaremos com as propriedades de posicionamento e alinhamentos.

27. Sobre o autor
Formado Técnico em Informática pela Universidade Federal de Viçosa Campus Florestal/MG,
Graduado em Sistemas de Informação pela Faculdade Pitágoras Campus Divinópolis/MG.
Profissional certificado pela Microsoft nos exames Microsoft Office Specialist (MOS) de Word
2010, Powerpoint 2010 e Excel 2010 além de aprovado em diversos cursos da Microsoft Virtual Academy
(MVA) dentre eles: PowerShell 3.0, HTML5 - Homologado pelo W3C e SQL Server para DBAs Oracle.
Trabalha como designer gráfico e webmaster desde 2007, tendo feito diversos trabalhos de criação
de identidade visual contendo elementos como logos, cartões de visitas, banners, sites dinâmicos e outros.

28. Sobre o autor
Atuou como Instrutor na People - Informática e Idiomas, da cidade de Divinópolis em Minas Gerais, de
2011 até 2016, onde ministrou cursos de diversos assuntos como Adobe Photoshop, Adobe Illustrator, Adobe
Indesign, Adobe Dreamweaver, HTML, CSS, Flash, Actionscript, Windows 7, Windows 8, Office 2010, Excel
Avançado e Excel com VBA.
Também criador e responsável pelo conteúdo e manutenção dos blog’s cujo os endereços estão listados
abaixo, onde procura compartilhar parte do conhecimento com outros profissionais e estudantes de design e
programação.
rabiscandonophotoshop.blogspot.com.br
worldwildwebdesign.blogspot.com.br

29. Contatos
Skype: leo.diaz1985
Twitter: wilborn7
Facebook: www.facebook.com/wilborn7