11

rohersmoura@gmail.comdanielrohers

Daniel Röhers MouraSoftware Engineer @ HandsOn.TV

+

< font >

</ font >

2

3

CSSCascading Style Sheet

4

Algumas vantagens…

• Separação HTML -> Estilo

• Reaproveitamento de estilo (código)

• Carregamento mais rápido => Performance

• Animações e muito mais

5

Onde se aplica

• Tags HTML

• ID’s

• Classes

6

#id vs

.class7

http://goo.gl/TIxYkP

Class

“As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a vários elementos de uma vez.”

8

ID

9

“As ids são uma forma de identificar um elemento, e devem ser únicas.”

Sintaxe

seletor {

propriedade: valor;

}

10

Mas como iniciar?

11

index.html style.css

Exemplo básico

12

Efeito cascata / prioridade

index.html style.css

13

Agrupamento de seletores

14

Seletor Classe/ID

15

Comentário

16

Como funciona?

17

http://goo.gl/Ea5fcD18

MAUJORO dinossauro das CSS

http://www.maujor.com19

http://css-tricks.com20

http://www.w3schools.com21

http://css-weekly.com22

23

Media Queries

24

BEM Block Element Modifier

https://goo.gl/lrNsnE http://getbem.com

.block

.block__element

.block__element—modifier

25

Vamos codar?Não… Prototipar ;)

26

https://wireframe.cc27

Protótipo pronto=

codar

28

29

30