2. DEFINIÇÃO
CSS é uma linguagem para estilos que define o layout de documentos HTML. É
um mecanismo simples para adicionar estilos: fontes, cores, margens, linhas,
alturas, larguras, imagens de fundo, posicionamentos e etc.
Qual é a diferença entre CSS e HTML?
HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos
estruturados.
Profª Giorgia Barreto Lima Parrião 2
3. VANTAGENS
Economizar o seu tempo.
Diminuir o tamanho do código de sua página.
Sua página irá carregar mais rapidamente.
Mais facilidade de manter e fazer alterações na página.
Mais controle no layout da página.
Aplicação de diferentes layouts para servir diferentes mídias (tela,
impressora, etc.);
Profª Giorgia Barreto Lima Parrião 3
4. MÉTODOS DE APLICAÇÃO EM HTML
Método in-line (direto no html)
<body style =“background-color: black”>
Método interno (tag style)
<style type=“text/css”>
body { background-color: black;}
</style>
5. Método externo (link para uma folha de estilos)
<link rel=“stylesheet”type=“text/css” ref=“estilo.css”>
Dentro do estilo.css
body {background-color: black;}
5
6. Forma de inserção no código HTML
<html>
<head>
<title>Minha página com CSS </title>
<link rel=“stylesheet”type=“text/css” href=“estilo.css”>
</head>
<boby>
<h1>Está página tem estilo</h1>
</body>
</html>
6
7. REGRA CSS
É a unidade básica de uma folha de estilo (a menor porção do código)
capaz de produzir um efeito de estilização.
Composta por dois componentes: seletor e declaração
Prof.ª Giorgia Barreto Lima Parrião 7
8. COMPONENTES
Profª Giorgia Barreto Lima Parrião 8
Seletor: É a tag do elemento da marcação ou uma entidade capaz de definir com
precisão em qual lugar da marcação será aplicada a regra CSS. Um seletor
pode conter mais de uma declaração. Compreende
Declaração: Determina os parâmetros de estilização. :
Propriedade: característica do elemento
Valor: refere-se a quantidade ou qualidade do elemento
11. DIV
A tag <div> define uma divisão ou uma seção em um documento HTML, é
frequentemente utilizado para bloquear o grupo de elementos para formatá-los com
estilos. serve para formatar as caixas dando tamanho, bordas, cores e outras
funcionalidades.
O elemento div deve ser inserido na body. toda div deverá ser nomeada através
do atributo id , conforme exemplo:
<div” atributo id= “nome” >
Entre <div id= “nome”> e </div> coloca-se o conteúdo.
11
12. Os elementos div e span foram criados com o HTML 4 com a finalidade de fornecer um
mecanismo genérico para agrupar e prover estrutura aos documentos.
Uma id e/ou class é em geral usada para fornecer uma identidade a uma div ou span
com o propósito de fornecer uma referência para estilização por CSS ou captura por um
script.
HTML
<DIV CLASS="sidebar">Matemática</DIV>
CSS
DIV.sidebar
{
font-family: "Arial";
font-size: 12pt;
text-align: right;
background-color: #C0C0C0;
margin-left: 10px;
margin-right: 10px;
}
12
13. DIV - EXEMPLO
CSS
Style { background: white; font-size: 36px;}
HTML
<body>
<div id=“Style”> conteúdo </div>
</body>
13
14. ATRIBUTO CLASS
a função do atributo "class" é nomear a <div>. Com ele podemos definir
diferentes estilos para um mesmo elemento.
Por exemplo, se quiséssemos ter 2 tipos de parágrafos "<p>" em nosso site (um
alinhado à direita e outro centralizado) Fazemos assim:
15. CSS
p.right {text-align: right}
p.center {text-align: center}
HTML
<p class="right">
Este outro parágrafo está direita
</p>
<p class="center">
Este outro parágrafo está centralizado
</p>
Profª Giorgia Barreto Lima Parrião 15
16. ATRIBUTO ID
Assim como a "class“ sua função é nomear a <div>.
Com o atributo ID podemos definir um estilo único para ser utilizado em
muitos elementos.
17. CSS
#right {text-align: right}
HTML
<p id="right">
Este paragrafo também ficará alinhado à direita
</p>
<h3 id="right">
Este header também ficará alinhado à direita
</h3>
Observação: o atributo ID deve ter valor único no documento.
17
18. DIFERENÇAS
Profª Giorgia Barreto Lima Parrião 18
CLASS
Vários estilos para um único
elemento (seletor).
ID
Estilo único para muitos
elementos (seletor).
.
x
22. EXERCÍCIO
1. Crie um site com 3 páginas (home, produtos, contato) utilizando a
linguagem de marcação HTML.
A. HOME: Deverá conter uma apresentação do produto comercializado pela
empresa escolhida por você.
B. PRODUTOS: Apresentar pelo menos 6 produtos com a apresentação de foto,
descrição do produto e valor.
C. CONTATO: Formulário de contato (Nome, e-mail, telefone, endereço, campo
para deixar o recado e botão submit e reset)
Profª Giorgia Barreto Lima Parrião 22
23. Orientações
A escolha do cliente é livre, exceto produtos ilegais e imorais.
Vocês deverá utilizar todos os elementos e atributos de HTML necessários à
construção da sua página.
O layout da página é livre desde que não contenha nenhuma imagem ou texto
imoral ou ilegal.
Você deverá escolher a forma de inserção da Folha de Estilo (CSS) para
inseri-la ao seu site.
A Folha de estilo do site será criada na aula 2 de CSS.
Profª Giorgia Barreto Lima Parrião 23