Conceitos e exemplos sobre o desenvolvimento web. HTML5, CSS3 Curso de HTML5 e CSS3

1. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página
para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será
exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular
arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página
para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será
exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular
arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

2. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Tags são as “marcas” usadas para informar ao navegador como deve ser apresentado o site.
As tags tem o seguinte formato: começam com um sinal de menor “” e terminam com um
sinal de maior “”.
Existem dois tipos de tags - tags de abertura: comando e tags de fechamento:
/comando. A diferença entre elas é que na tag de fechamento existe um barra “/”.
Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado
segundo o comando contido na tag.
Tags:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Tags são as “marcas” usadas para informar ao navegador como deve ser apresentado o site.
As tags tem o seguinte formato: começam com um sinal de menor “” e terminam com um
sinal de maior “”.
Existem dois tipos de tags - tags de abertura: comando e tags de fechamento:
/comando. A diferença entre elas é que na tag de fechamento existe um barra “/”.
Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado
segundo o comando contido na tag.
Tags:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

3. Tags:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Basicamente, a estrutura das tags são dividas em:
tags de abertura: comando
tags de fechamento: /comando.
A diferença entre elas é que na tag de fechamento contém um barra ( “/” ).
Tudo que estiver contido entre a abertura e o fechamento da tag será processado segundo o
comando contido na tag.
Tags:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Basicamente, a estrutura das tags são dividas em:
tags de abertura: comando
tags de fechamento: /comando.
A diferença entre elas é que na tag de fechamento contém um barra ( “/” ).
Tudo que estiver contido entre a abertura e o fechamento da tag será processado segundo o
comando contido na tag.

4. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
No HTML também existem algums tags onde a abertura e o fechamento se dá na mesma tag.
Essas tags contém comandos que não precisam conter algum conteúdo para serem
processadas, isto é, são tags de comandos isolados. Exemplos:
br , input
Tags:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
No HTML também existem algums tags onde a abertura e o fechamento se dá na mesma tag.
Essas tags contém comandos que não precisam conter algum conteúdo para serem
processadas, isto é, são tags de comandos isolados. Exemplos:
br , input
Tags:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

5. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Quantas tags HTML eu uso?
Quantas eu devo saber?
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Quantas tags HTML eu uso?
Quantas eu devo saber?
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

6. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
http://www.w3schools.com/
http://tableless.com.br/
http://html5doctor.com/
Onde encontrar
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
http://www.w3schools.com/
http://tableless.com.br/
http://html5doctor.com/
Onde encontrar
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

7. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de
fornecer uma referência para estilização por CSS ou captura por um script
• Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e
aplicar estilos
• Podemos ter ID e Class na mesma tag
• Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma
Classe e vice-versa
ID e Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de
fornecer uma referência para estilização por CSS ou captura por um script
• Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e
aplicar estilos
• Podemos ter ID e Class na mesma tag
• Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma
Classe e vice-versa
ID e Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

8. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de
fornecer uma referência para estilização por CSS ou captura por um script
Exemplo de uso:
div id=”azul”/div
div class=”verde”/div
ID e Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de
fornecer uma referência para estilização por CSS ou captura por um script
Exemplo de uso:
div id=”azul”/div
div class=”verde”/div
ID e Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

9. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
ID SÃO exclusivas:
• Cada elemento pode conter apenas um ID
• Cada página pode ter apenas um elemento com aquele ID
*seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento
ID:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
ID SÃO exclusivas:
• Cada elemento pode conter apenas um ID
• Cada página pode ter apenas um elemento com aquele ID
*seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento
ID:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

10. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Class NÃO são exclusivas:
• Você pode usar a mesma classe para várias tags
• Você pode usar várias classes para um mesmo elemento
Qualquer informação de estilo que precise ser aplicada a vários elementos em uma página
deve ser feita com uma class
Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Class NÃO são exclusivas:
• Você pode usar a mesma classe para várias tags
• Você pode usar várias classes para um mesmo elemento
Qualquer informação de estilo que precise ser aplicada a vários elementos em uma página
deve ser feita com uma class
Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

11. ID e Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Prefira sempre nomeá-los pela sua natureza,e não pelo que ele parece.
Exemplo de boas práticas:
● Os nomes das classes devem ser escritos sempre em caixa baixa.
● Os epaços devem ser representados por “underline” (.container_principal)
● Palavras compostas devem ser separadas por hífen (.verde-limão)
ID e Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Prefira sempre nomeá-los pela sua natureza,e não pelo que ele parece.
Exemplo de boas práticas:
● Os nomes das classes devem ser escritos sempre em caixa baixa.
● Os epaços devem ser representados por “underline” (.container_principal)
● Palavras compostas devem ser separadas por hífen (.verde-limão)

12. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
É bom saber que:
• Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e
aplicar estilos
• Podemos ter ID e Class na mesma tag
• Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma
Classe e vice-versa
ID e Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
HTML- Como funciona
É bom saber que:
• Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e
aplicar estilos
• Podemos ter ID e Class na mesma tag
• Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma
Classe e vice-versa
ID e Class:
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

13. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Qual o significado de estilo em cascata?
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Qual o significado de estilo em cascata?
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

14. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso (
importância, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma
regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior pêso
(importância, prioridade) determinada pela ordem do efeito cascata
fonte: maujor
Herança, Especificidade e !important
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso (
importância, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma
regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior pêso
(importância, prioridade) determinada pela ordem do efeito cascata
fonte: maujor
Herança, Especificidade e !important
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

15. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• In-line (o atributo style)
html
head
titleExemplo/title
/head
body style=”background-color: #FF0000;”
p style=”color: #FFF;”Teste/p
/body
/html
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• In-line (o atributo style)
html
head
titleExemplo/title
/head
body style=”background-color: #FF0000;”
p style=”color: #FFF;”Teste/p
/body
/html
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

16. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
seletor { propriedade: valor; }
Sintaxe CSS:
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
seletor { propriedade: valor; }
Sintaxe CSS:
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

17. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• In-line (o atributo style)
html
head
titleExemplo/title
/head
body style=”background-color: #FF0000;”
p style=”color: #FFF;”Teste/p
/body
/html
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• In-line (o atributo style)
html
head
titleExemplo/title
/head
body style=”background-color: #FF0000;”
p style=”color: #FFF;”Teste/p
/body
/html
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

18. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Interno ( utlizando a tag style)
html
head
titleExemplo/title
style type=”text/css”
body {background-color: #FF0000;}
/style
/head
body
p Teste/p
/body
/html
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Interno ( utlizando a tag style)
html
head
titleExemplo/title
style type=”text/css”
body {background-color: #FF0000;}
/style
/head
body
p Teste/p
/body
/html
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

19. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Importada ( utlizando um atributo @import)
style type=”text/css”
@import url(”style.css”);
/style
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Importada ( utlizando um atributo @import)
style type=”text/css”
@import url(”style.css”);
/style
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

20. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Externo ( utlizando um link)
link rel=”stylesheet” type=”text/css” href=”style/style.css” media=”all” /
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Externo ( utlizando um link)
link rel=”stylesheet” type=”text/css” href=”style/style.css” media=”all” /
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

21. Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Qual a maneira mais rápida de aprender CSS?
“Se você souber ou vier a descobrir no futuro, por favor
informe para eu colocar aqui!”
by maujor
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Qual a maneira mais rápida de aprender CSS?
“Se você souber ou vier a descobrir no futuro, por favor
informe para eu colocar aqui!”
by maujor
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty

22. • heroisdati.com
• maujor.com
• tableless.com
• pt-br.html.net
• desenvolvimentoparaweb.com
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Referências
• heroisdati.com
• maujor.com
• tableless.com
• pt-br.html.net
• desenvolvimentoparaweb.com
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento Web
David Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não
utiliza tabelas para dispor o conteúdo na página.
Ela compreende que os códigos HTMLs devem ser usados para
o propósito que foram criados, sendo que tabelas foram
criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: p, h1, form, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets
(folha de estilos em cascata)
Camadas Web
Algumas tags HTML:
• span
• header
• h1...h6
• table
• form
• footer
• article
• address
Camadas Web
Algumas tags HTML:
• html
• head
• body
• title
• a
• img
• p
• div
Camadas Web
HTML é semântica não é design
Referências