Slide com o princípio dos conceitos de web, trabalhando os conceitos iniciais de estilos em páginas web.

1. CSS
Trabalhando com Folha de Estilos
Professor Daniel Brandão
www.danielbrandao.com.br

2. O que é CSS?
 O termo CSS é uma abreviação de Cascading Style Sheet, que
traduzimos folha de estilo em cascata. Segundo a W3C a
definição de CSS é:
 “Folha de estilo em cascata é m mecanismo simples
para adicionar estilos (por exemplo:
fontes, cores, espaçamentos) aos documentos
web.”
www.danielbrandao.com.br

3. Como Escrever
 Para que você entenda a sintaxe do CSS, vamos destacar como escrevemos
as regras de apresentação.
www.danielbrandao.com.br

4. Regra CSS:
 As regras são constituídas de um seletor e o bloco de
configuração:
 Seletor: Quando construímos uma regra não fazemos de
forma individual por elemento de nosso documento,
criamos na verdade um modelo que será aplicado a todos os
elementos no qual sejam enquadrados através do seletor
 Configuração: Definimos como os elementos serão afetados
com relação a sua apresentação
Propriedade: característica que será configurada
Valor: valor que será atribuído a propriedade configurada
seletor {
propriedade: valor;
}
www.danielbrandao.com.br

5. Em funcionamento seria:
P {
color: #EFEFEF;
background-color: #FF0;
font-style: oblique;
text-align: right;
}
www.danielbrandao.com.br

6. Seletores agrupados:
H1, H2, H3 {
color: #EFEFEF;
font-family: sans-serif;
}
www.danielbrandao.com.br

7. Seletores encadeados:
Div p strong a {
color: #EFEFEF;
}
www.danielbrandao.com.br

8. Seletor de classe:
Permite que elementos do mesmo tipo
possam ter apresentações diferenciadas.
.Texto1 {
color: #EFEFEF;
font-family: sans-sarif;
}
www.danielbrandao.com.br

9. Seletor de classe
 Podemos ainda configurar para um mesmo elemento mais
de uma classe, para isso apenas é necessário colocar um
espaço entre os nomes das classes
p.Titulo {
color: #EFEFEF;
font-size: 16px;
}
p.Texto {
color: #000;
font-size: 12px;
}
www.danielbrandao.com.br

10. Seletor de Identificadores
O identificador deverá ser aplicado apenas a um
elemento HTML através da propriedade id
#Texto {
color: #EFEFEF;
font-family: sans-sarif;
}
www.danielbrandao.com.br