O documento descreve como criar folhas de estilo em CSS para formatar páginas web, definindo estilos para elementos como cabeçalhos, parágrafos e o corpo geral. Explica como separar a estrutura HTML do layout visual usando CSS e como criar e aplicar regras de estilo personalizadas.
2. • CSS é a sigla em inglês para Cascading Style Sheet que
em português foi traduzido para folha de estilo em
cascata e é definida como:
• Folha de estilo em cascata é um mecanismo simples
para adicionar estilos
(p.ex., fontes, cores, espaçamentos) aos
documentos Web.
3. • A grande vantagem do uso de CSS é a de separar a
marcação HTML, da apresentação do site. Em outras
palavras, vale dizer que o HTML destina-se unicamente
a estruturar e marcar o conteúdo, ficando por conta
das CSS toda a responsabilidade pelo visual do site
4. • Temos aqui três conjuntos de 'tags' - as
tags, normalmente são aos pares, mas nem sempre é
assim. Englobando toda a página temos o par de
tags <html>...</html>. A primeira <html> é a 'tag de
abertura' e a 'tag' de fechamento é a mesma com uma /
(barra) entre o sinal de 'menor que' (<) e html.
5. • O par de tags <body>...</body> engloba todo o conteúdo
da sua página Web, texto, imagens, filmes Flash - e tudo
mais.
6. • Cria-se um parágrafo, colocando texto entre o par de
tags <p>...</p>. Em HTML, um parágrafo é um bloco
constituido de uma ou mais sentenças separado do
próximo bloco por um espaço
7. • Para títulos, existem seis níveis distintos de ênfase, indo
desde o mais alto nível <h1>...</h1> até o mais
baixo<h6>...</h6>
8. • Uma folha de estilos é conceitualmente bem simples, ela
é uma página contendo definições ou especificações de
estilos, que instrui o navegador como apresentar os
diferentes elementos de uma página
9. • Para simplificar, começaremos construindo
nossa folha de estilos dentro da própria
página Web
Os estilos que iremos usar serão definidos
dentro do par de tags <head>...</head>
como mostrado a seguir...
10. • type="text/css" diz ao navegador que estamos usando
um arquivo de texto puro para descrever nossos estilos,
nada de especial aqui.
• title="mystyles" tem por finalidade identificar seus estilos
através de um nome de sua livre escolha.
• media="all" Você pode ter uma folha de estilos para
descrever como sua página será apresentada na tela de
um computador (media="screen") e outra completamente
diferente para formatar sua página para impressão
(media="print").
11. • Os caracteres <!-- e --> se constituem em um modo de
se 'esconder' texto em uma página Web - você verá os
textos somente na marcação do código. Isto é
denominado 'comentario', e uma vez que os estilos estão
dentro da seção <head>...</head> do documento, eles
não deverão aparecer na apresentação.
12. • A primeira coisa que faremos será definir os estilos para
a página como um todo, o body da página. Tudo que
estiver dentro das tags <body>...</body> terá este estilo
ou conjunto de estilos que lhe for aplicado.
13.
14. • Devemos clicar em nova regra desta forma vamos criar
uma folha de estilos .....
17. • Agora salvaremos
escolher Um nome para
o nosso Novo estilo
OBS: O arquivo deverá
Obrigatoriamente ser
salvo Na pasta do SITE
18. • Devemos salvar nosso estilo na mesma pasta que os
nossos outros arquivos já estão salvos
19. • Nessa etapa iremos definir qual o padrão que iremos
usar .
20. Nome Função
color cor da fonte
font-family tipo de fonte
font-size tamanho de fonte
font-style estilo de fonte
font maneira abreviada para todas as
propriedades
21. • Agora com o estilo já
salvo basta selecionar o
texto que ira receber o
estilo vá em parágrafo e
selecione o
correspondente