Introdução A
<HTML> e {CSS}
Parte 2
Introdução CSS
Introdução CSS
slides.com/bbarbosa85/intro-css
Acompanhe em
Sumário
Introdução CSS
- Inclusão e sintaxe
- Seletores
- Fontes e estilos de textos
- Cores
- Imagem de fundo
- Tamanhos e blocos
- Bordas e margens
- Flutuação de elementos
- Posicionamento e camadas
- Cascateamento de estilos
- Responsividade
- BÔNUS: Transformação com Bootstrap
Referências
Editores de Código
- Notepad++
- Atom
- VSCode
-
Sublime Text
- ... em último caso: Editor Online TryIt
Introdução CSS
CSS
Cascading Style Sheets
- Descreve como um documento Web é exibido
- Tela
- Papel
- Outras mídias
- Interpretada pelos Navegadores
- Estilos, efeitos, interações
Introdução CSS
Exemplo de poder do CSS
Meu primeiro CSS ...
- Abra o editor de código de sua preferência
- Notepad++
- VSCode
- Atom
- SublimeText etc.
- Crie um novo arquivo em branco chamado estilo.css
- Salve o arquivo na mesma pasta do HTML da parte 1
Introdução CSS
MEU Segundo HTML ...
Introdução HTML
<!DOCTYPE html>
<html>
<!-- Cabeçalho -->
<head>
<title>Título da Página</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!-- Corpo -->
<body>
<h1>Título</h1>
<p>Parágrafo</p>
</body>
</html>
Inclusão
<p style='color: green'>Texto verde</p>
Arquivo separado (.css)
Inline
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<head>
<style> </style>
</head>
Cabeçalho HTML
Introdução CSS
Sintaxe
Introdução CSS

Comentários
/* Este é um comentário CSS e não faz nada */
- Marcar o código
- Facilitar leitura e manutenção
Introdução CSS
Seletores
Introdução CSS
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
tag
todos do mesmo tipo
Seletores
Introdução HTML
<p>
Algum texto <span class='texto-vermelho'>com destaque vermelho</span>
</p>
html
.class
.texto-vermelho {
color: red;
}
CSS
todos com atributo contendo a classe
Seletores
Introdução HTML
<ul id='menu-principal'>
<li><a href='#'>link 1</a></li>
<li><a href='#'>link 2</a></li>
<li><a href='#'>link 3</a></li>
</ul>
html
#id
#menu-principal {
background-color: black;
color: white;
}
CSS
apenas o elemento com o id
Textos
- font-family
- font-style
- font-size (px | em)
- font-weight
Introdução CSS
Fonte
PropriedadeS
Textos
- color
- text-align
- text-decoration
- text-transform
- text-indent
- text-shadow
- line-height
Introdução CSS
estilização
PropriedadeS
Introdução HTML
[5 minutos]
Estilizar títulos e parágrafos
- Coloque cada tag de subtítulo de uma fonte e tamanho diferentes
- Alinhe parágrafos
- esquerda, direita e centro
- esquerda, direita e centro
- Coloque cor nos parágrafos
BÔNUS
- Aplique mais de uma classe em vários elementos.
Ex: cor e alinhamento
Desafio !
<h1>Titulo</h1>
<h2>Subtítulo</h2>
<h3>Subtítulo</h3>
<h4>Subtítulo</h4>
<h5>Subtítulo</h5>
<div>
<p>Parágrafo A</p>
</div>
<div>
<p>Parágrafo B</p>
</div>
<div>
<p>Parágrafo C</p>
</div>
Cores
Introdução CSS
PropriedadeS
Nominal
- red
- green
- blue etc.
Cores
Introdução CSS
PropriedadeS
hexadecimaL
RGB

256 x 256 x 256 = 16.777.216
0 a 9 + A a F = 16
16² x 16² x 16² = 16.777.216
Cores
Introdução CSS
Seletores de Cores
PropriedadeS
Encurtando ...
#FF0099 é o mesmo que #F09
Introdução HTML
background
Separadamente
Fundo
PropriedadeS
- background-color
- background-image ( url: 'caminho p/ imagem' | none)
- background-repeat ( no-repeat | repeat | repeat-x | repeat-y )
background-attachment:- background-position ( px | top | middle | center | bottom )
Encurtando ...
não importa se falta algum, contanto que esteja na ordem
.item-pug {
background: #FFF url('https://d30y9cdsu7xlg0.cloudfront.net/png/7346-200.png') no-repeat center center;
}
Introdução HTML
[5 minutos]
Monte uma tela:
- Fundo totalmente cinza
- Título Amarelo
- Imagem centralizada sem repetir
Bônus
- insira um parágrafo
- fundo claro
- texto escuro
Desafio !
Tamanhos e blocos
- width largura
- height altura
Introdução CSS
Tipos de Bloco
PropriedadeS
- display
- inline
- block
- inline-block
- none
<span>
<div>, <fieldset>
( px | em | ex | % | auto )
Borda, PREENCHIMENTO, margem
Introdução CSS
PropriedadeS

Introdução CSS
PropriedadeS
- border-width
- border-style
- border-color
- border-radius*
Borda
- margin-top
- margin-right
- margin-left
- margin-right
MArgem
- padding-top
- padding-right
- padding-left
- padding-right
preenchimento
Borda, PREENCHIMENTO, margem
Introdução CSS
PropriedadeS
ENCURTANDO
.alguma-classe{
/* preenchimento */
padding: 20px 10px;
/* borda */
border-width: 1px 0 5px;
border-style: solid;
border-color: #000;
/* margem */
margin: 10px;
}
Borda, PREENCHIMENTO, margem
Se falta algum tamanho, utiliza o mesmo do lado oposto.
Introdução HTML
[10 minutos]
Quero Caixas!
- Monte 4 caixas de texto com cores de fundo distintas
- span
- div com 50% de largura
- fieldset com 70% de largura
- p
BÔNUS
- margem e preenchimento
- bordas coloridas
Desafio !
FLUTUAção
Introdução CSS
PropriedadeS

float
left | right | none
- textos
- caixas
- imagens
- listas etc.
CLEAR
left | right | both
Posicionamento
Introdução CSS
PropriedadeS
position
- static
- relative
- absolute
- fixed
- top
- bottom
- left
- right
Distância
z-index
Quem fica mais por cima
Introdução HTML
[10 minutos]
Mais caixas!!
Pegue suas caixas coloridas e posicione-as conforme a imagem ao lado.
BÔNUS
- Centralize a caixa cinza na tela.
Dica: use margem
Desafio !
Cascateamento
Ordem da declaração
- o último prevalece!
Especificidade
- classes aninhadas
- está contido em
- é filho de
- é sucessor de
!important
Introdução CSS
/* aninhado */
.caixa.texto-vermelho{
color: red;
}
/* está contido em */
.caixa p span {
color: purple;
}
/* é filho de */
.caixa > span {
color: magenta;
}
/* é sucessor de */
.caixa + .caixa p{
color: yellow;
}
/* !important */
p {
color: blue !important;
}
RESPONSIVIDADE
- Adaptação ao tamanho da tela
- Fluidez na troca
- montar da menor pra maior tela
- maior tela no fim do arquivo
Introdução CSS
.caixa {
width: 100%;
}
/* Tablets */
@media only screen
and (min-width: 768px)
and (max-width: 1024px){
.caixa
{
width: 50%;
}
}
/* Desktop */
@media only screen
and (min-width: 1025px){
.caixa
{
width: 33%;
}
}
Boas práticas
Introdução HTML
[10 minutos]
Tornar site responsivo
Desafio !
*, html {
font-family: sans-serif;
padding: 0;
box-sizing: border-box;
}
body{
padding: 0;
margin: 0;
background: #FFF;
}
#principal {
margin: 20px 0;
}
#logo{
text-align: center;
display: inline-block;
width: 100%;
}
#logo img{
width: 40%;
}
#menu{
background-color: #FFF;
}
#menu ul{
margin: 0 0 15px;
padding: 5px;
text-align: center;
}
#menu li{
display: inline;
margin: 0;
padding: 0;
}
#menu li a{
text-decoration: none;
color: #e62263;
font-weight: bold;
padding: 10px;
margin: 0;
}
#menu li a:hover{
color: #FFF;
background-color: #e62263;
}
#destaque{
text-align: center;
background-color: #e62263;
color: #FFF;
padding: 20px;
}
#destaque h2{
color: rgba(255,255,255,0.7);
font-weight: normal;
font-size: 1.2em;
}
#caracteristicas{
border-bottom: 2px solid #e62263;
padding: 10px 20px;
text-align: center;
}
#caracteristicas > .item{
padding-bottom: 20px;
}
#caracteristicas > .item img{
width: 100%;
border: 10px solid #CCC;
}
#caracteristicas > .item b{
display: block;
width: 100%;
color: #e62263;
font-size: 1.3em;
padding: 15px;
text-transform: uppercase;
}
#caracteristicas > .item span{
color: #666
}
#caracteristicas a.botao{
display: inline-block;
padding: 20px;
background-color: #e62263;
color: #FFF;
text-transform: uppercase;
}
#caracteristicas a.botao:hover{
background-color: #333;
}
#quebra{
background: #333;
padding: 20px;
text-align: center;
position: relative;
width: 100%;
height: 200px;
}
#quebra::after {
content: "";
background: transparent url('http://lorempixel.com/400/200/sports/5') no-repeat center center;
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
#quebra p{
color: #FFF;
font-size: 1.5em;
text-shadow: 0 2px 2px #000;
position: relative;
z-index: 2;
}
#rodape{
padding: 30px;
text-align: center;
}
<!DOCTYPE html>
<html>
<!-- Cabeçalho -->
<head>
<title>Hot Site</title>
<meta charset="UTF-8">
<meta name="description" content="Curso HTML CSS">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="Bruno Barbosa">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<!-- Corpo -->
<body>
<div id='principal'>
<!-- Menu -->
<div id='menu'>
<a id='logo' href='#'>
<img src='https://i.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d--lion-logo-modern-logo.jpg' />
</a>
<ul>
<li><a href='#'>O Produto</a></li>
<li><a href='#'>Preço</a></li>
<li><a href='#'>Contato</a></li>
</ul>
</div>
<!-- Destaque -->
<div id='destaque'>
<h1>Produto Rox</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>
<!-- Caracteristicas -->
<div id='caracteristicas'>
<p class='item'>
<img src='http://lorempixel.com/400/200/sports/1' />
<b>Seção A</b>
<span>Descrição de alguma coisa que eu faço bem</span>
</p>
<p class='item'>
<img src='http://lorempixel.com/400/200/sports/2' />
<b>Seção B</b>
<span>Descrição de alguma coisa que eu faço bem</span>
</p>
<p class='item'>
<img src='http://lorempixel.com/400/200/sports/3' />
<b>Seção C</b>
<span>Descrição de alguma coisa que eu faço bem</span>
</p>
<a class='botao acao' href='#'>Compre Já</a>
</div>
<!-- Banner de Quebra -->
<div id='quebra'>
<p>
USE THIS SPACE FOR <b>PROFOUND THOUGHTS</b>.<br/>
OR AN ENORMOUS AD. WHATEVER.
</p>
</div>
<!-- Rodapé -->
<div id='rodape'>
© Site HMTL 2017
</div>
</div>
</body>
</html>
HTML
CSS
Bônus:
Transformação com Bootstrap
- html se adequa ao CSS
- estilos pré-definidos
- maior agilidade
Introdução CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
CDN
</style>
brunovb
bruno@tagplus.com.br
bbarbosa85
b.barbosa85
Introdução CSS
Introdução CSS
By Bruno Barbosa
Introdução CSS
Material do curso de introdução ao CSS
- 187