Skip to content

6 sexta etapa (bônus)

Jump to bottom
andrario edited this page Mar 8, 2023 · 3 revisions

Estilizando nossa aplicação - CSS

Objetivos

Parabéns por finalizar o projeto WEB do intensivo de janeiro/fevereiro do Núcleo de Tecnologia do MTST!

Você fez muuuita coisa até aqui, e para fechar o projeto com chave de ouro, vamos colocar a "cobertura do bolo". O estilo na nossa aplicação.

Se vc se recordar do encontro 4, nós escrevemos algumas linhas no arquivo style.css, e é nele que vamos focar agora.

O que é CSS?

CSS é a sigla para Cascading Style Sheets ou Folhas de Estilo em Cascata é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML.

O CSS descreve como elementos são mostrados na tela (do seu celular, notebook, tv ou qualquer outra mídia).

Como aplicar estilo (CSS) na aplicação que construímos?

Primeiramente, substitua todo o texto que está dentro do arquivo style.css pelo seguinte trecho de código:

html, body {
  height: 100%;
  width: 100%;
}

.esconde {
  display: none;
}

* {
  box-sizing: border-box;
  outline: none;
}

body {
  background-color: #7bdaf3;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 3rem;
}

#adicionar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background-color: #9ec862;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.bloco-notas {
  background-color: #fff;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
  margin: 30px 20px;
  height: 400px;
  width: 400px;
  overflow-y: scroll;
}

.bloco-notas .cabecalho {
  background-color: #9ec862;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
}

.bloco-notas .cabecalho button {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0.5rem;
}

.bloco-notas textarea {
  outline: none;
  font-family: inherit;
  font-size: 1.2rem;
  border: none;
  height: 400px;
  width: 100%;
  padding: 20px;
}

.futura-nota{
  padding: 20px
}

Agora, basta verificar se deu tudo certo e pronto! Sua aplicação está de cara nova. Caso não tenha dado certo chame alguém do Núcleo de Tecnologia do MTST pra te auxiliar a entender porque não deu certo.

Caso queira alterar ou acrescentar estilos no seu projeto, basta ler os textos indicados na seção Leitura Complementar (descendo um pouco esse texto aqui)

Qual a ideia e a arquitetura por trás do CSS?

Para que o arquivo style.css funcione precisamos nos certificar que:

  1. Dentro do seu arquivo index.html e dentro da tag <head> você tenha a seguinte linha inserida:
<link href="style.css" rel="stylesheet" type="text/css" />
  1. Todo elemento HTML criado, seja diretamente no arquivo index.html ou gerado dinamicamente pelo script.js, tenha suas classes identificadas, dentro do arquivo CSS, como .nome-da-classe {} e seus id's como #nome-do-id {}.
  2. Se você está tentando aplicar estilo em uma tag do HTML, como o <body>, no CSS você coloca body {}

Pronto, a partir deste ponto, tudo o que colocarmos entre colchetes {} vai ser aplicado ao elemento que antecede o colchete. E o que podemos colocar entre os colchetes? Uma infinidade de propriedades diferentes, indico fortemente que você explore mais essas possibilidades (ler os textos indicados na seção Leitura Complementar).

Mas vamos dissecar pelo menos um parágrafo que copiamos no arquivo style.css:

body {
  background-color: #7bdaf3;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 3rem;
}

Nesse trecho, podemos ver na primeira linha que vamos aplicar o estilo em cima de toda a tag <body> do nosso HTML, agora vamos entender cada linha dentro dos colchetes:

  1. background-color: define a cor de fundo de um elemento. Recebe um código hexadecimal da cor.
  2. font-family: permite que se faça uma lista de famílias de fontes para o navegador exibir os textos.
  3. display: define os tipos de exibição internos e externos de um elemento, ou seja, como ele se comporta em relação aos outros elementos.
  4. flex-wrap: define se os itens flexíveis são forçados a ficarem na mesma linha ou se podem ser quebradas em varias linhas.
  5. margin: define a área de margem nos quatro lados do elemento.
  6. padding-top: define a distância entre o conteúdo de um elemento e sua borda de cima.

Cada tipo de propriedade recebe certos tipos de dados (como é o caso das cores em hexadecimal), não se assuste ao ver tantas siglas, palavras e símbolos novos. Css é algo muito importante e interessante de se aprender!

Seletores

Perceberam que no CSS tem o nome de alguns elementos do HTML? E o nome de algumas das classes que criamos? Isso por que o CSS também precisa saber qual parte da página queremos mudar. Lembra quando usamos o querySelector? Pois bem, ambos usam a mesma forma de buscar elementos, esse método se chama Seletor ou Selector

  • Para selecionar um elemento HTML, escrevemos o nome da tag, por exemplo: body, div, h1.
  • Para selecionar um elemento através da classe, escrevemos o nome da classe com um ponto antes: .bloco-notas, .cabecalho, .esconde.
  • Para selecionar um elemento pelo seu id, escrevemos o nome do id com um # antes, como o exemplo: #adicionar.

E se eu quiser selecionar, por exemplo, um elemento textarea que está dentro de um elemento de uma classe? Podemos indicar os dois seletores separados por espaço:

.classe textarea {
  ...
}

Muito obrigado por ler o documento até aqui e até a próxima! Bora codar?

Leitura Complementar:

Clone this wiki locally