SlideShare una empresa de Scribd logo
1 de 8
Introdução CSS
Style Sheet
Professor: Jolvani
Aula 01
Style Sheet CSS


Este é mais um curso, aulas para Vc. Estas são
as aulas de CSS que vai tornar a sua vida, no
mundo Web, muito mais colorido como a
imagem.



Mas o que é CSS?



Vamos abrir nosso browser e ver na prática
www.w3c.org



CSS é uma abreviação do termo inglês
Cascading style sheet – Folha de estilos em
cascata.



Folha de estilos em cascata é um mecanismo
simples pra adicionar estilos (fontes, cores,
espaçamentos) aos documentos Web.
Style Sheet CSS


Então CSS é mais uma tecnologia que vimos
aqui que são normatizadas pelo consórcio
W3C



Logo no início vemos o html e CSS como a
base e a estrutura das aplicações Web.



Os dois aparecem juntos, inclusive aprender
CSS tem como pré-requisito o conhecimento
de html.



Ou seja, para ser um bom programador de
interface vc precisa conhecer as duas
tecnologias....



Na w3schools nos encontramos as referencias
e tutorias html, css, css3, outros scripts...
Style Sheet CSS


Por enquanto o CSS é o mais utilizado e suportado
pelos diferentes tipos de browsers, pois o CSS3
apesar de oferecer recursos poderosos não é
suportado por todos os browsers...



Nas aulas xhtml descobrimos que ele deve ser
usado somente para estruturar o nosso conteúdo,
somente para fazer as marcações semânticas...



E o visual, o estilo de nossa página, fica por conta
do css, essa é a grande “casada” do mundo web



Então quando a gente vê um portal como a
w3schools por exemplo ou W3C, esse design, esse
layout, essas cores são definidas por uma folha de
estilos que centraliza toda a construção desse
layout.
Style Sheet CSS


Cada browser pode exibir ou não o css... Vamos
fazer um teste e visualizar somente o html...



Dessa forma que foi construído o html dessa
página veja que não é nada amigável (bonito)...



Possibilidades que envolvem o css2, como o css3
não é suportado em todos os browser usar o css2
possibilita que todas as páginas criadas rodam em
todos os browsers...



A página css zen Garden é onde designers do
mundo inteiro criam css e aplicam a essa pagina.



Vamos a página www.csszengarden.com
Style Sheet CSS


Nela podemos definir outro estilo selecionando ao lado
direito, altere e observe a diferença...



Veja toda estrutura diferente, todo layout diferente,
aplicado a mesma pagina, até parece outra pagina...



Parece que navegamos em portais diferentes...



Continuem navegando e percebam a flexibilidade que
possuímos em alterar layout, estilo visual sem mexer
nada no código html...
Style Sheet CSS


Existem muitas paginas que falam sobre css como
cssmaina, apresentando vários projetos para a
construção de portais com recursos css



Também o portal tableless encontramos sobre html e css



Lembrando o html é usado para estruturar suas paginas
e o css é usado para apresentar visualmente aquela
página, então até a próxima aula....
Próxima Aula: Sintaxe CSS

Más contenido relacionado

La actualidad más candente (20)

CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoCSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
Arquitetura CSS - Uma rápida introdução
Arquitetura CSS - Uma rápida introduçãoArquitetura CSS - Uma rápida introdução
Arquitetura CSS - Uma rápida introdução
 
Desenvolvimento de sites css
Desenvolvimento de sites cssDesenvolvimento de sites css
Desenvolvimento de sites 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
 
Css pra quê ?
Css pra quê ?Css pra quê ?
Css pra quê ?
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 
Arquitetura CSS - SMACSS + OOCS + BEM
Arquitetura CSS - SMACSS + OOCS + BEMArquitetura CSS - SMACSS + OOCS + BEM
Arquitetura CSS - SMACSS + OOCS + BEM
 
CSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEMCSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEM
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Slides Css3
Slides Css3 Slides Css3
Slides Css3
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte I
 
Smacss e-css-faz-bem
Smacss e-css-faz-bemSmacss e-css-faz-bem
Smacss e-css-faz-bem
 
Css
CssCss
Css
 
14 CSS Introdução
14 CSS Introdução14 CSS Introdução
14 CSS Introdução
 
CSS Modules
CSS ModulesCSS Modules
CSS Modules
 
Super CSS
Super CSSSuper CSS
Super CSS
 
Aula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSSAula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSS
 

Similar a Aula 01 introdução css

CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa Ferreira
 
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012André Paulovich
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASSLarissa Carvalho
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Apostila completa de css
Apostila completa de cssApostila completa de css
Apostila completa de cssHeitor Victorio
 
CSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seCSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seJulio Vedovatto
 
Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3Diego Doná
 
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: CSSAgrupamento de Escolas da Batalha
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdfRubenManhia
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marquesWillian Marques
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSManoel Afonso
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheetMorvana Bonin
 
DSI-PARTE 5 formação de websites e programas .pdf
DSI-PARTE 5 formação de websites e programas .pdfDSI-PARTE 5 formação de websites e programas .pdf
DSI-PARTE 5 formação de websites e programas .pdfthallyssonedu1209199
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha fevooduck
 

Similar a Aula 01 introdução css (20)

Css tutorial
Css tutorialCss tutorial
Css tutorial
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
 
Css
CssCss
Css
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Apostila completa de css
Apostila completa de cssApostila completa de css
Apostila completa de css
 
CSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seCSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-se
 
Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3
 
Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui
 
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
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
 
Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSS
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
 
DSI-PARTE 5 formação de websites e programas .pdf
DSI-PARTE 5 formação de websites e programas .pdfDSI-PARTE 5 formação de websites e programas .pdf
DSI-PARTE 5 formação de websites e programas .pdf
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha
 

Más de Jolvani Morgan

Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com cssJolvani Morgan
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Jolvani Morgan
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoJolvani Morgan
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryJolvani Morgan
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listasJolvani Morgan
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksJolvani Morgan
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosJolvani Morgan
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. backgroundJolvani Morgan
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Jolvani Morgan
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box modelJolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesJolvani Morgan
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução cssJolvani Morgan
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificaçãoJolvani Morgan
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5Jolvani Morgan
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingJolvani Morgan
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeJolvani Morgan
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesJolvani Morgan
 

Más de Jolvani Morgan (20)

Aula 33. css sprite
Aula 33. css spriteAula 33. css sprite
Aula 33. css sprite
 
Aula 32. menu só com css
Aula 32. menu só com cssAula 32. menu só com css
Aula 32. menu só com css
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamento
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j query
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listas
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de links
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhos
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. background
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box model
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simples
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificação
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encoding
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidade
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controles
 

Aula 01 introdução css

  • 2. Style Sheet CSS  Este é mais um curso, aulas para Vc. Estas são as aulas de CSS que vai tornar a sua vida, no mundo Web, muito mais colorido como a imagem.  Mas o que é CSS?  Vamos abrir nosso browser e ver na prática www.w3c.org  CSS é uma abreviação do termo inglês Cascading style sheet – Folha de estilos em cascata.  Folha de estilos em cascata é um mecanismo simples pra adicionar estilos (fontes, cores, espaçamentos) aos documentos Web.
  • 3. Style Sheet CSS  Então CSS é mais uma tecnologia que vimos aqui que são normatizadas pelo consórcio W3C  Logo no início vemos o html e CSS como a base e a estrutura das aplicações Web.  Os dois aparecem juntos, inclusive aprender CSS tem como pré-requisito o conhecimento de html.  Ou seja, para ser um bom programador de interface vc precisa conhecer as duas tecnologias....  Na w3schools nos encontramos as referencias e tutorias html, css, css3, outros scripts...
  • 4. Style Sheet CSS  Por enquanto o CSS é o mais utilizado e suportado pelos diferentes tipos de browsers, pois o CSS3 apesar de oferecer recursos poderosos não é suportado por todos os browsers...  Nas aulas xhtml descobrimos que ele deve ser usado somente para estruturar o nosso conteúdo, somente para fazer as marcações semânticas...  E o visual, o estilo de nossa página, fica por conta do css, essa é a grande “casada” do mundo web  Então quando a gente vê um portal como a w3schools por exemplo ou W3C, esse design, esse layout, essas cores são definidas por uma folha de estilos que centraliza toda a construção desse layout.
  • 5. Style Sheet CSS  Cada browser pode exibir ou não o css... Vamos fazer um teste e visualizar somente o html...  Dessa forma que foi construído o html dessa página veja que não é nada amigável (bonito)...  Possibilidades que envolvem o css2, como o css3 não é suportado em todos os browser usar o css2 possibilita que todas as páginas criadas rodam em todos os browsers...  A página css zen Garden é onde designers do mundo inteiro criam css e aplicam a essa pagina.  Vamos a página www.csszengarden.com
  • 6. Style Sheet CSS  Nela podemos definir outro estilo selecionando ao lado direito, altere e observe a diferença...  Veja toda estrutura diferente, todo layout diferente, aplicado a mesma pagina, até parece outra pagina...  Parece que navegamos em portais diferentes...  Continuem navegando e percebam a flexibilidade que possuímos em alterar layout, estilo visual sem mexer nada no código html...
  • 7. Style Sheet CSS  Existem muitas paginas que falam sobre css como cssmaina, apresentando vários projetos para a construção de portais com recursos css  Também o portal tableless encontramos sobre html e css  Lembrando o html é usado para estruturar suas paginas e o css é usado para apresentar visualmente aquela página, então até a próxima aula....