Aprendendo HTML e CSS - Básico #1

cake, cute, fashion, food, girl, love, photography, strawberries

E aí pessoal tudo bem? Trago hoje um tutorial para meus queridos leitores iniciantes na blogsfera, mas que pode acrescentar algo para todos os que lerem e seguirem as instruções. Clique em Leia Mais e confira este post ;D


Para começar, vamos falar um pouco de algumas ferramentas que vão ser muito úteis para você neste tutorial e para qualquer edição HTML/CSS que você fizer. Irei ensinar de uma maneira simples que foi e é a maneira com que edito meus códigos até hoje. 

Você vai precisar de:


 Editor HTML Online: Ótimo para visualizar com rapidez o seu trabalho! É com ele que vamos trabalhar para analisar se está tudo indo bem com o projeto. Você utiliza a parte azul para escrever e editar seus códigos e automaticamente a parte branca mostra as alterações.

 Tabela de Cores HTML: Com uma vasta quantidade de cores, todas as possibilidades para deixar suas criações ainda mais perfeitas!

Bem, vamos começar! E para começar, vamos aprender um pouco agora de CSS, seus códigos e significados e como usá-los a seu favor!

Começando com o básico, as fontes:

 Letras em Negrito  font-weight: bold;
 Letras em Itálico  font-style: italic;
 Cor da Fonte  color: #COR; (acesse a tabela de cores disponibilizada mais acima)
 Cor de Fundo da Fonte  background: #COR; (acesse a tabela de cores disponibilizada mais acima)
 Tipo de Fonte  font-family: arial;

Vamos aplicar estas alterações? Observe que para aplicá-las vamos usar o HTML, o que significa que HTML e CSS são inseparáveis!


Após feito o estilo, está na hora de aplicar! Mas antes, um só detalhe deve ser lembrando:

Obs.: No lugar de # (encruzilhada), você pode usar apenas um . (ponto) para iniciar seu estilo. A diferença é que ao usar a #, quando abrir sua div deve estar id="minhafonte". Se preferir usar o . (ponto) ao invés de id, deve ser class="minhafonte". Dica: Experimente fazer esta troca na edição do código!


Vamos ver como ficou nosso código agora!


Bem simples até agora. Vamos melhorar isto e dar uma finalidade a este código? Vamos lá!

 Deixando nossa caixinha bem espaçada

Para deixar nossa caixinha bem espaça e não com este visual "achatado" que ela tem, adicione mais uma linha no código:

padding: 10px;

Veja o que esta simples linha pode mudar tanto a aparência!


Lembrando que o valor 10 é alterável, você pode colocar o valor que desejar.

 Mas este tamanho está um tanto desproporcional certo? Vamos ajustá-lo agora também!

 Ajustando o tamanho da caixinha

Para ajustar o tamanho da caixinha é bem simples, basta adicionarmos:

width: 200px;
Consegue perceber o resultado? Graças ao padding (que na prática é nossa margem interna) que usamos anteriormente não foi necessário alterar a altura. Mas se for necessário, use esse código:

height: 20px;

 Vejamos o resultado (sem o uso do "height" que significa altura):


Mas e que tal darmos uma utilidade para esta nossa caixinha de texto? Hoje vou apresentar uma opção, nos próximos posts apresentarei tarefas mais complicadas (mas que devem ser cumpridas para seu avanço). Se possível, envie nos comentários as imagens das suas edições e suas dúvidas!

 Dando uma utilidade a caixinha

Lembra da caixa pink de observação do começo do post? Ela foi feita a partir deste modelo! Você pode usá-las em posts ou em suas páginas! Não é necessário fazer nada de muito elaborado para deixá-la com esta função, mas darei algumas dicas para deixá-la melhor:

 Alterar a posição do seu texto:  Para fazer isso, basta colocar uma linha no código com isto "align: justify; (para justificar)" ou "align: left; (para alinhar à esquerda)" e "align: right; (para alinhar à direita)". Eu normalmente opto por "justify", pois fica melhor. É um tanto desnecessário usar o "align: left;" pois normalmente este já é o sentido do texto.

 Alinhar a caixinha ao centro:  Para alinhar a caixinha ao centro, você deve suar <center> e </center> antes e depois (respectivamente) desta linha <div id="minhafonte">Olá pessoal!</div>, ficando assim:


  Dever de Casa 
O dever de casa de hoje é apresentar um texto escrito por você em uma caixinha personalizada. Envie a imagem do seu trabalho nos comentários!
Espero que tenham curtido o tutorial (e que longo tutorial) e até o próximo post!