CSS Básico

Tudo sobre estilos

O que é CSS?
Vamos discutir o que sabemos sobre CSS
 CSS
CSS é a sigla para o termo em inglês Cascading Style Sheets, que traduzido
para o português significa Folha de Estilo em Cascatas. O CSS é fácil de
aprender e entender e é facilmente utilizado com as linguagens de marcação
HTML ou XHTML

3
HTML vs CSS

Como já aprendemos
anteriormente o HTML cria
a nossa estrutura e
conteúdo e o CSS cria o
estilo da página

4
CSS
● Cores

● Cores de Fundo

● Fontes

● Layout

● E muito mais...

5
As 3 camadas do site

Javascript -
CSS - Camada de HTML - Camada
Camada de
Apresentação de Conteúdo
Comportamento

6
Antes do CSS...
Antes do CSS, para mudar o estilo <b>
<i>
da página era preciso usar tags <u>
específicas e que normalmente <font color>
<font size>
nem funcionavam para todos os <center>
<strike>
navegadores da época, ou seja, <b>
<i>
uma página nunca ficava igual em <u>
<font color>
todos os navegadores. Além desse <font size>
<center>
problema qualquer mudança no <strike>

estilo teria que alterar centenas de

páginas HTML.

7
Design Responsivo
Com as facilidades de replicar o
CSS entre todas as páginas do
nosso site, as páginas Web ficaram
cada vez melhores e mais estilosas.
Outra contribuição importante do
CSS é o Design Responsivo. Não
são criadas páginas para cada tipo
de tamanho de página e sim, uma
única página que adapta o seu
conteúdo com CSS.

8
Comida para o pensamento...
Porém, o CSS evolui constantemente, como
posso acompanhar tantas mudanças??

● Mozilla Developer Network (MDN)

● W3C School
● Can I use
● Webplataform.org

São um dos exemplos de sites disponíveis

que podem nos ajudar a aprender cada diz
mais sobre CSS...

9
Exercícios
1. O CSS é responsável por qual camada do nosso site?
2. É prático criar sites usando somente tags HTML?
3. A última evolução do CSS é a?
4. Nós precisamos memorizar TODOS os seletores do CSS, todas as
propriedades e todos os valores?
5. O que significa CSS?
6. CSS foi introduzido em qual HTML?

10
Adicionando CSS
11
Inline style

12
Quando criamos ou abrimos
uma página web sem
Quando criamos um
nenhuma CSS, podemos
parágrafo por exemplo, ele já
perceber um estilo padrão,
tem um espaçamento, e
esse estilo já vem com o
quando criámos um título ele
próprio navegador, como
já tem um tamanho
suas fontes, e espaçamentos
diferenciado dos outros
textos da página.
13
Exercícios
1. Adicione uma cor branca ao nosso estilo da tag h1

14
Estilo inline - Em linha

Podemos
adicionar estilo as
nossas tags
colocando o
atributo style=””
para modificá-las

15
Devemos mesmo utilizar inline
stylesheets?
Estilos inline devem

😠
ser EVITADOS!
Apesar de funcionar, para sites muito
grandes é inviável usá-los. Imagine que você
só usou inline no seu site inteiro com mais
de 100 páginas, se você quiser mudar a
fonte do seu site você teria que modificar
100 arquivos um por um.

17
<style> tag

18
<style> tag - Em linha

Adicionamos a
configuração
dentro da tag
head como no
exemplo

19
Estilos na tag <styles>

😕
também não são eficientes!
Apesar de ser organizado, e melhor que o
de linha, quando temos muitos arquivos
HTML separados com certeza essa não é a
maneira mais eficiente de se trabalhar.

20
Usando stylesheets externos

21
Stylesheets externos

22
Exercícios
1. Adicionar um atributo text-align para center no body;
2. No h1, adicionar o atributo font-size para 72px e o color white;
3. E o header com o background-color para orange
4. E o p um font-size de 20px;

23
@import para adicionar stylesheet

24
Stylesheets externos

25
Introdução aos seletores
Uma das partes mais importantes do CSS
Seletores por tipo

27
Seletores por tipo
Quando mudamos o estilo de tipo em uma página
HTML, também chamado de seletores de elementos,
ou seletores de tags, para mudar por exemplo todos
os parágrafos do nosso site podemos fazer isso com:

p {
color: white;
background-color: blue;
}

28
Exercícios
1. Adicionar uma classe header, e adicione uma cor orange ao seu
background;
2. Adicione uma classe h1 e adicione uma font-size de 90px e a cor white;
3. Adicione uma classe h2, e adicione a font-size para 53px;
4. Adicione uma classe h3 e adicione a font-size para 20px e a color para
#48525c
5. Adicione uma classe body no topo do arquivo do CSS e adicione a color para
#878787 e a margin 0;

29
Seletores por id

30
Seletor por id #
Quando queremos modificar um único elemento,
podemos criar uma classe CSS com o id específico
da tag, como por exemplo:

main-footer {
padding-top: 60pc;
padding-bottom: 60px;
border-bottom: solid 10px
orange;
}

31
Seletores por classe

32
Seletores por Classe

33