Introdução CSS

CSS - INTRODUÇÃOProf.ª. Giorgia Barreto L. Parrião [2017]
DESIGN WEB

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

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.);

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>

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

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

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

COMPONENTES
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

SINTAXE

EXEMPLO

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

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

DIV - EXEMPLO
CSS
Style { background: white; font-size: 36px;}
HTML
<body>
<div id=“Style”> conteúdo </div>
</body>
13

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:

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>

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.

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

DIFERENÇAS
CLASS
Vários estilos para um único
elemento (seletor).
ID
Estilo único para muitos
elementos (seletor).
.
x

PROPRIEDADE: FLOAT
A propriedade float serve para posicionar duas ou mais divs uma do lado
da outra.
19
Top
Left Right
Bottom

CSS
#box{ width: 400px; border: 2px; solid red; text-
align: justify; padding: 20 px; margin: 30px;
float: left;}
#box2 {width: 300px; border: 2px; solid blue; text-
align: justify; float: left;}
HTML
<body>
<div id=“box”>conteúdo</div>
<div id=“box2”> conteúdo </div>
</body>

APLICAÇÕES
Com CSS podemos formatar:
 Background
 Textos
 Fontes
 Margens
 Bordas
 Listas
 Tabelas
http://www.w3schools.com/css/css_examples.asp

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)

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.

BIBLIOGRAFIA
 Silva, Mauricio S. Fundamentos de HTML 5 e CSS3. São Paulo:
Novatec, 2015.

Prof.ª Giorgia Barreto Lima Parrião 25
Obrigada!
Obrigada!!!
Prof.ª. Giorgia Barreto

Introdução CSS

Mais conteúdo relacionado

Mais procurados

Semelhante a Introdução CSS

Mais de Giorgia Barreto Lima Parrião

Introdução CSS