2. Web Design
Como vimos, o HTML é responsável pelo
conteúdo e pelas estruturas de marcação
das páginas, as TAGS.
3. 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).
4. Web Design
CSS, a Sintaxe:
h1 { color: green }
Seletor Propriedade Valor
(TAG)
Declaração
5. Web Design
CSS, a Sintaxe:
h1 { color: green }
Seletor Propriedade Valor
(TAG)
Declaração
/* exemplo de comentário */
6. Web Design
Com intuito de facilitar a aplicação de estilo
aos seletores (tags), o CSS conta com
recurso de IDs e CLASSes.
7. Web Design
Onde,
ID - identificadores exclusivos, só pode ser
utilizado uma vez.
Class - prédefinições de estilo, podem ser
usadas quantas vezes quiser.
8. 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 }
12. Web Design
Website pessoal (continuação)
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.
13. Web Design
Website pessoal (continuação)
Exemplo:
...
<head>
<title>Titulo do site</title>
<style>
body { background-color: black; }
</style>
</head>
...
