Web Design > html (aula 2)

Web Design
Quando os sonhos se tornam
realidade... (2)

Web Design
Como vimos, o HTML é responsável pelo
conteúdo e pelas estruturas de marcação
das páginas, as TAGS.

Web Design
E após a marcação estrutural, é hora de dar
forma e estilo visual aos elementos de
acordo com o layout desenvolvido.

E essa "estilização" é feita utilizando o CSS
(Cascate Style Sheets).

Web Design
CSS, a Sintaxe:

h1 { color: green }
Seletor Propriedade Valor
(TAG)
Declaração

Web Design
CSS, a Sintaxe:

h1 { color: green }
Seletor Propriedade Valor
(TAG)
Declaração

/* exemplo de comentário */

Web Design
Com intuito de facilitar a aplicação de estilo
aos seletores (tags), o CSS conta com
recurso de IDs e CLASSes.

Web Design
Onde,

ID - identificadores exclusivos, só pode ser
utilizado uma vez.

Class - prédefinições de estilo, podem ser
usadas quantas vezes quiser.

Web Design
Exemplo de aplicação,

ID - no CSS, é identificado por #
ex.: #cabecalho { background:black }

Class - é identificado por um . antes do
seletor
ex.: .box { border: 1px solid #000 }

Web Design
Vamos praticar um pouquinho...

Web Design
Website pessoal (continuação)

Web Design
body
#corpo
#containe
r
#coluna-
direita

#rodape

Web Design

Após a marcação estrutural, precisamos aplicar
as dimensões corretas aos boxes (DIVs).

Podemos agrupar as definições de estilo dentro
de uma tag <STYLE>, que deverá ser declarada
no <HEAD> do arquivo.

Web Design

Exemplo:
...
<head>
<title>Titulo do site</title>
<style>
body { background-color: black; }
</style>
</head>
...

Web Design > html (aula 2)

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Web Design > html (aula 2)

Mais de Felipe Fernandes

Último

Web Design > html (aula 2)