# Bem Vindo à documentação básica de HTML/CSS
Essa documentação em paralelo com o curso de desenvolvimento web tem o intuito de ajudá-lo guiando-o inicialmente nesse processo. HTML/CSS provavelmente será necessário buscar outras fontes para auxiliar no desafio, mas se você nunca mexeu com HTML/CSS leia primeiro essa documentação.
# Créditos
### Iury Rosal
Entrou na GTi Engenharia Jr., em 2018. Em 2019, trabalhou na diretoria de Marketing da empresa e foi, por dois semestres, coordenador do programa Trainee, responsável pela capacitação de novos membros ingressantes na empresa. Atualmente, se encontra na diretoria de projetos na área de gestão de projetos, voltados para o desenvolvimento web.
# O que é o HTML?
Html é uma linguagem de ~~programação~~, ou melhor dizendo, de marcação. Muitas pessoas cometem esse equívoco, a expressão ~~"Vou programar em HTML"~~ ou ~~"Sei programar em HTML"~~ é um engano, pois se trata de uma linguagem de marcação e é por esse motivo que ela é exclusivamente usada para desenvolver websites. Durante o desenvolvimento em HTML você indica, por meio do código, onde ficará o conteúdo do site, como ele ficará expresso na aba aberta do Google Chrome ou de outro navegador.
Até outras linguagens que trabalham com websites utilizam o HTML, o CSS é uma forma de estilizar o HTML, o Javascript torna os recursos do HTML mais iterativos e dinâmicos, o PHP trabalha gerando HTML de forma dinâmica, e assim vai!!
## O que iremos precisar?
Inicialmente é bem legal usar algum editor de texto, tipo ~~bloco de notas~~. Na GTi, usamos o **Visual Studio Code**, ele é PERFEITO, pois auxilia em muitas coisas, principalmente em termos de produtividade. Se você, por algum motivo da galáxia, ainda não baixou o VS code, baixe [aqui](https://code.visualstudio.com/)! Mas você também pode utilizar o [Sublime Text](https://www.sublimetext.com/), que é outro software bastante comum. Outra plataforma online para realizar a codificação é o [CODESANDBOX](https://codesandbox.io).
Além do editor de texto, como nosso objetivo é desenvolver sites, o ideal é utilizar um navegador para visualizar o seu site. Afinal, é como está sendo o resultado final, é a tradução do seu código. No curso, usaremos o **Google Chrome**, já que ele é o mais comum e auxilia com algumas ferramentas nele disponíveis.
## Vamos começar!!
Primeiramente, crie uma pasta no seu computador. Em seguida, vá no VS code e clique na opção **"Abrir pasta"** e selecione a pasta criada.
Após feito isso, clique no ícone de criar novo arquivo, dê um nome a ele e ao final digite *.html* para o computador reconhecer o arquivo como HTML. Dessa forma, ao abrir o arquivo, ele será automaticamente aberto no navegador em forma de site.
## Bora ~~programar~~, ops, marcar
Para começarmos a compreender sobre HTML, é importante entender que usamos muito **TAGS**. Elas auxiliam na organização e a guiarem o site!! As tags ficam representadas entre o símbolo de maior que e menor que *(< >)*. As tags marcam o começo e o fim do conjunto de códigos. Uma tag muito utilizada é a própria *html*, se estruturando da seguinte forma:
```html
<html> <!--começo do bloco de códigos-->
Códigos ficam aqui
</html> <!--fim do bloco de códigos-->
```
Acima temos um exemplo clássico de como toda TAG se estrutura, tendo um início, um meio (onde ficam todos os códigos) e um fim. A TAG HTML ela diz o seguinte: *"Navegador, é aqui que começa o meu site e é aqui que termina"* Os códigos entre essa tag irá englobar todo o conteúdo do site, seja uma parte mais backoffice (ou seja, não será exposta de maneira visual no site) ou o que será mostrado para quem acessar o site.
Podemos utilizar atributos à uma tag, isso será muito usado, principalmente quando começarmos a trabalhar com CSS e Javascript. O atributo serve para fornecer determinadas características relacionadas com todo o bloco de códigos existentes dentro da tag.
Segue um exemplo abaixo:
```html
<tag atributo="nome"> <!--essa representação é padrão-->
Códigos aqui
</tag>
```
No começo do código, é essencial colocar a seguinte tag:
```html
<!DOCTYPE html>
```
A doctype é uma tag especial, indicando como o navegador irá ler o arquivo. Existem diferentes tipos e pode variar de documento para documento, mas, no nosso caso, usaremos a doctype.
Dentro da tag html usamos também outras duas tags fundamentais:
```html
<html>
<head> <!--parte mais backoffice do site, configurações gerais-->
Códigos aqui
</head>
<body> <!--Conteúdo do site-->
Códigos aqui
</body>
</html>
```
Tendo essa estrutura, iremos trabalhar algumas configurações gerais e básicas do site.
Primeiramente, a tipografia. A língua brasileira utiliza acentos que normalmente não são reconhecidas em outras linguagens, por isso é fundamental informar ao navegador que utilizaremos acentuações no nosso código. Para isso, usaremos o seguinte código que será inserida dentro da tag **head**.
```html
<meta charset="utf-8"></meta>
```
Já vou dar um bizu top das galáxias para vocês! Como podem ver, essa tag **meta**, que possui infinitos usos, não possuirá nenhum bloco de comandos dentro dela, já que o único intuito é configurar o **charset**, determinando o uso do nosso alfabeto, com os símbolos, acentos, etc. Por questões de simplificação, podemos fechar a tag da seguinte forma:
```html
<meta charset="utf-8"/>
```
Esse código acima é igual ao anterior, o que muda é sua forma de representação, sendo mais prática e objetiva.
Outra tag interessante que costumamos colocar dentro do head, é a tag **title**, ela define o título do site que será exposto na aba do navegador (antes dessa configuração, fica o nome do arquivo que você inseriu quando criou com o *.html*, o que é bem ~~amador~~).
```html
<title> Meu site top </title>
```
## Um pouco de formatação de texto
Aqui vamos focar no body, que é mais voltado para apresentação de conteúdo.
Primeiramente, ao digitar qualquer coisa dentro da tag body, sendo texto, ou seja, não sendo outra tag, atributo ou coisa do gênero, o navegador irá compreender como sendo um texto a ser exposto, um conteúdo em si.
```html
<body>
Meu primeiro parágrafo!
</body>
```
Contundo, se você já quiser brincar com vários parágrafos dando ENTER para separar eles como mostrado abaixo:
```html
<body>
Meu primeiro parágrafo!
Meu segundo parágrafo!
Meu terceiro parágrafo!
</body>
```
Ao abrir o arquivo no navegador, você observará que ele não lhe obedeceu...
> Meu primeiro parágrafo!Meu segundo parágrafo!Meu terceiro parágrafo!
Por que isso aconteceu? Simples, você não informou para o navegador a quebra de linha desejada, para isso usamos uma tag específica para essa finalidade, que é a `<br/>`. Dessa forma, para o que desejo que aconteça, devo deixar o código da seguinte forma:
```html
<body>
Meu primeiro parágrafo!<br/>
Meu segundo parágrafo!<br/>
Meu terceiro parágrafo!
</body>
```
AGORA SIM, o navegador irá entender a sua intenção!
E já que estamos falando de parágrafo, existe uma tag para isso, que é a `<p> </p>`. Escrevendo entre ela, o navegador irá dar um espaçamento superior do conteúdo acima e do abaixo, dando também uma quebra de linha automática.
```html
<body>
<p>Olá, este é meu primeiro parágrafo!</p>
<p>Olá, este é meu segundo parágrafo!</p>
<p>Olá, este é meu terceiro parágrafo!</p>
</body>
```
Existe também tags para definirem títulos variando da **h1** até a **h6**.
```html
<body>
<h1>Título H1</h1>
<h2>Título H2</h2>
<h3>Título H3</h3>
<h4>Título H4</h4>
<h5>Título H5</h5>
<h6>Título H6</h6>
</body>
```
Ao abrir o navegador, você verá claramente a diferença visual entre os títulos:
Esses títulos devem ser usados com muita sabendoria, pois irá influenciar o SEO do seu website. O h1 é para referir a prioridade máxima da página, por isso, o adequado é a página html possuir apenas um h1. Do h2 para frente, não possui uma limitação de uso recomendada, apenas utilize logicamente por ordem de prioridade, tendo o h2 mais prioritário do que o h3, h3 mais prioritário do que o h4, e assim vai...
Existe também tags para marcar textos que ficarão em negrito e itálico. No caso, temos a tag `<strong>Texto em negrito</strong>` e a `<em>Vai ficar em itálico</em>`.
# Algumas outras TAGs importantes (HTML)
#### a
Usada para fazer com que o conteúdo dentro dessa tag seja "clicável" levando-o para alguma outra página ou conteúdo. Juntamente com essa TAG usamos o href em que indica qual será o destino à pessoa que clicar no conteúdo.
````html
<a href="link"> Conteúdo </a>
````
Obs: não precisa ser um link para algum conteúdo na web, você pode usar isso para arquivos, assim você consegue conectar diferentes arquivos html para montar seu site.
Uma coisa interessante é que esse conteúdo linkado será carregado sobre o atual, ou seja, na mesma guia do navegador. Caso deseje que ele vá para outra guia, adicione o **target="_blank"**, isso permitirá que você carregue o conteúdo indicado no **href** em outra guia.
````html
<a href="link" target="_blank"> Conteúdo </a>
````
#### img
Tag usada para inserir imagens. A ideia é semelhante à da tag "a". Usando essa tag juntamente com o src, indicando o caminho para a imagem, você poderá inserir uma imagem na página.
````html
<img src="img/icone.png"> Conteúdo </img>
````
Por padrão a imagem é sempre exibida no tamanho original, mas com um pouco de CSS você consegue mexer nas dimensões dessa imagem.
OBS: Não use o src para link de imagens de outros sites, isso é considerado uma má prática. O ideal é baixar o arquivo e colocar o directório dele para essa imagem.
#### span
É um conteiner generico em linha para conteúdo fraseado , que não representa nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos `class` ou `id`).
#### form
Tag utilizada para montagem de formulários.
```html
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
```
```html
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
```
```html
<form>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
```
> Veja mais sobre essa TAG em: https://www.w3schools.com/html/html_forms.asp
#### button
Tag para introdução de um botão padrão.
```html
<button type="button">Clique em mim!</button>
```
Conectando o link no botão.
```html
<a href="https://gtijr.com"><button type="button">Processo Seletivo</button></a>
```
OBS: Esse link não precisa ser algum link da WEB, pode ser para um arquivo, como um html.
# Listas no HTML
No HTML, existem 3 tipos de listas: as ordenadas, as não ordenadas e de definições.
## Lista não ordenada
Para uma lista não ordenada usaremos a tag `<ul></ul>`. Para adicionar um item na lista você usará a tag `<li></li>` dentro da tag `<ul>`. Veja um exemplo abaixo:
```html
<ul>
<li> Primeiro item </li>
<li> Segundo item </li>
<li> Terceiro item </li>
</ul>
```
Dessa forma, no navegador será printada a lista com uma marcação com uma bolinha, como mostra o print abaixo:
## Lista ordenada
Para uma lista não ordenada usaremos a tag `<ol></ol>`. Para adicionar um item na lista você usará a tag `<li></li>` dentro da tag `<ol>`. Veja um exemplo abaixo:
```html
<ol>
<li> Primeiro item </li>
<li> Segundo item </li>
<li> Terceiro item </li>
</ol>
```
Dessa forma, no navegador será printada a lista com uma marcação ordenada, como mostra o print abaixo:
## Lista por definição
Para uma lista não ordenada usaremos a tag `<dl></dl>`. Para adicionar um item na lista você usará a tag `<dt></dt>` dentro da tag `<ol>`. Logo abaixo desse item a tag `<dd></dd>` onde você poderá colocar a descrição do item da lista. Veja um exemplo abaixo:
```html
<dl>
<dt> Primeiro item </dt>
<dd> Esse é o primeiro item </dd>
<dt> Segundo item </dt>
<dd> Esse é o segundo item </dd>
<dt> Terceiro item </dt>
<dd> Esse é o terceiro item </dd>
</dl>
```
Dessa forma, no navegador será printada a lista com os itens e uma descrição logo abaixo do respectivo item, como mostra o print abaixo:
# Dicas para SEO
No head podemos realizar algumas configurações que ajudaram seu site em relação aos motores de busca.
A tag title além de ser o que será exibido na aba do navegador, também será o título que será exibido relacionado ao seu site no motor de busca. Observe:
```html
<title> Nome do site - Descrição (slogan) </title>
```
Utilizando a tag **meta**, já apresentada no começo dessa documentação, com auxílio dos atributos **name** e **description**, você poderá configurar a descrição da sua página que será exibida pelos motores de busca. Veja:
```html
<meta name="description" description="Descrição com até 156 caracteres."/>
```
As **keywords** serão as TAGs relacionadas a sua página. Ou seja, a pessoa que pesquisar por essas TAGs terá uma chance de localizar sua página. Em **description** coloque as TAGs separando-as por vírgula.
```html
<meta name="keywords" description="html, setic, curso"/>
```
ATENÇÃO: Coloque apenas TAGs que estão relacionadas com o conteúdo da sua página.
O **author** servirá para relacionar o nome do criador da página com a própria página. Ou seja, caso alguém pesquise pelo nome, poderá encontrar o site devido a essa TAG.
```html
<meta name="author" description="Iury Rosal"/>
```
Existem outras dicas relacionadas ao SEO, mas para este curso nos limitaremos à estas por enquanto.
# Principais seções do site
No HTML5, temos essas 5 TAGs principais para estabelecer a estrutura de um site em html/css. Existem outras, mas por padrão existem essas principais.
**`<header>:`** Se refere ao cabeçalho que ficará exibida na parte superior para todas as páginas do site.
**`<nav>:`** É a tag para menus de navegação, normalmente colocamos ela dentro do header ou do footer. No geral, usamos quando desejamos criar uma lista de links.
**`<section>:`** se refere a seção da página.
**`<article>:`** Usamos quando iremos trabalhar com blog, notícias, posts, etc..
**`<aside>:`** Quando se deseja colocar algo na lateral da página.
**`<footer>:`** Normalmente fica no final da página e também aparece para todas as páginas.
OBS: Em uma tag `<section>` pode existir um header e um footer próprio dessa seção. Essas duas tags não se limitam apenas ao topo ou fim da página como um todo.
Veja um exemplo de uma section bem estruturada usando as tags header e footer.
````html
<section>
<header><h1> Título da seção </h1></header>
<p> Texto da seção </p>
<footer>Rodapé da seção</footer>
</section>
````
Logo o site poderá seguir a seguinte estrutura geral:
````html
<body>
<header>
Este é o cabeçalho do site.
</header>
<nav>
Barra de navegação
</nav>
<section>
Seção de conteúdo
<section>
<article>
Post ou conteúdo
</article>
<aside>
Algo na lateral
</aside>
<footer>
Aquele rodapé mágico
</footer>
</body>
````
Se você abrir uma página no navegador com essa estrutura perceberá que o conteúdo estará padrão e empilhado, pois o navegador coloca essa tags seguindo um padrão simples e caso deseje organizar estruturalmente de outra forma, é necessário o uso de CSS.
# Bem-vindo ao CSS
Como já foi mencionado anteriormente, o CSS trabalhar com a estilização do HTML. É o CSS que nos ajuda a deixar o site mais bonito e com a nossa cara, ~~ou melhor, com a cara do cliente kk~~. Se você curte mexer com efeitos visuais, como eu, com certeza adorará trabalhar com CSS,~~ou não~~~.
Existem duas formas de trabalhar com o CSS, a primeira é junto com o HTML do seu site, ou seja, trabalhar com atributos nas tags e usar todo o código CSS dentro do mesmo arquivo que o HTML. Contudo, essa prática ajuda a deixar o código mais bagunçado. Por isso, iremos para a segunda forma, que é trabalhar com o CSS em um arquivo separado do HTML, mas criando um link entre eles.
Para isso, primeiramente vamos criar um outro arquivo na mesma pasta que está o arquivo .html, escolha um nome de sua preferência e no final coloque a formatação *.css* para o computador compreender que este é um arquivo para ser lido como CSS.
Feito isso, agora vamos conectar esse arquivo css criado com o nosso HTML. Em head, usaremos a seguinte tag:
```html
<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css"/>
```
O *rel* diz o que se refere ao link que estamos fazendo, que nesse caso é o estilo visual do html, o *type* o tipo de link, nesse caso com um arquivo de texto no formato css e o *href* informa a localidade, colocando na mesma pasta que o arquivo html não é necessário informar o directório, apenas o nome do arquivo.
Desse modo, já temos nosso HTML linkado com o nosso CSS. Podemos começar a brincar com o estilo da nossa página.
Primeiramente vamos compreender como se estrutura o css. Assim como no HTML, trabalhamos com as tags e atributos. No HTML criamos o body, que é o corpo do nosso site! Podemos personalizar o corpo do nosso site trabalhando com a tag **body** no css, da seguinte forma:
```css
body{
Configurações de estilo aqui
}
```
Aqui estamos dizendo: "Olha, o meu body terá as seguintes configurações estéticas". Isso pode ser trabalhado com qualquer outra tag, como a`<p>`, `<h1>`, `<h2>` e assim por diante!
Além disso, podemos usar seletores descedentes, em que podemos escolher um ou mais elementos que estão dentro de outro, ou seja, que são descendentes do elemento principal. Exemplo: `p strong`. Com isso, selecionamos apenas tags strong que estão dentro de parágrafos. Podemos selecionar com ainda mais especificidade, escrevendo mais elementos, como: `p strong a`. Neste exemplo, selecionamos links que estão dentro de tags strong que estão dentro de parágrafos.
Uma coisa interessante é que podemos personalizar mais ainda trabalhando com atributos. Assim, conseguimos personalizar de forma mais específica determinadas áreas do nosso site. Esses atributos se referem a **classes** e **ids**. Para ids representamos da seguinte forma:
```css
#nome_do_meu_id {
}
```
Para classes representamos da seguinte forma:
```css
.nome_da_minha_classe {
}
```
Uma id, como o nome diz, é uma identificação única: só pode ser utilizada uma vez no documento inteiro. Normalmente é utilizada para identificar elementos estruturais da página.
Uma classe é reutilizável: pode se repetir na página e também combinar-se com outras (podemos pôr mais de uma classe em um elemento).
No HTML, chamamos a classe e o id dessa forma:
```html
<tag id="nome_do_meu_id"> </tag>
<tag class="nome_da_minha_classe"></tag>
<tag id="nome_do_meu_id" class="nome_da_minha_classe"></tag>
```
Observe que podemos tanto separar os dois como combiná-los, isso permite que você personalize mais ainda determinadas áreas. Imagine a situação em que você tem dois parágrafos, você deseja que ambos possuam o mesmo tamanho de fonte, mas que um esteja na cor azul e outro na cor vermelha. Basta fazer uma classe que represente o tamanho desejado aplicando em uma tag que engloba todos os dois parágrafos e, em seguida, aplicar a id referente a cada cor na tag que abrange cada um dos parágrafos. Bem top neh?
Vale lembrar que se eu tiver vários tipos de css apontando para o mesmo elemento, terá prioridade aquele de maior especificadade. Portanto, entre uma id e uma classe, a id terá mais prioridade, por exemplo.
Normalmente, usamos a tag `<div>` para trabalhar com essa divisão de áreas e assim poder usar ids e classes distintas. ~~Acredite, seus arquivos html terão muitos divs kk~~
Além de combinar entre id e classes, podemos combinar entre classes, no caso duas classes para a mesma tag.
```html
<p class="classe1 classe2"
```
No estilo CSS, também podemos combinar classes:
```css
.classe1 .classe2 {
Estilos que serão aplicados na classe 1 e na classe 2, separadamente;
}
```
```css
.classe1.classe2 {
Estilos que serão aplicados na classe 1 e na classe 2 quando juntas, elas duas combinadas formam uma nova classe;
}
```
Basicamente, se for especificado como acima no arquivo css, a estilização colocada será aplicada as tags que tiverem as duas classes juntas, como esta:
```html
<p class="classe1 classe2"
```
# Um pouco de cores (CSS)
Dar cor ao site, com certeza você irá mexer muito com isso!!! Inicialmente é importante compreender como funciona as cores na Web.
> As cores na Web são definidas pela mistura de 256 tonalidades de vermelho, de verde e de azul em diferentes proporções. Humanos tem dez dedos nas mãos e contam de dez em dez. Computadores foram projetados para contar de dezesseis em dezesseis, não que eles tenham dedos, mas uma vez ultrapassado o 9 (nove) não existe um numeral simples para representar 10, 11, 12, 13, 14, 15 assim estes numerais foram substituidos por letras a, b, c, d, e , f. Desta forma, em um sistema de contagem 'hexadecimal' (base dezesseis) o 10 é representado pelo 'a' e o 15 pelo 'f'. Ao ultrapassar o 15, adiciona-se mais um dígito e assim '10' representa o 16. Usando-se este sistema de contagem, qualquer número entre 0 (zero) e 255 pode ser representado por dois números ou letras - 255 é ff. Então, #ffffff será o branco e #000000 o preto.
Vamos para uma aplicação:
```css
.body{
background-color: #e8eae8;
}
```
A configuração feita acima está informando que todo o conteúdo exposto no body terá como cor de plano de fundo o seguinte código de cor, que é composta de vermelho e8(232), verde ea(234), azul e8(232). O símbolo # ('tralha') indica que estamos usando numeração hexadecimal e não números decimais ordinários.
Algumas vezes você encontrará a sintaxe com apenas três dígitos, por exemplo, #2a0. Isto é uma abreviatura para #22aa00. Quando a cor é representada por uma numeração composta por três pares de dígitos que se repetem dois a dois, você poderá omitir o segundo dígito que o navegador entenderá a abreviatura.
Usando esta abreviatura com três dígitos você poderá obter 4096 cores diferentes e com seis dígitos mais de seis milhões de cores. Com uso de um dígito por cor, vermelha, verde e azul, cada uma tendo 16 níveis de brilho é possível combinações para obter todas as demais.
Se você estiver digitando seu código, esta técnica de usar abreviadamente três dígitos é bem mais simples e eficiente.
Você também pode declarar a cor desejada por meio do nome da cor (blue, red, green, etc) ou pelo seu código RGB, que indica a porcentagem de vermelho, verde e azul que sua cor será composta. É importante compreender esse conceito básico de trabalhar com cores, pois usaremos muito!
Outras configurações do css, referente à cores:
### color
Definir a cor do texto:
```css
h1{
color: #ff6600;
}
```
### border
Adicione uma borda ao seu texto.
```css
p{
border: 2px solid violet;
}
/*border: <tamanho> <tipo> <cor>*/
```
### rgba
É um extensão da configuração de cores em formato RGB com adaptação para trato com a opacidade.
### opacity
Controlar a opacidade (transparência) de algum elemento.
# Margens, Espaçamentos (CSS)
### width
Limita a largura do item.
```css
.p{
width: 10px;
}
```
### height
Limita a altura do item.
```css
.p{
height: 10px;
}
```
### margin
Pode definir as margens em relação a borda superior, inferior, esquerda e direita.
```css
.p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
```
```css
.p{
margin: 25px 50px 75px;
}
/* margin: <margem superior> <direita e esqueda> <inferior> */
```
### padding
É o espaço entre seu conteúdo e sua borda. O padding cria espaço extra dentro de um elemento, enquanto a margin cria espaço extra ao redor de um elemento.
```css
.p{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
```
```css
.p1{
padding: 25px 50px 75px;
/*padding: <topo> <esquerda e direita> <baixo>*/
}
```
# Tipografia (CSS)
Vamos começar ver algumas coisas de css referente a tipografia.
### letter-spacing
Definir o espaçamento entre as letras do texto:
```css
p{
letter-spacing: 2px;
}
```
```css
p{
letter-spacing: -2px;
}
```
### text-transform
Você poderá manipular a propriedade dos textos nesse tipo de configuração, seja deixar todos as letras em maiúsculas, minúsculas ou a primeira letra de cada palavra em maisúcula, por exemplo.
```css
h1{
text-transform: uppercase;
}
/*Tudo em maísculo*/
```
```css
h1{
text-transform: lowercase;
}
/*Tudo em minúsculo*/
```
```css
h1{
text-transform: capitalize;
}
/*Primeira letra de cada palavra em maiúscula*/
```
### text-indent
Indentação do começo do parágrafo.
```css
.p1{
text-indent: 50px;
}
```
### text-align
Alinhamento do texto: Direita, Esquerda, Centralizado ou Justificado.
```css
.p1{
text-align: right;
}
```
```css
.p1{
text-align: left;
}
```
```css
.p1{
text-align: center;
}
```
```css
.p1{
text-align: justify;
}
```
### text-shadow
Colocar um sombreado no texto. Deve-se seguir a seguinte configuração:
```css
.p1{
text-shadow: 1px 1px black;
}
/*text-shadow: <posicionamento na horizontal> <posicionamento na vertical>
<desfoque(opcional)> <cor>;*/
```
### font-size
Tamanho da fonte
```css
.p{
font-size: 14px;
}
```
### font-family
Trocar o tipo de fonte.
```css
.p{
font-family: verdana;
}
```
```css
.p{
font-family: verdana, arial, sans-serif;
}
/*Verifica disponibilidade da verdana, da arial
e das sans-serif no computador do usuário.*/
```
Dica: Veja o [Google Fonts](https://fonts.google.com).
### line-height
Altura da Linha. Irá auxiliar na diferença entre as linhas e na organização do seu texto.
# Bootstrap
O Bootstrap é uma ferramenta gratuita para desenvolvimento HTML, CSS e JS. Crie protótipos rápidamente ou aplicações completas com nossas variáveis e mixins Sass, sistemas de grid responsivo, componentes pré-construídos e poderosos plugins com jQuery.
O Bootstrap é utilizado, de forma generalizada, para front-end. Com ele você poderá deixar seu site com um layout mais organizado e responsivo. Isso irá agilizar muito sua vida, acredite!
Veja a [documentação](https://getbootstrap.com.br/docs/4.1/layout/overview/).
### Container
> Essa seção foi retirada do seguinte artigo: https://webdevacademy.com.br/tutoriais/bootstrap-container/
>
O container é um componente do Bootstrap que garante que o seu layout vai ficar alinhado corretamente na página. Ele pode definir as margens laterais da página, ou deixar sem margens e, também, posiciona o conteúdo no centro do browser.
O container é invisível. Mas, você pode saber que ele existe pelos limites que ele coloca na página.
O container também pode ser qualquer uma das tags semânticas do HTML5, como `<nav>`, `<header>`, `<section>`, `<aside>`, `<footer>`, etc.
Ele pode ser usado para envolver todo o conteúdo da página e, também, para uma seção, ou parte, da página. É o container que mantém o layout funcionando corretamente.
Você pode ter mais de um container em uma mesma página.
```html=1
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="page-header">Hello, Bootstrap!</h1>
...
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
```
Perceba que o container adicionou margens laterais ao conteúdo, e centralizou na tela. Além disso, ele já definiu a largura máxima do conteúdo.
Você pode escolher entre dois tipos de containers para usar em suas páginas: o container simples e o container fluído.
O container simples, que é o padrão, cria uma área responsiva e de largura fixa, que fica centralizada na tela (ou no elemento-pai).
Já o container fluído também cria uma área responsiva, mas que ocupa toda a tela (também conhecido como full width).
```html=1
<div class="container-fluid">
...
</div>
```
Qual que você deve escolher? Bom, isso vai depender de como seu layout deve se comportar.
Se o layout tiver que ter uma largura fixa, use o primeiro. Se for largura variável, use o segundo.
Há, também, situações em que você precisará usar vários containers, onde um vai ficar abaixo do outro. Ou dentro de outros componentes.
Sendo assim, no Bootstrap, todos os elementos visuais da página devem estar dentro de, pelo menos, um container.
É o container que mantém o layout funcionando corretamente.
> Essa seção foi retirada do seguinte artigo: https://webdevacademy.com.br/tutoriais/bootstrap-container/
Sign in with Wallet
Connect another wallet