SlideShare uma empresa Scribd logo
CSS for Beginners
Introdução, sintaxe, boas práticas e receitas de bacalhau




            Pedro Couto e Santos
                  psantos@co.sapo.pt
Cascading Style Sheets

• Linguagem de estilização e formatação
• Funciona em conjunto com uma linguagem
  de markup (eg, XHTML)

• Separa conteúdo de layout e estilo
• Ajuda a melhorar acessibilidade
• Ajuda a melhorar manutenção
Integração de CSS num documento HTML


    Embedded
      <head>
      <style type=quot;text/cssquot;>
       body { font-family:Arial; font-size:12px; }
      </style>
      </head>


    Linked
      <head>
      <link type=quot;text/cssquot; rel=quot;stylesheetquot; href=quot;style.cssquot;>
      </head>


    Inline
      <p style=”color:blue;”>Texto azul.</p>
Anatomia de uma regra




 Selector                 Declaração


body {color: #000000;}
            Propriedade                Valor
Agregação de declarações




body {
color: #000000;       Declaração



font-size:12px;       Declaração



}
Tipos de selectores

tag
 entidade pré-definida pela linguagem
 de markup utilizada

.class
 selector definido pelo utilizador,
 especialmente adequado para
 definição de estilo (repetível)

#id
 selector definido pelo utilizador,
 especialmente adequado para
 definição de layout (único).
Herança e especificidade

Uma regra herda propriedades da
anterior com o mesmo nome pela ordem
em que surge na CSS.

h1 {font-weight:bold; font-family:Arial;}

h1 {font-size:36px;background-color:red;}

                    =
h1 {font-weight:bold; font-family:Arial;
font-size:36px;background-color:red;}
Herança e especificidade

Em caso de conflito, ganha a regra mais
abaixo na CSS


             h1 {color: green;}

             h1 {color:red;}

                   =
             h1 {color:red;}
Herança e especificidade

Cada tipo de selector tem um nível
de especificidade diferente.




tag             especificidade 1
class           especificidade 10
id              especificidade 100
Herança e especificidade


          .texto {color:yellow;}

          p {color:red;}


          <p class=”texto”>Olá</p>


Apesar da regra que define que os parágrafos são
vermelhos vir mais tarde na CSS, a classe “.texto”
tem uma especificidade maior, sobrepondo-se.
Herança e especificidade
.texto {color:yellow;}      Especificidade: 10
p {color:red;}              Especificidade: 1
p.texto {color:black;}      Especificidade: 11

       Existe ainda o !important

 em {text-decoration: underline !important;}

         THIS SUCKS!
            Se algo falha, verifiquem a CSS, o recurso
           ao !important é como matar formigas com
                  uma caçadeira: último recurso
Imagem de Andy Clarke - www.stuffandnonsense.co.uk (kudos, André Luís)
O box model


 Espaço ocupado pelo elemento

            width




  SAPO Sessions

Margin     Padding     Border
Versões


CSS nível 1
  Recomendação W3C, 1996. 53 Propriedades.


CSS nível 2
  Recomendação W3C, 1998. 122 Propriedades.
  Revisão 2.1 corrige bugs e remove propriedades para 115.


CSS nível 3
  Em desenvolvimento. Possivelmente passando a
  recomendação durante 2009. 224 Propriedades.
Links

Todas as propriedades de CSS e respectiva especificação
http://meiert.com/en/indices/css-properties/

Desenvolvimento de CSS na W3C
http://www.w3.org/Style/CSS/

Tudo sobre listas
http://css.maxdesign.com.au/listamatic/

A List Apart: CSS
http://www.alistapart.com/topics/code/css/

Tudo sobre especificidade
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

“O URL do costume”
http://www.csszengarden.com/

Mais conteúdo relacionado

Mais procurados

CSS
CSSCSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Agrupamento de Escolas da Batalha
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
Sergio Finamore
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
Carlos Eduardo Kadu
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
Rafael Rinaldi
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
Clara Ferreira
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
Sandra Oliveira
 
CSS tipo de letra (fontes)
CSS tipo de letra (fontes)CSS tipo de letra (fontes)
CSS tipo de letra (fontes)
Agrupamento de Escolas da Batalha
 
Css
Css   Css
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
Ester Razzo Fischer
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
Professor Samuel Ribeiro
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
Talita Pagani
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
Willian Magalhães
 
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEBCSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
Daniel Brandão
 
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
Renato Melo
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
Afonso Gomes
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
Léo Dias
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
Ritielle de Souza
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
Ritielle de Souza
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
Diego Eis
 

Mais procurados (20)

CSS
CSSCSS
CSS
 
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
CSS tipo de letra (fontes)
CSS tipo de letra (fontes)CSS tipo de letra (fontes)
CSS tipo de letra (fontes)
 
Css
Css   Css
Css
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEBCSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
 
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 

Semelhante a CSS for Beginners

Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
Fabrício Lopes Sanchez
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5
lucampos_si
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
Sergio Finamore
 
Css 3
Css 3Css 3
Css 3
Pedro Neto
 
Curso HTML e CSS Part2
Curso HTML e CSS Part2Curso HTML e CSS Part2
Curso HTML e CSS Part2
Herbet Ferreira Rodrigues
 
Css
CssCss
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
Kako Botasso
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
Andrea Dalforno
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
Israel Messias
 
2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS
Willian Magalhães
 
Sass
SassSass
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
Ricardo Pereira Rodrigues
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
Helder da Rocha
 
Css pra quê ?
Css pra quê ?Css pra quê ?
Css pra quê ?
Karoline Suzuki
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
Willian Magalhães
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
tdc-globalcode
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
MelquisedequeBenvind1
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
Felipe Fernandes
 

Semelhante a CSS for Beginners (20)

Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Css 3
Css 3Css 3
Css 3
 
Curso HTML e CSS Part2
Curso HTML e CSS Part2Curso HTML e CSS Part2
Curso HTML e CSS Part2
 
Css
CssCss
Css
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
 
2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS
 
Sass
SassSass
Sass
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
 
Css pra quê ?
Css pra quê ?Css pra quê ?
Css pra quê ?
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
 

Mais de SAPO Sessions

Como preparar apresentações
Como preparar apresentaçõesComo preparar apresentações
Como preparar apresentações
SAPO Sessions
 
Como Preparar Apresentações
Como Preparar ApresentaçõesComo Preparar Apresentações
Como Preparar Apresentações
SAPO Sessions
 
Supervisão e Monitorização
Supervisão e MonitorizaçãoSupervisão e Monitorização
Supervisão e Monitorização
SAPO Sessions
 
Storage
StorageStorage
Storage
SAPO Sessions
 
Falar Em Público
Falar Em PúblicoFalar Em Público
Falar Em Público
SAPO Sessions
 
Command Line
Command LineCommand Line
Command Line
SAPO Sessions
 
Arquitectura De Um Linux
Arquitectura De Um LinuxArquitectura De Um Linux
Arquitectura De Um Linux
SAPO Sessions
 
Linux: História e Distros
Linux: História e DistrosLinux: História e Distros
Linux: História e Distros
SAPO Sessions
 
Prototype e LibSAPO.js
Prototype e LibSAPO.jsPrototype e LibSAPO.js
Prototype e LibSAPO.js
SAPO Sessions
 
HTML - How To
HTML - How ToHTML - How To
HTML - How To
SAPO Sessions
 
JavaScript for Beginners
JavaScript for BeginnersJavaScript for Beginners
JavaScript for Beginners
SAPO Sessions
 
JavaScript done right
JavaScript done rightJavaScript done right
JavaScript done right
SAPO Sessions
 
Acessibilidade Web
Acessibilidade WebAcessibilidade Web
Acessibilidade Web
SAPO Sessions
 

Mais de SAPO Sessions (13)

Como preparar apresentações
Como preparar apresentaçõesComo preparar apresentações
Como preparar apresentações
 
Como Preparar Apresentações
Como Preparar ApresentaçõesComo Preparar Apresentações
Como Preparar Apresentações
 
Supervisão e Monitorização
Supervisão e MonitorizaçãoSupervisão e Monitorização
Supervisão e Monitorização
 
Storage
StorageStorage
Storage
 
Falar Em Público
Falar Em PúblicoFalar Em Público
Falar Em Público
 
Command Line
Command LineCommand Line
Command Line
 
Arquitectura De Um Linux
Arquitectura De Um LinuxArquitectura De Um Linux
Arquitectura De Um Linux
 
Linux: História e Distros
Linux: História e DistrosLinux: História e Distros
Linux: História e Distros
 
Prototype e LibSAPO.js
Prototype e LibSAPO.jsPrototype e LibSAPO.js
Prototype e LibSAPO.js
 
HTML - How To
HTML - How ToHTML - How To
HTML - How To
 
JavaScript for Beginners
JavaScript for BeginnersJavaScript for Beginners
JavaScript for Beginners
 
JavaScript done right
JavaScript done rightJavaScript done right
JavaScript done right
 
Acessibilidade Web
Acessibilidade WebAcessibilidade Web
Acessibilidade Web
 

Último

Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 

Último (8)

Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 

CSS for Beginners

  • 1. CSS for Beginners Introdução, sintaxe, boas práticas e receitas de bacalhau Pedro Couto e Santos psantos@co.sapo.pt
  • 2. Cascading Style Sheets • Linguagem de estilização e formatação • Funciona em conjunto com uma linguagem de markup (eg, XHTML) • Separa conteúdo de layout e estilo • Ajuda a melhorar acessibilidade • Ajuda a melhorar manutenção
  • 3. Integração de CSS num documento HTML Embedded <head> <style type=quot;text/cssquot;> body { font-family:Arial; font-size:12px; } </style> </head> Linked <head> <link type=quot;text/cssquot; rel=quot;stylesheetquot; href=quot;style.cssquot;> </head> Inline <p style=”color:blue;”>Texto azul.</p>
  • 4. Anatomia de uma regra Selector Declaração body {color: #000000;} Propriedade Valor
  • 5. Agregação de declarações body { color: #000000; Declaração font-size:12px; Declaração }
  • 6. Tipos de selectores tag entidade pré-definida pela linguagem de markup utilizada .class selector definido pelo utilizador, especialmente adequado para definição de estilo (repetível) #id selector definido pelo utilizador, especialmente adequado para definição de layout (único).
  • 7. Herança e especificidade Uma regra herda propriedades da anterior com o mesmo nome pela ordem em que surge na CSS. h1 {font-weight:bold; font-family:Arial;} h1 {font-size:36px;background-color:red;} = h1 {font-weight:bold; font-family:Arial; font-size:36px;background-color:red;}
  • 8. Herança e especificidade Em caso de conflito, ganha a regra mais abaixo na CSS h1 {color: green;} h1 {color:red;} = h1 {color:red;}
  • 9. Herança e especificidade Cada tipo de selector tem um nível de especificidade diferente. tag especificidade 1 class especificidade 10 id especificidade 100
  • 10. Herança e especificidade .texto {color:yellow;} p {color:red;} <p class=”texto”>Olá</p> Apesar da regra que define que os parágrafos são vermelhos vir mais tarde na CSS, a classe “.texto” tem uma especificidade maior, sobrepondo-se.
  • 11. Herança e especificidade .texto {color:yellow;} Especificidade: 10 p {color:red;} Especificidade: 1 p.texto {color:black;} Especificidade: 11 Existe ainda o !important em {text-decoration: underline !important;} THIS SUCKS! Se algo falha, verifiquem a CSS, o recurso ao !important é como matar formigas com uma caçadeira: último recurso
  • 12. Imagem de Andy Clarke - www.stuffandnonsense.co.uk (kudos, André Luís)
  • 13. O box model Espaço ocupado pelo elemento width SAPO Sessions Margin Padding Border
  • 14. Versões CSS nível 1 Recomendação W3C, 1996. 53 Propriedades. CSS nível 2 Recomendação W3C, 1998. 122 Propriedades. Revisão 2.1 corrige bugs e remove propriedades para 115. CSS nível 3 Em desenvolvimento. Possivelmente passando a recomendação durante 2009. 224 Propriedades.
  • 15. Links Todas as propriedades de CSS e respectiva especificação http://meiert.com/en/indices/css-properties/ Desenvolvimento de CSS na W3C http://www.w3.org/Style/CSS/ Tudo sobre listas http://css.maxdesign.com.au/listamatic/ A List Apart: CSS http://www.alistapart.com/topics/code/css/ Tudo sobre especificidade http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html “O URL do costume” http://www.csszengarden.com/