Estilizando com CSS

Introdução

Nesse ponto vamos aplicar alguns estilos aos elementos que inserimos no passo anterior utilizando o CSS. Você deverá aprender a estilizar elementos, margens, preenchimentos tamanhos e modificar posicionamentos.

 

Para adicionar folhas de estilos, você precisa inserir a tag <style> no seu cabeçalho. Todos os estilos estarão contidos entre <style> </style>.

 

 

Modificando a fonte da página

 

Para modificar a fonte, vamos inserir uma regra CSS sobre o elemento <html>, que contém toda a página. Insira a regra abaixo:

 

 

O seletor é html seleciona essa tag e todos os elementos contidos nela. Com isso, modificamos a família de fontes de todos os elementos da página para “sans-serif”.

 

Ajustando Bordas, Margens e Preenchimentos


 

Antes de mergulharmos na codificação, precisamos compreender o que são margens, bordas e preenchimentos. O CSS funciona basicamente como um modelo de caixas, onde podemos definir características de tamanho (largura e altura), margem, bordas, planos de fundo e preenchimentos dessas caixas. São três propriedades que normalmente utilizamos para modificar o visual dessas partes: margin, border e padding. Veja abaixo as partes da página que essas propriedades modificam.

 

 

Iniciando da propriedade padding (preenchimento), verificamos que ela modifica a distância entre o conteúdo da página e a sua borda. Já a propriedade border permite a modificação das características das bordas da página. Por último, a propriedade margin, permite a modificação da distância entre a borda e as extremidades da página.

 

Nós podemos modificar individualmente margens, bordas e preenchimentos da direita (right) da esquerda (left), da parte inferior (bottom) e da parte superior (top).

 

Estilizando a Largura do Corpo da Página

Vamos modificar o corpo da nossa página para cobrir somente 50% do tamanho total. Também vamos definir larguras máximas e mínimas em tamanhos de pixels. Insira o código abaixo:

 

Repare que a regra CSS começa com o seletor do elemento pelo seu tipo, no nosso caso body { … }. Desse modo, todas as regras que digitarmos entre as chaves será aplicado exclusivamente aos elementos de <body>.

 

Agora, vamos ajustar as margens para centralizarmos todos os elementos do <body> na página. Para isso, vamos utilizar um recurso de margem automática na direita e esquerda. Insira o código abaixo no css body

 

Salve e confira o resultado das margens:

 

 

Estilizando a div do Cabeçalho

 

Nessa div vamos colocar uma imagem de fundo e uma camada mais escura sobre a imagem para destacar os textos. Modificaremos a cor e a posição dos textos da <h1> e do primeiro parágrafo <p>. Veja como vai ficar:

 

Vamos fazer um pequeno setup para estilizarmos o cabeçalho. Siga os passos abaixo:

 

1 - baixe a imagem de fundo do link: https://unsplash.com/photos/i3WlrO7oAHA/download?force=true

 

2 - Mova a imagem para a mesma pasta do arquivo jogo.html

 

3 - Renomeie o arquivo da imagem para img.jpg

 

Agora vamos aos estilos!

 

Passo 1 - Esitilizando a div de classe “header

1 - Insira o conjunto de regras abaixo: 

 

 

2 - Adicione as regras e observe a função de cada uma na imagem abaixo.

 

 

A propriedade background-image é definida a partir das funções linear-gradient(), rgba() e url(). A função url(“img.jpg”) define o caminho para a imagem de fundo, que você adicionou à pasta do projeto. A função rgba() define uma cor e uma transparência para a cor. Já a função linear-gradient() é utilizada para definir gradientes de cores em CSS a partir de uma cor inicial e uma cor final. Veja alguns exemplos de gradientes abaixo.


 

No nosso caso, vamos utilizar a função linear-gradient para adicionar uma camada escura sobre a imagem de fundo, para melhorar a visualização dos textos. Veja a composição da função abaixo.

 

Repare que usamos a função rgba(r, g, b, a), onde, informamos os números dos canais de cores vermelho (r), verde (g) e azul (b) e a função nos retorna uma cor que desejamos. Quando colocamos os parâmetros r, g e b com valor 0, estamos definindo a cor preta (ou ausência de cor). Se colocarmos todos os três com valor 255 (rgba(255, 255, 255)), definimos a cor branca. Todas as cores são variações desses três canais. O último parâmetro da função é o canal da transparência da cor. No caso, 0.5 indica uma transparência de 50% para a cor preta: rgba(0, 0, 0, 0.5).

 

Desse modo o gradiente sobre a imagem de fundo que definimos vai do preto ao preto, ou seja sem variação de tonalidade de cor, porém com uma transparência de 50%. Observe o efeito com e sem o gradiente abaixo:

 

 

Repare como ficou melhor para ler o texto claro com a camada escura adicionada pelo linear-gradient. 

Um Pouco Mais Sobre Cores

 

A maioria das cores na computação são definidas como variações de tonalidades de três cores básicas, o vermelho (red) o verde (green) e o azul (blue).  chamamos esse padrão de RGB. Em CSS, podemos definir as cores pelo seu nome em inglês (“white”, “black”, “red”, “green”, etc.) mas o mais comum é definirmos usando a função rgb(r, g, b) (ou rgba) ou o seu código em hexadecimal precedido de hashtag, como #000000 ou #FFFFFF. Veja abaixo como funciona esses dois padrões para definir a cor vermelha.

Fonte: http://www.cellbiol.com/bioinformatics_web_development/chapter-3-your-first-web-page-learning-html-and-css/css-basic-concepts/

 

Repare que as duas formas acima obedecem o mesmo padrão, porém, de formas diferentes. Sempre, o primeiro canal é o Vermelho, o segundo canal é o Verde e o terceiro canal é a tonalidade de Azul.

 

A diferença da função rgb para a rgba, que utilizamos, é que esta última possui um quarto parâmetro que nos permite definir também uma transparência para a cor.

Passo 2 - Estilizando os Textos do Cabeçalho

Para realizar esse passo vamos utilizar a classe da div “header-text” contida na div “header” utilizando as propriedades text-align, position e color Insira as regras CSS abaixo:

 

 

Tudo pronto! Você acaba de finalizar a estilização do cabeçalho do jogo. Salve e confira o resultado!


 

Estilizando a Div “form”

 

Nesse ponto, vamos modificar um pouco a div que contém a caixa de texto e o botão de envio. Vamos utilizar as propriedades margin-top, background, padding e border-left para isso. Vamos deixar nossa div com essa carinha aqui:

 

Digite o código abaixo e repare nas anotações em cada propriedade.

 

 

Observe que definimos as distâncias da margem superior, uma cor para o plano de fundo, o preenchimento (distância do conteúdo para a borda) e, por fim, a borda esquerda. com o margin-top damos uma distância de 20 pixels de margem para o elemento acima, que é o nosso cabeçalho. 

 

A propriedade background aceita um código de cor em hexadecimal, que é uma outra forma de definirmos valores para os canais vermelho, verde e azul  (RGB), que formam todas as cores. Veja o esquema abaixo

Fonte: http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors

 

A propriedade padding define a distância dos elementos de dentro da div para a borda da mesma, por isso tem esse espaço “sobrando” em azul nas partes superior/inferior e esquerda/direita. Por último, a propriedade border-left define uma borda diferenciada à esquerda.

 

Estilizando a Div “resultado”

 

Essa Div é onde apresentaremos o resultados do palpite emitido com dicas se está muito alto ou muito baixo. Vamos melhorar a sua aprência para ficar desse jeito:

 

 

Insira o conjunto de regras abaixo e leia antetamente as explicações:

 

Passo 1 - Alinhando os textos e adicionando uma borda retangular

 

 

Passo 2 - Adicionando o Arredondamento às Bordas

 

Passo 3 - Adicionando uma Margem ao Topo da DIv

 



 

Salve e observe o resultado do seu jogo estilizado!!

 

Finalizando

 

Para praticar as habilidades hackers que você acabou de adquirir nesse tutorial, tente fazer os exercícios propostos abaixo.