SlideShare uma empresa Scribd logo
1 de 7
Aulas CSS 3 
Por: Dorival Silva
O que é CSS? 
 CSS significa C ascading S tyle S heets 
 Folhas de Estilo em Cascata 
Os estilos definem como exibir elementos (tag’s) 
HTML 
Os estilos são normalmente guardados em arquivos 
.css externos. Folhas de estilo externas permitem que 
você altere a aparência e layout de todas as páginas 
em um site, apenas editando um único arquivo!
Sintax 
O conjunto de regras consiste em um seletor e um 
bloco de declarações: 
h2 {color: gold; fon-size:16px;} 
h2 { 
color: gold; 
font-size:16px; 
}
Seletor é o elemento HTML onde será aplicado o estilo (h2) 
Em um bloco pode existir uma ou mais declarações separadas por “;” (ponto e 
vírgula) 
{color:gold; font-size:16px} 
Defina a propriedade e aplique o valor separando com “:” (dois pontos) 
color(propriedade):gold(valor) 
font-size(propriedade):16px(valor)
Praticando 
Em um documento HTML digite as linhas: 
<head> 
<style> 
p { 
color: red; 
text-align: center; 
} 
</style> 
</head>
Resumo 
 Faça um breve resumo do que foi apresentado 
 Identifique formas de aplicar o treinamento 
 Solicite comentários sobre a sessão de treinamento

Mais conteúdo relacionado

Mais procurados (20)

CSS
CSSCSS
CSS
 
Aula 4 css
Aula 4   cssAula 4   css
Aula 4 css
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
03css2005
03css200503css2005
03css2005
 
CSS
CSSCSS
CSS
 
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
HTML -  Listas, Estilos, Tabelas, Div, Span, FormulárioHTML -  Listas, Estilos, Tabelas, Div, Span, Formulário
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
CSS
CSSCSS
CSS
 
HTML - Introducao
HTML - Introducao HTML - Introducao
HTML - Introducao
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Folha de estilo css
 
Aula 11
Aula 11Aula 11
Aula 11
 
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
 
Desenvolvimento de sites css
Desenvolvimento de sites cssDesenvolvimento de sites css
Desenvolvimento de sites css
 
Apresentacao aula5
Apresentacao aula5Apresentacao aula5
Apresentacao aula5
 
Css introdução - madson dias
Css   introdução -  madson diasCss   introdução -  madson dias
Css introdução - madson dias
 
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-loCurso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
 
CSS - Parte 1
CSS - Parte 1CSS - Parte 1
CSS - Parte 1
 
Aula02 Desenvolvimento em Ambiente Web - CSS 3
Aula02 Desenvolvimento em Ambiente Web - CSS 3Aula02 Desenvolvimento em Ambiente Web - CSS 3
Aula02 Desenvolvimento em Ambiente Web - CSS 3
 
Curso HTML módulo 3 - Conceitos básicos CSS
Curso HTML módulo 3 - Conceitos básicos CSSCurso HTML módulo 3 - Conceitos básicos CSS
Curso HTML módulo 3 - Conceitos básicos CSS
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 

Destaque

Aula3 HTML 5 - Multimídia
Aula3 HTML 5 - MultimídiaAula3 HTML 5 - Multimídia
Aula3 HTML 5 - MultimídiaDorival Silva
 
Manual de identidade visual
Manual de identidade visualManual de identidade visual
Manual de identidade visualDorival Silva
 
Aula5 - Listas HTML 5
Aula5 - Listas HTML 5Aula5 - Listas HTML 5
Aula5 - Listas HTML 5Dorival Silva
 
Unb 2012.1 - dweb - d - comportamento dos elementos
Unb   2012.1 - dweb - d - comportamento dos elementosUnb   2012.1 - dweb - d - comportamento dos elementos
Unb 2012.1 - dweb - d - comportamento dos elementosClaudenio Alberto
 
Aula2 - Elementos Semânticos
Aula2 -  Elementos SemânticosAula2 -  Elementos Semânticos
Aula2 - Elementos SemânticosDorival Silva
 

Destaque (7)

Aula3 HTML 5 - Multimídia
Aula3 HTML 5 - MultimídiaAula3 HTML 5 - Multimídia
Aula3 HTML 5 - Multimídia
 
Manual de identidade visual
Manual de identidade visualManual de identidade visual
Manual de identidade visual
 
Aula4 - Formulário
Aula4 - FormulárioAula4 - Formulário
Aula4 - Formulário
 
Aula5 - Listas HTML 5
Aula5 - Listas HTML 5Aula5 - Listas HTML 5
Aula5 - Listas HTML 5
 
Aula5 - Listas
Aula5 - ListasAula5 - Listas
Aula5 - Listas
 
Unb 2012.1 - dweb - d - comportamento dos elementos
Unb   2012.1 - dweb - d - comportamento dos elementosUnb   2012.1 - dweb - d - comportamento dos elementos
Unb 2012.1 - dweb - d - comportamento dos elementos
 
Aula2 - Elementos Semânticos
Aula2 -  Elementos SemânticosAula2 -  Elementos Semânticos
Aula2 - Elementos Semânticos
 

Semelhante a CSS 3 - Aula 1 (20)

W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
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
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
 
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
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Aula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSSAula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSS
 
Css basico
Css basicoCss basico
Css basico
 
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 Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
 
Dream 06
Dream 06Dream 06
Dream 06
 
Html e css
Html e cssHtml e css
Html e css
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Css
CssCss
Css
 
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
 
Css – cascading style sheets
Css – cascading style sheetsCss – cascading style sheets
Css – cascading style sheets
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css
CssCss
Css
 
Resumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdfResumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdf
 

Último

Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdfReta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdfWagnerCamposCEA
 
Modelo de Plano Plano semanal Educação Infantil 5 anossemanal Educação Infant...
Modelo de Plano Plano semanal Educação Infantil 5 anossemanal Educação Infant...Modelo de Plano Plano semanal Educação Infantil 5 anossemanal Educação Infant...
Modelo de Plano Plano semanal Educação Infantil 5 anossemanal Educação Infant...AndreaCavalcante14
 
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfProjeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfHELENO FAVACHO
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médiorosenilrucks
 
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaPROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaHELENO FAVACHO
 
aula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptaula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptssuser2b53fe
 
Antero de Quental, sua vida e sua escrita
Antero de Quental, sua vida e sua escritaAntero de Quental, sua vida e sua escrita
Antero de Quental, sua vida e sua escritaPaula Duarte
 
About Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de HotéisAbout Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de Hotéisines09cachapa
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxTailsonSantos1
 
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSOLeloIurk1
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdfLeloIurk1
 
19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdfmarlene54545
 
praticas experimentais 1 ano ensino médio
praticas experimentais 1 ano ensino médiopraticas experimentais 1 ano ensino médio
praticas experimentais 1 ano ensino médiorosenilrucks
 
COMPETÊNCIA 2 da redação do enem prodção textual professora vanessa cavalcante
COMPETÊNCIA 2 da redação do enem prodção textual professora vanessa cavalcanteCOMPETÊNCIA 2 da redação do enem prodção textual professora vanessa cavalcante
COMPETÊNCIA 2 da redação do enem prodção textual professora vanessa cavalcanteVanessaCavalcante37
 
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdfPROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdfHELENO FAVACHO
 
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdfGEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdfRavenaSales1
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...HELENO FAVACHO
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfHELENO FAVACHO
 
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffffSSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffffNarlaAquino
 
migração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenosmigração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenosLucianoPrado15
 

Último (20)

Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdfReta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
 
Modelo de Plano Plano semanal Educação Infantil 5 anossemanal Educação Infant...
Modelo de Plano Plano semanal Educação Infantil 5 anossemanal Educação Infant...Modelo de Plano Plano semanal Educação Infantil 5 anossemanal Educação Infant...
Modelo de Plano Plano semanal Educação Infantil 5 anossemanal Educação Infant...
 
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfProjeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médio
 
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaPROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
 
aula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptaula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.ppt
 
Antero de Quental, sua vida e sua escrita
Antero de Quental, sua vida e sua escritaAntero de Quental, sua vida e sua escrita
Antero de Quental, sua vida e sua escrita
 
About Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de HotéisAbout Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de Hotéis
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
 
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
 
19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf
 
praticas experimentais 1 ano ensino médio
praticas experimentais 1 ano ensino médiopraticas experimentais 1 ano ensino médio
praticas experimentais 1 ano ensino médio
 
COMPETÊNCIA 2 da redação do enem prodção textual professora vanessa cavalcante
COMPETÊNCIA 2 da redação do enem prodção textual professora vanessa cavalcanteCOMPETÊNCIA 2 da redação do enem prodção textual professora vanessa cavalcante
COMPETÊNCIA 2 da redação do enem prodção textual professora vanessa cavalcante
 
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdfPROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
 
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdfGEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
GEOGRAFIA - COMÉRCIO INTERNACIONAL E BLOCOS ECONÔMICOS - PROF. LUCAS QUEIROZ.pdf
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
 
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffffSSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
 
migração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenosmigração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenos
 

CSS 3 - Aula 1

  • 1. Aulas CSS 3 Por: Dorival Silva
  • 2. O que é CSS?  CSS significa C ascading S tyle S heets  Folhas de Estilo em Cascata Os estilos definem como exibir elementos (tag’s) HTML Os estilos são normalmente guardados em arquivos .css externos. Folhas de estilo externas permitem que você altere a aparência e layout de todas as páginas em um site, apenas editando um único arquivo!
  • 3.
  • 4. Sintax O conjunto de regras consiste em um seletor e um bloco de declarações: h2 {color: gold; fon-size:16px;} h2 { color: gold; font-size:16px; }
  • 5. Seletor é o elemento HTML onde será aplicado o estilo (h2) Em um bloco pode existir uma ou mais declarações separadas por “;” (ponto e vírgula) {color:gold; font-size:16px} Defina a propriedade e aplique o valor separando com “:” (dois pontos) color(propriedade):gold(valor) font-size(propriedade):16px(valor)
  • 6. Praticando Em um documento HTML digite as linhas: <head> <style> p { color: red; text-align: center; } </style> </head>
  • 7. Resumo  Faça um breve resumo do que foi apresentado  Identifique formas de aplicar o treinamento  Solicite comentários sobre a sessão de treinamento

Notas do Editor

  1. Se existir ou for adicionada a tag <p> dentro de <body> a mesma será exibida com o estilo declarado em <head>