Curso de CSS e HTML anotações

Símbolos
Para que possamos adicionar símbolos no nosso site, existe um
código que representa cada um deles, sempre começando com
&. Por exemplo o © tendo como código associado o &copy,
dentre eles também temos os símbolos monetários de cada pais
como o yen, que digitando &yen, aparece ¥.
No seguinte link: https://www.freeformatter.com/html-
entities.html
Você tem acesso a todas esses símbolos e seus códigos
Alguns dos símbolos mais importante

OBS: Caso você queira criar uma linha na horizontal de ponta a

ponta no site apenas digite hr que vai criar a tag <hr/>.
Emoji
Os emojis não são muito diferentes dos símbolos, cada emoji
tem uma serie de números, você pode encontrar eles em
https://emojipedia.org vamos usar como exemplo o seguinte
emoji 😀 o código é U+1F600, porém se botarmos assim não
funciona então coloque um &#x no lugar do U+ isso serve para
todos, ou você pode copiar o emoji direto mesmo e colocar
Imagem no site
Primeiro precisamos saber que não podemos pegar qualquer
imagem por aí no google porque ela pode possuir algum direito
autoral.
Antes de tudo vamos recomendar alguns sites de fotos free
copyright para você poder usar em seu projeto
https://unsplash.com
https://www.pexels.com/pt-br/
https://br.freepik.com
https://www.rawpixel.com
https://pixabay.com/pt/
https://libreshot.com
https://commons.wikimedia.org/wiki/Main_Page
Agora vamos para a parte prática.
Formato de imagem primeiro temos o jpeg que geralmente é
usado para imagens muito grandes, e em seguida temos o png
que é utilizado para adicionar transparência a imagens.
OBS: Lembrar de ir em ferramentas quando usar o google fotos,
para escolher o tamanho da foto, o formato dela e o copyright.
Se caso você queira uma imagem png você tem que ir em
ferramentas, cor e depois selecionar transparente.
A maioria dessas imagens não vão vir do tamanho adequado
para o seu site, para ajustarmos isso precisaremos do programa
Gimp, abrindo o Gimp vamos em imagem, e depois em
redimensionar imagem, então a partir daquelas tabelas você tem
que tentar ajustar para o tamanho e resolução necessária para o
que você precisa em seu site, então após isso tudo você vai em
arquivo e depois em “exportar As” e então nomear o arquivo
depois colocar o número da largura e o tipo de arquivo por
exemplo paisagem-650.jpeg, e por último você coloca qual a
qualidade que você quer a exportação.

Tag img
Digitando img no body, criamos o seguinte código
<img src="" alt="">
Src significa source traduzindo fica fonte/origem que é onde está
a origem do arquivo, e em seguida o alt que significa alternative,
alt é o texto que explica melhor essa imagem.
Para podermos selecionar a imagem para colocar no código,
primeiro ela tem que estar dentro da pasta do arquivo que você
está usando atualmente, e em seguida vai em <img src="" alt="">
clica dentro das “” do src, e vai no teclado e aperta Ctrl+Espaço
fazendo assim aparecerá uma lista das imagens disponíveis na
pasta e então você seleciona com o mouse.
Depois em alt você digita o texto explicando a imgem, por
exemplo
<img src="celular.png" alt="imagem transparente de um
celular">

OBS: Lembrar de sempre tentar reduzir o tamanho da imagem

para poupar tráfego no site.
Quando a imagem estiver em uma sub pasta e você apertar
ctrl+espaço vai aparecer a pasta que a imagem está, então você
seleciona a pasta e lá dentro vai está a sua imagem.
Caso você queira pegar alguma logo diretamente da internet é só
copiar o link da imagem, não do site, e colar em src que o
programa vai encontrar a imagem sozinho.

Favicon
Favicon é basicamente a imagem que fica na aba la em cima ao
lado do nome dela por exemplo, olhe esta imagem.

O símbolo G ao lado do nome google é o favicon, é possível

encontrar vários desses ícones de graça no seguinte site
https://iconarchive.com
mas se caso você queira criar seu ícone vá no seguinte site
https://favicon.io
agora para adicionar algum ícone ao seu site, você precisa ir na
tag head e digitar link e irá aparecer várias opções para
completar, então você vai em favicon aparecendo o seguinte
código.
<link rel=" " href="favicon.ico" type="image/x-icon">
Dentro de rel =”” você vai apertar CTRL+ESPAÇO e selecione o
seu ícone, os ícones normalmente irão aparecer com uma estrela
e o nome do arquivo então é só selecionar.
Hierarquia de textos
Para criar textos em seus sites você terá que usar algumas tags
para identificar os níveis dos textos, para fazer isso você terá do
h1 ao h6 como níveis de texto do h1 sendo o título até o h6,
dentro desses h1 ao h6 você pode usar o “p” para criar
parágrafos, depois digitar loren para simular um texto.
Semântica na HTML5
O HTML5 não foca mais em forma, mas sim em semântica em
significado, existe algumas tags que são somente de forma e
outras de semântica, por exemplo a tag <b/> ela é usada para
colocar a fonte em negrito, mas apenas faz isso enquanto a tag
<strong/> da o significado dizendo que aquele texto está em
negrito
Forma = CSS
Sentido/Semântica = HTML
OBS tag: a tag address é utilizada para quando você colocar
algum endereço no seu site, faça com que ela seja um caminho
para o google maps adicionando o endereço que está no texto
Lembrar de sempre estar atento a tegs que não são mais
utilizadas

Envelopamento de tag
Ctrl+shift+P e depois ir em envolver com abreviação, e digitar a
tag que você queira envelopar no texto.
OBS tag: <mark/> serve para marcar o texto como se fosse um
marcador de texto
Caso você queira mudar o background color do mark ou de
qualquer outro tipo de tag que de para mudar você precisa abrir
uma tag style dentro da tag que você quer modificar a cor e usar
a background color.
Mas caso você queira mudar de todas essas tags você tem que ir
no cabeçario e abrir uma tag style e colocar a tag que quer
mudar abrir chaves e mudar o que você queira.
OBS tag: A tag small é usada para deixar o texto pequeno.
Texto excluído: del/
Texto incluído: ins/U
Colocar numero ou texto em baixo ou em cima
sup: 202
sub: Co2
Como inserir códigos em seus textos no site
Primeiro você tem que deixar a fonte do código mono-espaçada
usando a tag code, então é só envelopar o texto.
E para o texto fica exatamente como um código você usa a tag
pre, então tudo que for escrito dentro dessa tag vai acabar ir
para o texto inclusive o espaçamento.
Para ajustar o espaçamento você tem que selecionar todo o
texto e apertar Shift+tab fazendo isso você retirar e caso você
queira adicionar é só selecionar todo o texto e apertar tab.
Tag para botar aspas <q/> é só envelopar
Caso você queira que aparece deslocado do texto use a tag
blockquote
E para o google saber de onde veio aquela citação você pode
abrir uma tag cite dentro da blockquote e adicionar o link

Abreviações
Quando você usar alguma abreviação envelope-a com a tag
abbr fazendo isso você poderá colocar o significado daquela
abreviação e quando a pessoa passar com o mouse em cima
poderá ver o significado daquela abreviação e também o próprio
google vai saber o significado
Inverter texto
Inverte usando a tag bdo

Listas OL e UL
OL significa ordered list e traduzindo fica lista ordenada,
tudo que você colocar dentro dessa tag vai ficar em forma
de lista, e nessa lista a ordem em que você coloca os
nomes ou qualquer outra coisa, importa para a
numeração da ordem.
E dentro da tag <ol></ol> os itens da lista têm que ser
colocados na sub tag <li></li>cada item da lista, ex:
<body>
    <ol>
        <li>acordar</li>
        <li>escovar os dentes</li>
        <li>arrumar o cabelo</li>
    </ol>
</body>
O </li> no final não é mais obrigatório
O resultado final vai ficar da seguinte forma no site:
Como personalizar o tipo de numeração das listas
Usando o type dentro da tag <ol> vão aparecer 5 tipos de
maneiras para ordenar a sua lista,
tem o type 1 que é o normal com números

Tem o type A que fica em ordem alfabética com letras

maiúsculas

Tem o type a que fica em ordem alfabética com letras

minúsculas

Tem o type I que deixa a ordem em números

romanos

Tem o type i que deixa em ordem em números romanos

só que em letra minúscula.
Além de poder alterar a maneira que é colocada a ordem
também tem como alterar de qual número vai começar a
lista usando o start dentro da tag <ol>
Por exemplo:
<ol type="I" start="4">
        <li>acordar</li>
        <li>escovar os dentes</li>
        <li>arrumar o cabelo</li>
        <li>fazer um sexo</li>
    </ol>

Listas não ordenadas

Essas listas são feitas com a tag <ul></ul> e usa a sub tag
<li></li> dentro dela a diferença é que não haverá uma
ordem no lugar dos números vão ser colocados algumas
bolinhas ex:
 <ul>
        <li>acordar</li>
        <li>fazer um sexo</li>
    </ul>
Vai ficar da seguinte forma

É possível modificar o type também

Tem o type disc que é o padrão

Type circle

Type square
Listas mistas:
Nas listas mistas você pode misturar uma ol(lista ordenada) com
ul(lista não ordenada) ou virse versa, ou colocar uma ol(lista
ordenada) dentro de outra ol(lista ordenada) ou uma lista
ul(lista não ordenada) dentro de outra lista ul(lista não
ordenada).
Ul dentro de uma ol:

<ol>
        <li>
            principais coisas
        </li>
        <ul>
            <li>oafjaoisf</li>
            <li>owafoapwofkap</li>
        </ul>
    </ol>

Criando o seguinte efeito visual:

Macete:
Se você apertar a tecla alt e ir clicando
nos textos você cria cursores, e o que
for digitado será digitado em todos.
Níveis de listas:
Você pode criar níveis de lista colocando por exemplo: uma ul
dentro de outra ul que está dentro de outra ul, assim criando
níveis de listas.

Listas de definição:
Funciona como se fosse um dicionário, representado pela tag
<dl></dl> para iniciar a lista, <dt></dt> para colocar a palavra e
<dd></dd> para colocar o significado.
<dl>
        <dt>Sigma:</dt>
        <dd>chupador de cu</dd>
    </dl>

Macete: Apertar Ctrl+Enter faz você ir

para uma nova linha mesmo que esteja
dentro de uma tag.
Links e Âncoras em HTML5
Link externo
Para você transformar qualquer texto em um link, você tem que
ancorar ele.
body>
     <h1><a href="https://animescomix.com/7603/">sexoooooooooooo</a></h1>
</body>
Assim quando a pessoa clicar no texto, vai encaminhar para o
link ancorado
Quando o usuário clicar no link, ele vai ser levado para o site,
mas o seu site será fechado, para evitar que isso aconteça você
precisa adicionar a sub tag target = “_blank” rel =”external”
<body>
     <h1><a href="https://animescomix.com/7603/" target="_blank"
rel="external">sexoooooooooooo</a></h1>
Fazendo isso o usuário e encaminhado e não é fechado o seu site

Link interno:
Usando um link interno você envia o usuário para outra
página dentro do seu site, a outra página tem que estar
na mesma pasta da página que você vai linkar.
Quando você usar um link interno coloque a sub tag rel =
‘next’ para indicar que aquele link está levando para uma
página de avanço e ai quando você estiver já na página de
avanço e quer colocar um link para a página anterior você
precisa usar a sub tag rel=’prev’, isso tudo serve para
você indicar qual é o sistema de navegação você esta
utilizando para o google.
Resumindo, o next você vai usar quando quiser fazer um
link para próxima página dentro do seu site o prev é
usado quando o link é usado para voltar à página anterior
isso tudo é uma questão de semântica não vai mudar
nada em seu site visualmente, mas vai tornar o seu site
mais tangível para o sistema do google.
Além dessas duas tags que acabei de citar existe uma que
se chama nofollow, com essa sub tag você diz ao google
que não está dando aval para o site que o link levará.
Repetindo, o link só funcionará se caso a página esteja na
mesma pasta que a outra página, caso esteja em uma
pasta você pode usar o ctrl+espaço e vai aparecer o nome
da pasta, então você seleciona e pronto.
Agora você me pergunta ok, eu consegui linkar uma
página que estava dentro de uma pasta, mas como eu
crio o link para voltar a pasta anterior, você terá que usar
o ../ ponto, ponto, barra, dentro do href, por exemplo,
href = ‘../pag002.html’ rel = ‘prev’, assim podendo utilizar
a página que estava na pasta anterior
Imagens dinâmicas
As imagens dinâmicas mudam de acordo com o tamanho
do seu navegador, sendo útil para regular o tamanho da
imagem para celulares, computadores, tablets e etc.
Usando a tag <picture></picture> dentro dela você
começa a criar o dinamismo das imagens em seguida, é
dentro dela que vai se concentrar as outras fontes de
imagens. Dentro da tag vamos utilizar a tag img, a
clássica, depois vamos adicionar a tag source media type,
nessa tag vão aparecer algumas sub tags como media,
srcset e type, usando essa tag é possível trabalhar usando
ou o tamanho máximo ou o tamanho mínimo, max-width
or min-width.
Vamos primeiro começar a trabalhar com a max-width
dentro dela a gente determina a tamanho máximo do
navegador, passou daquele ponto já é a imagem já
imposta anteriormente, abaixo daquele tamanho já é
uma imagem menor, logo para começar teremos que
colocar em img, a maior imagem para ir diminuindo.
OBS: Lembrar sempre de seguir a ordem, se começou
com a maior imagem logo você tem que ir adicionando
as outras imagens a cima do código primário.
OBS: Lembrar de sempre colocar 50px a mais caso você
optar usar o método de max-wildth, para retirar a barra
de rolagem inferior
O código irá ficar da seguinte forma:
  <picture>
        <source media="(max-width:700px )" srcset="imagens/Pequena.png"
type="image/png">
        <source media="(max-width:1000px)" srcset="imagens/Média.png"
type="image/png">
        <img src="imagens/Grande.png" alt="Imagem flexível">
    </picture>
Após Picture a primeira tag foi img, então acima foi
colocado a imagem média, e mais acima foi colocada a
imagem pequena.
Tamanho mínimo/min-width, funciona da seguinte forma,
você coloca na img uma imagem de 300px e a sua
imagem de tamanho médio tem 700px e a imagem
grande tem 1000px, logo baixo de 700px será colocada a
imagem de 300px, e abaixo de 1000px será colocada a de
700px. O código fica da seguinte forma:
 <picture>
        <source media="(min-width: 10050px )" srcset="imagens/Grande.png"
type="image/png">
        <source media="(min-width: 750px )" srcset="imagens/Média.png"
type="image/png">
        <img src="imagens/Pequena.png" alt="Imagem dinâmica">
    </picture>
Começa com a imagem menor em img, depois a média e
em seguida a grande, se fosse o caso contrário começaria
com a grande depois a média e pôr fim à pequena.
Áudios
Para poder adicionar áudios em seu site, você vai precisar
seguir uma lógica parecida com a de imagens.
Nem sempre o navegador vai suportar o tipo de áudio
que você colocou ali, do mesmo jeito que existem
tamanhos de tela diferentes, para evitar que o seu áudio
seja reproduzido independente do navegador você vai ter
que fazer o seguinte.
Primeiro você precisa colocar a tag <audio>, bastante
parecido com o de imagem que você precisa colocar o
<picture> antes, e da mesma forma, você também
adiciona o source a diferença é que será o source src.
Vão aparecer duas sub tags src e o type, no src, você
coloca o seu arquivo, e no type você coloca qual é o tipo,
nem todo site consegue processar o tipo de áudio que
você vai colocar para garantir, dentro da tag <audio>
adicione os 3 tipos, ogg, wav e mp3 o código fica da
seguinte forma:
<audio preload="metadata" controls autoplay loop>
        <source src="áudios para usar/Summer Solstice on the June Planet
- Bail Bonds (1).mp3" type="audio/mpeg">
        <source src="áudios para usar/Summer-Solstice-on-the-June-Planet-
Bail-Bonds-_1_.ogg" type="audio/ogg">
    </audio>
Não coloquei wav porque pesa muito, caso esse áudio
seja muito importante coloque um link de download.
<audio preload="metadata" controls autoplay loop>
Eu esqueci de falar sobre isso aqui na sub tag preload,
temos 3 tipos o auto, metadata e none, quando você
utiliza o auto o seu site só termina de carregar quando o
áudio já estiver completamente carregado, isso pode ser
prejudicial para o site caso o arquivo seja muito grande já
no metadata vai carregar apenas as informações básicas
do áudio e por último o none, que não vai carregar nada.
O autoplay quando o usuário entrar no site a musica vai
começar a toca automaticamente, o controls é para
colocar controles, como play e etc. O loop vai fazer com
que sempre que a musica acabar ela inicie sozinha
automaticamente.
 CSS
Cascading Style Sheets

Anotações de alguns tipos de códigos em CSS:

Font-family
Background-color
Font-size
Text-align: Ajustar a posição do texto.
CSS interno: usar a apenas em sites pequenos onde
não haverá muitos documentos externos.
CSS externo: CSS de grande escala, você vai utilizá-
lo em grandes sites.
CTRL + clique em cima de páginas não criadas, o
programa cria pra você um arquivo html com
aquele nome.
COMO CONECTAR UM ARQUIVO CSS EM UM HTML
Para criar uma página conectada com um arquivo
CSS, você tem que criar uma tag link: css e colocar o
nome da sua página em CSS.
OBS: É possível adicionar mais de um desses links
na página, o programa vai somar as modificações.
Text-decoration: underline
Faz com que o texto fique sublinhado.
MISTURAR TIPOS DE FORMA DE USAR CSS
Caso você queira fazer coisas especificas
envolvendo CSS você pode misturar os tipos de
forma de usar o, CSS in-line/interno/externo, eles
seguem essa hierarquia respectivamente, por
exemplo: Você já linkou o site à um arquivo CSS mas
quer que um parágrafo em especifico mude de cor
ou tamanho, pode usar o CSS in-line.
COMO ABRIR UMA PASTA COM VÁRIAS PASTAS
DENTRO:
Você clica com o botão direito em cima da pasta e
vai em abrir com VS code.
PSICOLOGIA DAS CORES
Nunca subestime o poder que as cores tem em
influenciar o quão relevante o seu produto vai ser
para as pessoas, segundo pesquisas, a paleta de
cores do seu site influência em 80% a decisão de
compra do seu cliente, podendo ajudar ou a piorar
a possibilidade de compra.
Emoções despertam sentimentos nas pessoas, e as
empresas sabem muito bem disso utilizando no
marketing digital.
Então é muito importante saber quais são as
palhetas de cores ideais para o site que está sendo
construído, uma palheta de cores agradável pode
fazer com que o usuário permaneça mais tempo no
site, e caso esteja vendendo algum produto lá é
possível que influencie na sua decisão de compra.
Mas agora você deve estar se perguntando como eu
vou saber qual palheta de cores usar, então, existe
algumas ferramentas que facilitarão essa sua
escolha de cores.
Imagens da internet:
Existem várias imagens como essa explicando qual
sentimento é gerado em cada uma das vertentes de
cores.
Ferramentas:
Existem várias ferramentas para serem utilizadas como
plugins, sites, e programas que vão facilitar a sua seleção
de cores.
Adobe Color:
Esse site da Adobe fornece paletas prontas e uma
ferramenta completa para criar variações de até 5 cores
por vez. Você pode usar de composições Análogas,
Monocromáticas, Tríades, Complementares, Compostas,
Variações Tonais ou Personalizadas.
https://material.io/design/color/the-color-
system.html#color-theme-creation
Este site vai lhe ajudar, a entender na pratica a aplicação
de cores em sites
https://getmdl.io/customize/index.html
e esse vai te ajudar com a produção de elementos
interativos no seu site.
ColourCode:
Geração aleatória de cores para o seu site.
ColorZilla:
O ColorZilla é um plugin utilizado no navegador, onde
através de um picker virtual, passando o mouse por cima
da cor, é possível pegar o código em CSS daquela cor
Paletton.com:
Nesse site você pode montar uma paleta de cores com
muita facilidade.
Colour Lovers:
Nesse site é possível encontrar várias exemplo de paletas
de cores para usar.
SIGNIFICADO DAS CORES
Significado da cor vermelha
O vermelho é uma das cores mais simbólicas do mercado,
pode significar cor da paixão ou da fome.
Pense em marcas como Burger King e MC Donalds, que
possuem essa cor em sua marca.
Além disso, é notável a cor vermelha em campanhas de
promoção – principalmente no varejo. Percebemos que
essa cor tende a estimular a ação, pois é uma cor quente
que chama a atenção dos leitores.
Pensando nisso, também é possível notar que ela é
utilizada em sinalizações de urgência, uma vez que a cor é
capaz de se destacar nos ambientes.
Colors.co:
Gera aleatoriamente paletas de cores
Significado da cor laranja
Para quem busca por cores vibrantes em campanhas e
anúncios, o laranja é a escolha perfeita.
De acordo com pesquisas realizadas, foi possível perceber
que trata-se de uma cor enérgica, que desperta o ânimo
do usuário, além de estimular a criatividade e auxiliar na
atração de consumidores.
Sendo uma cor derivada do vermelho, o laranja tem
características muito alegres e estimulantes, acabando
por despertar o desejo de ação do usuário.
Em relação ao vermelho, o laranja acaba tendo a
vantagem de ser mais agradável aos olhos, menos
agressivo.
Quando o laranja é aplicado no mundo do marketing, ele
pode significar criatividade, alegria e confiança nas
empresas.
De modo geral, podemos observar essa cor em marcas
que querem retratar acessibilidade e espírito jovem.
Significado da cor amarela
Assim como o vermelho, o amarelo possui característica
de estimulante de apetite – podemos observar que, junto
ao vermelho das marcas do MC Donalds e Burger King, o
amarelo tem destaque.
No entanto, se usado separadamente, a cor pode
transmitir ideia de otimismo, uma vez que é considerada
uma cor acolhedora.
Geralmente é usado para sinalizar situações onde é
preciso ter cuidado e atenção.
E em muitos casos, ajuda na concentração de quem está
dentro de um determinado ambiente, além de estimular
o intelectual e sugerir animação.
No marketing, o uso do amarelo é muito comum em
CTAs. Isso acontece porque a cor consegue chamar a
atenção do usuário e fazê-lo se concentrar em detalhes
específicos da landing page, por exemplo.
Em sites e apresentações, essa cor tem o poder de passar
uma sensação de transparências nas negociações com os
clientes.
Significado da cor Verde
O verde, como já imaginado, tem grande referência
quando o assunto é natureza e meio ambiente.
No entanto, seu significado não acaba por ai. Ele também
é capaz de trazer sensações de equilíbrio, harmonia,
saúde e frescor ao ambiente.
Geralmente é utilizado em lojas, hospitais e centros de
saúde para passar sensação de relaxamento e calma aos
visitantes e pacientes.
Os produtos de higiene tendem a utilizar essa cor como
referência de frescor para os clientes.
Além disso, locais que precisam transparecer
tranquilidade também optam pelo verde, por ser uma cor
bem equilibrada.
Para o mundo corporativo, o verde é capaz de trazer a
sensação de coerência, sendo interessante em alguns
momentos de negociação e relacionamento com o
cliente.
Significado da cor Azul
O azul claro, assim como o verde, traz a sensação de
higiene e frescor para o espectador.
Além disso, é uma cor capaz de estimular a criatividade
em um ambiente e transmitir a sensação de sucesso e
conquista.
Já o azul escuro é mais comum em momentos
corporativos, onde a sensação de poder e confiança são
reforçadas pela sobriedade da cor. Tem como
característica a capacidade de levar segurança e
tranquilidade para as pessoas.
Geralmente o azul é usado em meios corporativos por ser
uma cor mais sóbria – dando a sensação de não invasivo.
Muitas pesquisas realizadas afirmam, inclusive, que a cor
é capaz de reforçar confiança na marca. De modo geral, a
cor é associada a paz, é capaz de reduzir o apetite e
estimular o pensamento criativo.
Significado da cor Roxa ou Violeta
O roxo ou violeta, historicamente conhecido como cor da
realeza e nobreza, também pode ser associado a calma,
respeito e sabedoria.
Assim como o laranja, o violeta também é uma cor capaz
de estimular a imaginação e criatividade.
Além disso, essa cor é capaz de transmitir a sensação de
mistério e questões abstratas, além da sensatez e calma
características.
Muitas pessoas, inclusive, utilizam o violeta como uma
forma de fazer menção à espiritualidade.
Devido às sensações de nobreza, sabedoria, imaginação e
criatividade, essa cor costuma ser usada em marcas de
produtos de beleza e estabelecimentos que visam o bem-
estar, como SPAs e clínicas de estética.
Significado da cor Marrom
Quando pensamos em sofisticação e seriedade,
o marrom é a cor mais recomendada. Ele é capaz de
transmitir conceitos que se associam à natureza e
segurança.
Comumente conseguimos perceber o uso dessa cor em
produtos orgânicos e coisas relacionadas à natureza, uma
vez que proporciona sensação de estabilidade e de um
produto rústico.
Essas características que remetem à confiança e elegância
acabam implicando no uso da cor em empresas dos
segmentos de design de interiores, pisos, móveis,
empórios, lojas com produtos exclusivos e “gourmet”,
etc.
Para empresas do universo corporativo, a cor tende a
reforçar a sensação de comprometimento, organização e
seriedade empresarial.
Significado da cor Rosa
O rosa, assim como o azul, é dividido entre tons mais
suaves e mais fortes. O rosa suave tende a indicar
delicadeza. Característico do universo feminino, também
simboliza inocência, romantismo e proteção.
Já os tons mais intensos estão diretamente relacionados à
modernidade e são comumente utilizados para despertar
a atenção do público.
Ambos os tons podem ser encontrados em marcas
femininas e infantis.
Além disso, podemos perceber o uso desses tons em lojas
jovens e estabelecimentos que comercializam doces.
Isso acontece, principalmente, porque a cor transmite a
sensação de inovação e diferenciação, despertando o
desejo e a atenção do público por conhecer algo novo e
diferenciado.
Significado da cor Branca
Uma das cores mais neutras da paleta, o branco é
denominado como “cor pura”, sendo capaz de transmitir
a sensação de tranquilidade, limpeza e organização.
Além disso, essa cor é capaz de ressaltar a luz das outras
cores, quando combinadas. É uma das cores mais fáceis
de ser combinada e desperta a sensação de harmonia e
equilíbrio quando posta junto com outras cores mais
intensas.
Essa cor também tem o poder de acalmar, transmitir
pensamentos de competência, pureza e frescor.
No mundo do marketing, principalmente quando
pensamos em marketing de conteúdo, o branco é
utilizado como cor prevalecente em blogs e materiais
ricos.
Isso acontece porque ele permite que o destaque aos
CTAs, por exemplo, seja notável. Uma vez que trata-se de
uma cor capaz de levar luminosidade, ele dá aos botões
de conversão o devido destaque.
Significado da cor Preta
O preto é a cor mais poderosa e neutra. Tende a ser
associada à elegância e força.
Assim como o violeta, essa cor transmite a sensação de
mistério, além de ser relacionada ao medo, curiosidade e,
algumas vezes, memória emocional. Além disso, é
considerado um tom masculino e impessoal.
Por ser uma cor neutra, assim como o branco, acaba
transformando a combinação com outras cores uma coisa
bem simples, capaz de refletir diferentes simbologias.
Na maior parte das vezes, o preto é utilizado em
tipografias devido à sua neutralidade. A cor, por ser
considerada forte, acaba se destacando em alguns
fundos, dando mais legibilidade na hora da leitura.
Sua neutralidade auxilia na combinação com outras cores,
transmitindo ideias diversas, como modernidade ou
conservadorismo, inovação, tradicional, elegância,
sofisticação, etc.
Significado da cor Cinza
A junção das duas cores mais neutras da paleta (preto e
branco) resultam no cinza, uma outra cor considerada
neutra.
Ele tende a ser utilizado para ressaltar outras cores, pois
sua neutralidade auxilia no destaque de outros tons.
No entanto, é comum vermos esse tom utilizado em
empresas do segmento de tecnologia e no universo
corporativo, uma vez que transmite a sensação de
solidez, formalidade e modernidade, além, claro, de ser
um tom agradável.
O cinza passa uma ideia de responsabilidade,
conhecimento e profissionalismo – e tende a ser utilizado
em design corporativo.
A tecnologia e inovação também são bem representadas
pelo cinza. Essa cor, em combinação com outras, também
transmite a sensação de harmonia e equilíbrio.

Qual é a cor certa para vendas online?

Mas será que as cores são capazes de influenciar as
decisões dos consumidores também nas lojas virtuais e
impactar as taxas de conversão dos e-commerces?
De acordo com pesquisas recentes, a resposta é sim.
Dados extraídos a partir de diversas fontes e reunidos no
infográfico How Colors Affect Conversion Rate da
Quicksprout, apontam alguns números interessantes
sobre o assunto:
 Os anúncios coloridos são 26% mais reconhecidos
pelos consumidores que suas versões em preto e
branco
 A cor também aumenta o reconhecimento de uma
marca por parte dos consumidores em 80%
 Entre as mulheres, azul, roxo e verde são as cores
preferidas, enquanto que, para os homens, azul,
verde e preto são as preferências
 Do outro lado, laranja, castanho e cinzento são as
cores que mais desagradam as mulheres, e castanho,
laranja e roxo são as mais odiadas pelos homens
Outro dado importante revela que as cores também
influenciam na percepção de preço por parte dos
consumidores.
O vinho, por exemplo, foi associado ao conceito de
requinte, o preto a sofisticação, enquanto que o laranja
foi ligado à ideia de preço baixo e justo.
Algumas cores também podem estimular sensações
pouco agradáveis e devem ser evitadas. O cinza, por
exemplo, foi associado à solidão e tristeza, e o castanho a
aborrecimento.
Qual é a melhor cor para se fazer um banner?
Agora que você já sabe da importância e do impacto que
cada cor é capaz de causar dos consumidores, deve estar
se perguntando qual a melhor opção de tom para um
banner e, consequentemente, o botão de call-to-
action (chamada para ação) deste.
Essa, porém, não é uma questão simples de ser resolvida.
A primeira razão para isso é o fato de que não existe um
único tipo de consumidor.
Como cada personalidade reage de forma diferente a
cada cor, a escolha deve ser feita com base no público
que se deseja atingir.
As pessoas mais impulsivas, por exemplo, reagem melhor
a cores como o azul, o laranja e o preto. Mas se o seu
público-alvo está em busca de preços baixos, aposte em
tons como azul escuro e verde.
Já os clientes mais tradicionais convergem mais com
cores como rosa, azul claro e rosa escuro.
E não se engane. Muitas vezes, algumas associações
lógicas podem nos confundir e nos levar a escolher as
cores erradas para o botão de compra.
Foi o que aconteceu, por exemplo, com a Hubspot, que
realizou um teste para saber qual a melhor cor para seu
botão de conversão.
Seguindo o raciocínio das cores utilizadas no semáforo,
eles imaginaram que a cor vermelha seria associada à
ação de parar, enquanto que a verde seria remetida à
ideia de seguir com a ação.
Portanto, segundo essa lógica, os botões com a cor verde
deveriam ter uma taxa de conversão expressivamente
maior que os da cor vermelha. Os resultados, porém,
mostraram o oposto.
Segundo a empresa, a página que continha o botão
vermelho teve uma conversão de 21% maior do que a
que continha o botão verde.
O exemplo acima prova uma orientação consensual entre
os especialistas no assunto – cada caso terá uma
resposta diferente a cada cor.
Portanto, se você quer usar a Psicologia das Cores para
aumentar as vendas em seu site, saiba que terá que
testar várias opções e ver quais geram os melhores
resultados.
Porém, algumas dicas podem te ajudar a elaborar uma
linguagem visual mais atraente para seus consumidores:
1. Use uma cor que combine (mas também contraste)
com as demais cores usadas no site e no fundo do
botão;
 2. Opte sempre por uma cor forte e sólida, que
estimule uma reação nos consumidores;
3. Não esqueça de deixar uma margem de segurança
ao redor do botão de compra. Além de garantir um
visual mais limpo, essa técnica evidencia ainda mais
o botão;
4. Cuidado também na escolha da cor do texto dentro
do botão. O ideal é que ele contraste com a cor de
fundo;
5. Além da cor, escolha com cuidado também o local
onde o botão será posicionado. Ele deve ter
destaque na página e facilitar o clique.

Na dúvida, sempre faça testes

Fazer testes é fundamental. Principalmente quando
falamos sobre calls-to-action.
É interessante testar cerca de duas opções para entender
quais cores mais convertem para o seu tipo de público.
Isso é importante porque muitas vezes algumas cores
podem despertar sentimentos diferentes, dependendo
do segmento do seu negócio. Por exemplo, nós
realizamos testes para saber quais cores convertem mais
nos CTAs de anúncios de materiais ricos.
São colocadas duas versões rodando por um prazo pré
definido e, a partir dos resultados, damos prioridade para
aquela combinação de cores para garantir bons
resultados em conversão (saiba mais sobre o teste A/B).
Agora que você já sabe da importância de escolher bem
as cores para o seu botão de call-to-action e como
escolher as melhores tonalidades para cada caso, comece
a fazer alguns testes e veja como seus consumidores
reagem.
Lembre-se de fazer um teste por vez, afinal de contas
você precisa saber o que está funcionando ou não.
Neste site será possível encontrar paletas de cores
cada uma com seus significados
http://www.matildefilmes.com.br/psicologia-das-cores-
guia-avancado-para-profissionais/
Dica meio obvia que você não tinha percebido
antes:
Os códigos rgb das cores em CSS segue sempre o seguinte
modelo (0. 0. 0) a primeira numeração representa a
quantidade de vermelho, a segunda representa o verde e
a terceira representa o azul.
CÓDIGOS PARA MEXER COM CORES EM CSS
background-image:
Caso você queira aplicar um degradê no background do
seu site terá que utilizar essa tag, dentro de background-
image, você vai colocar linear-gradient depois entre os
parênteses coloca a direção de onde vai começar o
degradê to right,to left, to top, a primeira cor a ser
adicionada vai ser a que começa o degradê. É possível
alterar o espaço que a cor ocupa, adicionando a
quantidade em porcentagem ao lado que você
queira que ela ocupe por exemplo:
background-image: linear-gradient(to top,#9A01D7 33%,#DF0371 33%,#F48D0A
33%);

CONFIGURAÇÃO GLOBAL DE CSS

*o asterisco significa configuração global de CSS.

background-attachment: fixed;
Essa tag serve para concertar um erro que acontece
quando você scrola a página e o degradê fica
recomeçando, causando um desconforto visual.
Fixed nesse caso significa fixo.

ATENÇÃO!!!!
Tenha cuidado para não exagerar nas cores, ou colocar
poucas cores. Opte sempre por montar uma palheta de
cores com mais que 3 cores e menos 5 cores.
Tipografia teórico
A tipografia vem dos termos gregos týpos e graphía, týpos
é o ato de impressão no papel, e graphía que significa
escrita.
A forma de escrever transmite emoções
No desgn, as pessoas se preocupam com 3 principais
coisas. Uma boa paleta de cores, boas imagens e uma
bela tipografia.
A maneira como você representa uma palavra ajuda à
passar o sentimento correto, por exemplo:
Amor
Amor
Obviamente a melhor fonte para apresentar a palavra
amor, e o sentimento que ela transmite, de algo delicado,
soft e etc. é a primeira fonte.
Anatomia dos tipos
Os tipos são a forma que eu vô escrever cada letra.
Altura X, o x minúsculo mede a altura média das letras, é
possível observar que algumas letras passam a altura do x
outras acabam vazando por baixo do x, por exemplo,
todas as letras maiúsculas acabam passando do x em
alguns momentos, ou letras como o “q” ou “k” que
acabam passando o x por cima ou por baixo.
Cada uma dessas variações tem um nome ou conceito
especifico:
Altura das maiúsculas: A frase já é auto explicativa, é a
parte onde as letras maiúsculas são maiores que o x.
Altura ascendente: É a altura onde as letras minúsculas
passam o x por cima.
Altura descendente: A altura descendente, é aquela
parte em que qualquer passa do x por baixo.
Corpo: A altura total, a soma de todas essas alturas é
representada pela palavra corpo.
Tipos anatômicos geométricos:
Antes de falarmos sobre a anatomias geométricas das
fontes primeiros você precisa entender alguns conceitos
básicos.
Serifa: É um tracinho gerado no final das letras em
algumas fontes.

Qual é a importância da serifa:

O cérebro humano, durante a leitura ele não ler palavra
por palavra, provavelmente você já deve ter visto aquele
experimento onde é proposto que os leitores tentem ler
as palavras que estão um pouco embaralhadas, e mesmo
assim foi possível cumprir a leitura com certa facilidade.
A serifa usa justamente dessa ciência, ela faz com que te
ajude na leitura.
É possível observar que, o texto está geometricamente
ajustado, fazendo com que o nosso cérebro perceba isso
inconsciente mente, e logo, facilitando a leitura.
Agora nós vamos ver os elementos que fazem com que as
fontes fiquem geometricamente corretas.
Haste:

As hastes são essas colunas que tem nas letras.

Filete:

Um filete conecta duas hastes ou arco.

Arco:

Os arcos são essas dobras nas letras.

Esporão:

O esporão está em algumas fontes, ela serve para dar a

ideia que a letra não irá cair, dar uma ideia de base.
Vértice:

Os vértices são essas pontas.

Os terminais, são essas curvas onde não conecta à lugar
nenhum.
Anatomia humanizada:
Braço:

Perna:

Pé:

Espinha:
Barriga:

Olho:

Orelha:

Cauda:
Glifos:
O glifo é uma letra da fonte.
Família tipográfica:

Categorias de fontes
Serifadas

Sans-serif

Dê preferência para sans-serif quando o site tiver muito

texto.
Mono-espaçada

Todos têm o mesmo espaço.

Handwriting

Dá a impressão que foi escrita a mão.

Fonte display/comemorativa
Não se preocupa em seguir as regras anatômicas.
CSS Web Safe Fonts:
As vezes o dispositivo não reconhece o tipo de fonte que
você quer usar então, existe uma forma de fazer com que
se uma fonte não carregar a outra carregue.
Exemplo em código:
<style>
        body{font-family: Arial, Helvetica, sans-serif;}
    </style>

Fontes genéricas:
Existe outra maneira também, onde você não bota uma
fonte em específico, apenas bota a categoria, e o próprio
navegador usa a que tiver que está naquela categoria.
OBS: É POSSIVEL COLOCAR A MESMA
DECLARAÇÃO PARA DUAS TAGS DISTINTAS.
h1,h2{
            font-family: 'Courier New', Courier, monospace;
        }    

É possível observar que a declaração foi tanto pra

h1 quanto para h2, em títulos é bom usar fonte
serifada para ajudar na leitura rapida.
 Tamanhos de fonte
font-size:
As font-size são normalmente ajustadas seguindo as
normas do w3c. Elas são px e em, px sendo uma fonte
absoluta e a em sendo uma fonte relativa, relativa ao
tamanho da fonte e o tipo de tela. Portanto é a mais
recomendável a ser utilizadas por se adaptar em telas.
Como funciona o em:
16px é a medida normal dos navegadores, e 1em
representa essa medida padrão, logo 2em é igual a 32px,
o em vai ser sempre relativo ao tamanho natural da
fonte.
Peso da fonte:
font-weight, existem 4 categorias de peso de fonte,
lighter: o tipo lighter ele é bem fino, antecedendo o peso
normal da fonte
normal: É o peso normal da fonte.
bold: bold é basicamente colocar a fonte em negrito
bolder: bolder é um nível mais pesado de negrito.

font-style:
No inicio do módulo 1 aprendemos que para
conseguimos colocar o texto em itálico ou negrito, você
precisava usar a tag <strong> ou a tag <i> para poder
colocar o texto em itálico.
Mas existe uma forma mais eficiente de fazer isso em
CSS, como vimos anterior mente, para colocar a fonte em
negrito é só usar o font-weight: bolder, mas é bom ter o
conhecimento das outras duas outras principais
marcações de texto
Itálico é possível usar a tag font-style: italic
E para o texto sublinhado é só usar o
text-decoration: underline
Shorthand font:
Para configurar a fonte de um site é necessário fazer uma
grande linha de códigos, mas é possível encurtar e
simplificar usando uma shorthant font.
Primeiro, é necessário sabermos a ordem de colocar as
configurações do site, que é da seguinte forma:
1°) font style, 2°) font weight 3°) font size 4°) font Family.
O em código fica da seguinte forma:
 font: italic bolder 2em 'Arial', sans-serif;
o código tem que ser escrito criteriosamente dessa
maneira.

Fontes externas
Existe duas formas de adicionar uma fonte em seu
site, importando-a ou baixando.
Primeiro vamos ver, como podemos importa-las,
para começar nós vamos usar o google fonts, após
entrarmos no site vamos escolher a fonte desejada
e então escolher os weights dela, então vamos à
parte onde o site mostra os códigos de importação
na fonte, e copiamos e colamos em <style>, depois
pegamos o Shorthand da fonte e colamos em body.
 @import url(
                'https://fonts.googleapis.com/css2?
family=Roboto+Slab:wght@100;200&display=swap'
          );
             body{
                font-family: 'Roboto Slab', serif;
            }

Quando você importa a fonte, ela ainda não está

em utilização, só depois que você coloca as
configurações em body que ela começa a ser
aplicada.
Logo, você pode importar quantas fontes quiser,
depois decidir aonde e como vai usa-las em seu site.
Não passe de mais de 4 famílias de fonte,
vai ficar esteticamente feio.

Fontes externas baixadas

OBS: Sempre prestar atenção se a fonte
tem todos os glifos, letras maiúsculas,
minúsculas, acentuações e etc.!!!!!
Existem vários sites que você pode usar para baixar
suas fontes, inclusive o google fontes, mas vamos
usar como exemplo o site dafont.com.
Primeiro, você necessita baixar o arquivo.zip, extrai-
lo, e então enviá-lo para a pasta do seu site.
Então colocar o seletor @font-face, após colocar o
@font-face vai aparecer duas tags em conjunto a
tag font-family e a fonte src: url(), depois você
coloca a tag format(), para adicionar qual é o
formato do arquivo, tipos de format():
opentype(otf)
truetype(ttf)
embedded-opentype
truetype-aat(Apple Advanced Typography)
Quando for escrever dentro de format() não
esquece dos ‘’, format(‘’) e quando finalizar colcar
a , ficando da seguinte forma format(‘’),.

Agora, você precisa colocar um nome em

font-family, para ser usado como o nome de font
Family em outras tags. Quando colocar o nome, não
se esqueça das ‘’ por exemplo,
font-family: ‘assustador’;
Por fim você pode fazer alterações como, font-
weight, font-style como qualquer outra fonte.
<style>
        @font-face {
            font-family: 'assustador' ;
            src: url(Gloomy\ Things.ttf.ttf) format('truetype'),
url(Gloomy\ Things.otf.otf) format('opentype');
        }
        body{font-family: 'assustador';}
    </style>

Caso você queira é possível misturar as fontes

baixadas e as fontes externas!!!
Optar sempre por fontes externas, para ficar mais
padronizado o seu site.

Como identificar a fonte em imagens

Você pega a imagem que quer tirar a fonte e coloca
no site What font is.

Alinhamento de texto ou text alingn em CSS

Quando você precisar alinhar o texto em alguma
posição no código, quando você for fazer esse tipo
de alteração opte por fazer em CSS, porque o text
align em html já caiu em desuso, está obsoleto.
A tag para fazer um alinhamento de texto ou text
align em inglês é <text-align>, após adicionar essa
tag, você decide qual vai ser o tipo de alinhamento
que ela vai adicionar, tem left(esquerda),
right(esquerda), center(centro), justfy(justificar)
você ajeita o espaçamento entre as palavras e deixa
o texto simétrico.
Recuo de texto ou text indent
Recuo de texto ou em inglês text indent é
representado pela tag <text-indent>, essa tag faz
com que no primeiro parágrafo haja um recuo, você
pode alterar o tamanho desse recuo com px ou em.
toda vez que você iniciar um novo parágrafo, vai
automaticamente ocorrer um recuo dele.

id e class
É de conhecimento geral no mundo da
programação que é possível atribuir características
para cada tipo de elemento, por exemplo, caso eu
crie uma página CSS, e dentro dela eu coloco um
h1{
Font-weigth: bolder;
}
Então todos os h1 vão se tornar bolder, mas se eu queira
que um grupo de h1 ou um h1 em específico que seja
lighter.
Ai que entra o id e o class, vamos começar pelo id, por
que existe uma pequena diferença entre os dois e eu vou
explicar no final.
Primeiro, para usar o id, é preciso coloca-lo dentro da tag
que você queira especificar, em seguida coloque um
nome que vai se tornar o seu id.
Depois você vai em sua página CSS e coloca # e o id, por
exemplo #titulo, o id é o titulo.
Toda representação de id em CSS é representado pela #
Toda representação de class em CSS é representado pelo.

Quando usar id e quando usar class

Dentro da criação de um site eu não posso usar um
id para dois elementos distintos. Ficou um pouco
confuso, mas eu vou te mostrar em um código.
<h1 id="principal">pakdwpdpafwafawpfoawofpawf</h1>
<h1 id="principal">kapdwkdpawofwakfpaofopwakfwfok</h1>

Essa forma de usar o id está incorreta, você pode

ver que tem um id igual para dois elementos
diferentes, isso está incorreto.
Mas se eu precisar dar uma característica específica
para dois elementos distintos? Ai que entra o class,
com ele é possível colocar a mesma identificação
em dois elementos diferentes.
Além disso é possível colocar dois class em um
único elemento exemplo.
 <h2 class="avançado basico">CSS avançado</h2>

Ou colocar um id e um class juntos

 <h2 class="avançado" id="basico">CSS avançado</h2>

Tenta botar o class conforme a funcionalidade

da tag!!!
<span></span>
Caso você queira colocar class ou id em uma frase
especifica do texto, pode usar a tag span para
colocar um id ou class em uma parte do texto em
específico.

A partir daqui eu
decidi fazer o bgl em
inglês e fodase

Pseudo-classes in CSS
The pseudo-classes are used as follows,
sometimes we need which, in a specific
situation the tag of style change some
features, but only if happens the specific
situation.
To this we use the pseudo-classes, we set
the features which we want change. Let’s
use as example the hover, it’s used to
change some thing when you hover over of
the button, I will show you the code to you
can understand.
  <style>
        div{
            background-color:lightgray ;
            width: 300px;
            height: 300px;
        }
        div:hover{
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div></div>
</body>

In the code I use a tag <div> to created a

green space in the site, but I need which
when hover over the div, it’s to be aqua, so
I opened a pseudo-classes div:hover and
into this I put on the settings which I want.
So, from now on, when you hover in the
div on the site, it’s will change the color.
Son of someone tag in CSS
When we put on a tag into another tag,
this tag will be like a son from the higher
tag.
For example, a paragraph which is into of a
div, so the paragraph is a son from the div,
to represent that in the CSS you will use
the as follow div > p, make this and you will
be indicating to your CSS which the
changes which you want make is in son of
the div.
<style>
        div{
            background-color:lightgray ;
            width: 300px;
            height: 300px;
        }
        div:hover{
            background-color: aqua;
        }
        div > p{
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div><p>i want make a little sex</p></div>
</body>

Another example is when I want which, the

text shows up some when I hover in the
button or text whatever, the code will look
like this.
<style>
        div:hover{
            background-color: aqua;
        }
        div:hover > p{
            display: block;
        }
        div > p{
            display: none;
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div>brabo<p>i want make a little sex</p></div>
</body>

I will explain to you what I was make in this

code, first I create a paragraph into a div,
and next I was go to in the CSS, and I did
what we talked about before, the div > p,
but in this time there was something
different, I use the div:hover > p, so the
settings witch I put there just will happen
when we hover.
:visited
This pseudo-class is used to when you visit the link
which it’s on the site, and when you look again the
same link it’s with another color.
Look the follow example:
 <style>
        a:visited{
            color: aqua;
        }
    </style>

So, all link which was visited will stay aqua

:active
These pseudo-classes are used to change the color
or another thing of something when you click
   :active{
            color: black;
        }

So when you click in the text, it’s will stay black

Pseudo-elements
First of all, let’s differentiate pseudo-classes
from pseudo-element
Pseudo-classes:
The pseudo-classes are used to modify the
content of tag in a specific situation for an
example, the pseudo-classes hover.
Pseudo-classes are represented with :

Pseudo-element:
So, the pseudo-element makes changes
directly in the content of tag, so independent
of any situation, the modify will stay there.
Pseudo-element are represented with ::

Pseudo-element examples
Ok, now we know what’s a pseudo-element, so
we will see some examples and some tags.
Let’s start with the tag <after>. This tag is used
to insert some additional content in the
content in html, logically after the principal
content.
Exists the tag <before> too, so it’s done same
thing of <after> but is before the content.
Revision:
# = id
. = class
: = pseudo-classes
:: = pseudo-element
> = children

Box model concept

Around the content exist an invisible marking
composed with a complex anatomy so, let’s
start from the first concept.
The box: Let’s use the tag h1, and we will
observe how the boxes behave in the browser.
If I add a text with h1, for example:
<h1>Hello world</h1>
The box is in the limits of visual content.

<Height>: The height is used to change height

of the content.
ATENCION!!!! CHANGING THIS MEASUERES,
NOT WILL CHANGE THE SIZE OF THE TEXT OR
ANY ANOTHER THING.
<Width>: And with the tag width you will
change the width of content.
<Border>: You can change the border,
increase it’s or decrease.ma
<Padding>: Inside of the border you have
the padding, where you can increase or
decrease.
<Margin>: Outside of border, you have the
margin.
<Outline>: Around of the border, really
close in this, we have the outline.

Types of boxes
Box-level:
A box, in box level is selfish, it’s wanted the
all line of the content stay.

Inline-level:
This category is humble, it’s shared the line
with another contents.
Difference between box-level and inline-
level is what the box-level want occupy the
all space of line from content, and the
inline-level don’t occupy all space from of
line content, so dividing with another
things.

Examples of tags box-level and

inline-level
Box-level:
Inline-level:

After we see all theoretical part, is

time to learn in the practice
So first let’s learn a new skill, if you go to your
browser, and click with the left side of mouse
you will see various things, so you go to the
lest option in “inspect the element”, there you
will have various dev tolls, we will pay
attention mainly in the part where you can see
the anatomy of content.
So if you search a little, you will find a type of
graphic where you hover, you can see the
padding, border and margin, and clicking in the
h1 you can change this sets, so looking a little
above you will see the sets of padding, border
and margin, and is possible simulate some
changes in the content there.
If you want, is possibly change the width of
border, and other features with following tags:
border-width
border-style
border-color
Short hand in padding
Attention!!!!!! To change the settings of
padding, every time you have that follow the
following sequence. Top, right, bottom and
left.
Padding: 20px 30px 40px 20px;
Top, right, bottom, left
Remember, ever you put this in clockwise.
But sometimes you need put the same
number to all sides, so you put the only one
number, look.
Padding: 30px;
If you want that the element stays in the
center, you just will use this tag margin: auto;
And if you put two measures like this:
Padding: 20px 30px
The first measure will modify the top side and
bottom side, and the second will modify the
left and right.
To maintain the margins, border or paddings,
centralized, you will need put auto right after
each measure, look.
Margin: 20px auto 30px auto;
Thereby the computer will calculate the
correct wise to the content stay in the center.
How transform an element in inline
level or box level and vice versa
To transform an element, you will need use the
tag display, and next you decide if you want
put in box level or inline:
Display: inline;
Or
Display: block;
And you can mix these two:
Display: inline-block;
Thus, the element continues being inline level,
but with some features of box-level, making
possible you modify the wight or width
whatever.

Grouping tags
Probably you know what’s a div, so is not
recommended that you use the div all the
time.
So, you can use other things that are
considered div too but it’s are characterized by
have semantic here are some examples:
<footer>
<article>
<aside>
<main>
<section>
The <aside> you can use it’s to show to the
browser who was write the article.
The <footer> you can leave the trademark in
the footer
If you want that the element stay glued with
the margin of browser, you go to the body in
CSS and you modify to margin 0px

Shadow on the boxes

To put shadows on the boxes, you need use the
tag box-shadow, look like the margin, so to set the
shadow in the box you need set the top, right,
bottom and left and next you need choose the color
of shadow, like this.
Box-shadow: 2px 2px 2px black;
To test the box shadow, you can use the inspect the
element.
To change the direction of shadow you will need
use negative numbers and positive numbers,
negative makes the shadow go to right and positive
to left.

Vertex rounding
To round the vertex, you will need use the tag
border-radius this tag like look the others of size of
the box or the shadow of the boxes.
So, you will set the top left, top right, bottom right
and bottom left or just use the short hand.
No short hand:
Border-top-left-radius: 10px;
Broder-top-right-radius: 10px;
Border-bottom-right-radius: 10px;
Border-bottom-left-radius: 10px;
Or just
border-radius: 10px;
so how bigger the number is bigger the rounding.
Or if you want change two sides only, you can put
like this.
Border-radius: 20px 10px;
Or
Border-radius: 10px 0px;

Circles with border-radius

In CSS you will use the border-radius: 50%; so, you
adjust the size with px.
 Set upping a site
All right, to set up a site firstly you will need set up
the model base, so you can make this with the
mockflow site, and based in the model created in
the mockflow, you go to VS code, first you will put
in the site the basic html part of your site to set up
the skeleton.
Like this:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
scale=1.0">
    <title>Como surgiu o mascote do Android?</title>
    <link rel="Android icon icon" href="../imagens/favicon.ico"
type="image/x-icon">
</head>
<body>
    <header>
        <h1>Curiosidades de tecnologia</h1>
        <p>Tudo aquilo que você sempre quis saber sobre o mundo Tech, em
um único lugar</p>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">Noticias</a>
        <a href="#">Curiosidades</a>
        <a href="#">Fale conosco</a>
    </nav>
    <article>
        História do Mascote do Android
            Provavelmente você sabe que o sistema operacional Android,
mantido pelo Google é um dos mais utilizados para dispositivos móveis em
todo o mundo. Mas tavez você não saiba que o seu simpático mascote tem um
nome e uma história muito curiosa? Pois acompanhe esse artigo para
aprender muita coisa sobre esse robozinho.

            A primeira versão

            A primeira tentativa de criar um mascote surgiu em 2007 e

veio de um desenvolvedor chamado Dan Morrill. Ele conta que abriu o
Inkscape (software livre para vetorização de imagens) e criou sua própria
versão de robô. O objetivo era apenas personificar o sistema apenas para
a a sua equipe, não existia nenhuma solicitação da empresa para a criação
de um mascote.

            [FOTO]

            Essa primeira versão bizarra até foi batizada em homenagem ao

seu criador: seriam os Dandroids.

            Surge um novo mascote

            A ideia de ter um mascote foi amadurecendo e a missão foi

passada para uma profissional da área. A ilustradora Russa Irina Blok,
também funcionária do Google, ficou com a missão de representar o pequeno
robô de uma maneira mais agradável.

            [FOTO]

            A ideia principal da Irina era representar tudo graficamente

com poucos traços e de forma mais chapada. O desenho também deveria gerar
identificação rápida com quem o olha. Surgiu então o Bugdroid, o novo
mascote do Android.

            [FOTO]

            A principal inspiração para os traços do novo Bugdroid veio

daqueles bonequinhos que ilustram portas de banheiro para indicar o
gênero de cada porta. Conta a lenda que a artista estava criando em sua
mesa no escritório do Google e olhou para o lado dos banheiros e a
identificação foi imediata: simples, limpo, objetivo.

            [VIDEO]
           
            [EXTRA] Quer aprender mais?

            Outro assunto curioso em relação ao Android é que cada versão

sempre foi nomeada em homenagem a um doce, em ordem alfabética a partir
da versão 1.5 até a 9.0.
            1.5 - Cupcake
            1.6 - Donut
            3.0 - Eclair
            2.2 - Froyo
            2.3 - Gingerbread
            3.0 - Honeycomb
            4.0 - Ice Cream Sandwich
            4.1 - Jelly Bean
            4.4 - KitKat
            5.0 - Lolipop
            6.0 - Marshmallow
            7.0 - Nougat
            8.0 - Oreo
            9.0 - Pie

            Infelizmente, o Android Q não existiu, pois o Google resolveu

pôr fim a essa divertida prática e começou a usar numerações, o que deu
origem ao Android 10.

            Acesse aqui o site Android History para conhecer a sequência

das versões "adocicadas" e o que cada uma trouxe para o sistema Android.
            [/EXTRA]

            Então é isso! Espero que você tenha gostado do nosso artigo

com essa curiosidade sobre o sistema Android e seu simpático mascote.
                   
                </article>
                <footer>
                   
                </footer>
            </body>
            </html>

If you look carefully, it is possible to observe that

looks like very much with a road map, so, you will
need set up the road map of your site.
So, the skeleton of the site will look like so-so this:
As you can see everything is too much simple, but
the skeleton of our site is complete, now we just
will make some changes to improve the appearance
of the site, and some functionalities.
Currently we have only the html document, so we
will create the CSS document and link in the html
document to make style changes.
Don’t forget to put in the @charset "UTF-8"; In your
CSS document
All right, after you make all this you can start with
the background, changing the color or addicting a
image.
And next you will organize the text of site, so
putting the paragraph in <p> or h1’s in <h1> alright,
you understood.