CSS – Parte I
Prof. Matheus Garrido
O que vamos estudar hoje?
• O que é CSS?
• Hierarquia de Aplicação
• Hierarquia de Seletores
• Algumas propriedades (display, margin, padding e suas
unidades)
• Unidades
O que é?
Vamos entender o que é CSS.
O que é? 👗
• CSS vem de Cascading Style Sheets.
• É a ferramenta responsável pela
estilização - dizer como os elementos
serão renderizados no site.
Hierarquia de
Aplicação
Onde podemos aplicar os estilos?
Hierarquia de Aplicação👩👩👦
👦
• Há três formas de se utilizar o CSS na
hierarquia:
• Inline: descrevemos a propriedade direto no elemento.
• Externo ao elemento: toda a estilização é feita no
mesmo arquivo da estrutura (HTML), mas fora da
tag.
• Externo ao arquivo: a estilização é feita em um
arquivo próprio externo.
Hierarquia de Aplicação👩👩👦
👦
• Inline: descreve o estilo diretamente no elemento.
• Possuem total prioridade na hora da
renderização.
• Ele sobrescreve as regras das outras maneiras de
se utilizar o CSS.
<p style="color:red;font-size:16px;"></p>
Hierarquia de Aplicação👩👩👦
👦
• Externo ao elemento: colocamos a estilização dentro
das tags style (que, por sua vez, fica no head).
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
Hierarquia de Aplicação👩👩👦
👦
• Externo ao arquivo: criamos um arquivo externo de CSS e
devemos linká-lo com o arquivo de estrutura.
• É o mais indicado por ser mais organizado.
<head>
<link rel="stylesheet" type="text/css“ href="styles.css">
</head>
Hierarquia de Aplicação👩👩👦
👦
Vamos praticar! ✍️
Seletores
O que estilizar?
Seletores 🔑
• Seletores são a base da sintaxe do CSS. A estrutura
básica deles é:
Seletor
h1 { Propriedade Valor
color: #fff;
}
Seletores 🔑
• Os seletores primários são aqueles que permitem
identificar um item diretamente ou todos os itens
daquele tipo.
• Temos três tipos de seletores:
• tags
• class
• id
Seletores 🔑
• Podemos colocar diretamente uma tag HTML e todos os
elementos iniciados por ela seguirão esta regra.
div {
background-color: red;
border: 1px solid black;
}
Seletores 🔑
• Ao invés de colocarmos diretamente a tag que queremos
estilizar, podemos atribuir uma classe aos elementos.
• Todos os elementos que tiverem esta classe seguirão as
regras atribuídas a ela.
• Indicamos uma classe no CSS começando por .
Seletores 🔑
• Indicamos uma classe no CSS começando por .
<p class="texto-primario"> Texto Bonito </p>
.texto-primario {
color: green;
border: 1px dotted black;
}
Seletores 🔑
• As vezes queremos colocar uma estilização específica
de um único elemento.
• Para isto, atribuímos ao elemento um id que deve ser
ÚNICO e que possua significado claro.
• Indicamos um id no CSS começando por #
Seletores 🔑
• Indicamos um id no CSS começando por #
<p id="texto-primario"> Texto Bonito </p>
#texto-primario {
color: green;
border: 1px dotted black;
}
Vamos praticar
Escreva o arquivo HTML e CSS necessário para
renderizar a página abaixo:
Vamos praticar
Escreva o arquivo HTML e CSS necessário para
renderizar a página abaixo:
Seletores 🔑
Propriedades
CSS
Como estilizar?
Propriedades CSS 🔝
• No CSS existe uma infinidade de propriedades.
• Nesta aula veremos três: display, margin e padding.
• Nenhum dev sabe todas as propriedades CSS de cor. A
gente sempre consulta algum material externo.
• Sempre que precisar, pesquisem qual propriedade faz o
que você quer!
Propriedades CSS 🔝
• A propriedade display permite especificar o
comportamento de renderização de um elemento.
• Existem algumas possibilidades, vamos falar de:
• Block;
• Inline;
• None;
Propriedades CSS 🔝
• display: block:
• Faz com que o elemento
ocupe toda a largura
disponível;
• Um elemento block começa
numa nova linha.
Vamos praticar! ✍️
Propriedades CSS 🔝
• display: inline
• Faz com que o elemento
ocupe toda a largura
necessária;
• Um elemento inline não
começa numa nova linha.
Vamos praticar! ✍️
Propriedades CSS 🔝
• display: none
• Faz com que o elemento
desapareça da tela;
Vamos praticar! ✍️
Propriedades CSS 🔝
• A propriedade margin representa o espaço que o
elemento terá entre ele próprio e outros elementos.
div {
margin-top: 5px;
margin-bottom: 6px;
margin-left: 10px;
margin-right: 8px;
}
Propriedades CSS 🔝
• Podemos utilizar uma sintaxe que permite colocar todas
as margens com o mesmo valor.
div {
margin: 10px;
}
Propriedades CSS 🔝
• Ou ainda, uma sintaxe que permite colocar as mesmas
margens para top-bottom e para right-left.
• O primeiro argumento é para a vertical e o segundo
para horizontal
div {
margin: 10px 25px;
}
Propriedades CSS 🔝
• Também temos a sintaxe que permite colocar margens
diferentes em todas as direções.
• A ordem das margens é: top, right, bottom, left.
div {
margin: 10px 25px 12px 5px;
}
Vamos praticar! ✍️
Propriedades CSS 🔝
• A propriedade padding faz com que as informações
dentro do elemento se distanciem da borda dele.
div {
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 8px;
}
Propriedades CSS 🔝
• Temos as mesmas abreviações de sintaxe:
div { div {
padding: 10px; padding: 10px 5px;
} }
div {
padding: 10px 5px 15px 20px;
}
Vamos praticar! ✍️
Propriedades CSS 🔝
• padding x margin:
padding margin
Unidades
Como dimensionar os elementos?
Unidades ↔️
• Vamos ver algumas unidades que o CSS permite colocar
em posições e tamanhos em geral:
• px: Indica a quantidade de pixels que deve ocupar. Pixels são o
menor ponto de display de uma tela.
• pt: Point. Um point equivale a 1/72 de uma polegada
(equivalendo a 0.35mm).
• %: Indica uma porcentagem do tamanho relativo ao tamanho
do elemento pai.
• 1vw: equivale a 1% do comprimento da tela.
• 1vh: equivale a 1% da altura da tela.
Unidades ↔️
• Existem várias outras unidades de medida, que vamos
poder aprofundar nas próximas aulas.
• Mas a melhor forma de aprendê-las e dominá-las é com
a prática e experiência.
Vamos praticar
Escreva o arquivo HTML e CSS necessário para
renderizar a página abaixo:
Resumo
Resumo
• CSS é uma maneira de descrever como o HTML será renderizado.
• Ele pode ser adicionado:
• Inline;
• Na tag style;
• Em outro arquivo.
• Inline > style > outro arquivo.
Resumo
• Seletores são a sintaxe básica do CSS. Dentro deles, precisamos
colocar as propriedades com seus valores.
• Seletores Primários:
• Tag;
• Class;
• Id;
• id > class > tag.
Resumo
• Propriedades: existem várias, aqui vimos algumas, como:
• Margin;
• Padding;
• display: block, inline, none.
• Unidades:
• px, pt
• %, vh, vw
Dúvidas?
Obrigado!
Prof. Matheus Garrido
