SlideShare a Scribd company logo
1 of 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

More Related Content

What's hot (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
 

Viewers also liked

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
 

Viewers also liked (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
 

Similar to 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
 

Recently uploaded

A Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das MãesA Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das MãesMary Alvarenga
 
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)Mary Alvarenga
 
Lírica Camoniana- A mudança na lírica de Camões.pptx
Lírica Camoniana- A mudança na lírica de Camões.pptxLírica Camoniana- A mudança na lírica de Camões.pptx
Lírica Camoniana- A mudança na lírica de Camões.pptxfabiolalopesmartins1
 
William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfAdrianaCunha84
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresLilianPiola
 
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicasCenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicasRosalina Simão Nunes
 
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxSlides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxLuizHenriquedeAlmeid6
 
Regência Nominal e Verbal português .pdf
Regência Nominal e Verbal português .pdfRegência Nominal e Verbal português .pdf
Regência Nominal e Verbal português .pdfmirandadudu08
 
Guia completo da Previdênci a - Reforma .pdf
Guia completo da Previdênci a - Reforma .pdfGuia completo da Previdênci a - Reforma .pdf
Guia completo da Previdênci a - Reforma .pdfEyshilaKelly1
 
Pedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxPedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxleandropereira983288
 
Aula - 2º Ano - Cultura e Sociedade - Conceitos-chave
Aula - 2º Ano - Cultura e Sociedade - Conceitos-chaveAula - 2º Ano - Cultura e Sociedade - Conceitos-chave
Aula - 2º Ano - Cultura e Sociedade - Conceitos-chaveaulasgege
 
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptxATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptxOsnilReis1
 
Simulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdfSimulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdfEditoraEnovus
 
E agora?! Já não avalio as atitudes e valores?
E agora?! Já não avalio as atitudes e valores?E agora?! Já não avalio as atitudes e valores?
E agora?! Já não avalio as atitudes e valores?Rosalina Simão Nunes
 
Habilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasHabilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasCassio Meira Jr.
 
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologiaAula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologiaaulasgege
 
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMCOMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMVanessaCavalcante37
 
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptxSlides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptxLuizHenriquedeAlmeid6
 
Prova uniasselvi tecnologias da Informação.pdf
Prova uniasselvi tecnologias da Informação.pdfProva uniasselvi tecnologias da Informação.pdf
Prova uniasselvi tecnologias da Informação.pdfArthurRomanof1
 

Recently uploaded (20)

A Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das MãesA Arte de Escrever Poemas - Dia das Mães
A Arte de Escrever Poemas - Dia das Mães
 
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
 
Lírica Camoniana- A mudança na lírica de Camões.pptx
Lírica Camoniana- A mudança na lírica de Camões.pptxLírica Camoniana- A mudança na lírica de Camões.pptx
Lírica Camoniana- A mudança na lírica de Camões.pptx
 
William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdf
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
 
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicasCenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
 
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxSlides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
 
Regência Nominal e Verbal português .pdf
Regência Nominal e Verbal português .pdfRegência Nominal e Verbal português .pdf
Regência Nominal e Verbal português .pdf
 
Guia completo da Previdênci a - Reforma .pdf
Guia completo da Previdênci a - Reforma .pdfGuia completo da Previdênci a - Reforma .pdf
Guia completo da Previdênci a - Reforma .pdf
 
Pedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxPedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptx
 
Aula - 2º Ano - Cultura e Sociedade - Conceitos-chave
Aula - 2º Ano - Cultura e Sociedade - Conceitos-chaveAula - 2º Ano - Cultura e Sociedade - Conceitos-chave
Aula - 2º Ano - Cultura e Sociedade - Conceitos-chave
 
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptxATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
 
Simulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdfSimulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdf
 
E agora?! Já não avalio as atitudes e valores?
E agora?! Já não avalio as atitudes e valores?E agora?! Já não avalio as atitudes e valores?
E agora?! Já não avalio as atitudes e valores?
 
Habilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasHabilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e Específicas
 
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologiaAula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
 
Em tempo de Quaresma .
Em tempo de Quaresma                            .Em tempo de Quaresma                            .
Em tempo de Quaresma .
 
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMCOMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
 
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptxSlides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
 
Prova uniasselvi tecnologias da Informação.pdf
Prova uniasselvi tecnologias da Informação.pdfProva uniasselvi tecnologias da Informação.pdf
Prova uniasselvi tecnologias da Informação.pdf
 

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

Editor's Notes

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