Introdução

Hoje vamos explorar o incrível mundo da formatação de texto com CSS! Vamos aprender juntos a alterar o tamanho, a cor, o fundo, o tipo de fonte, o posicionamento e o espaçamento entre as linhas de texto. E não se preocupe, faremos isso de maneira bem simples e prática!

Pré-requisitos para Seguir Este Tutorial

Antes de começarmos com a formatação de texto usando CSS, é importante que você tenha alguns conhecimentos básicos. Se você é completamente novo no mundo do desenvolvimento web, recomendo que dê uma olhada nos posts abaixo antes de continuar:

 

Como Criar um HTML Básico
Para começar, é essencial saber como criar um arquivo HTML simples. Isso serve como base para todos os nossos exemplos. Se você ainda não sabe como fazer isso, confira nosso post detalhado: Como criar um HTML básico.

Como Separar o CSS do HTML
No tutorial de hoje, vamos usar um arquivo CSS separado para aplicar estilos ao nosso HTML. Se você ainda não sabe como separar o CSS do HTML, é fundamental aprender antes de continuar. Veja como fazer isso no nosso post: Como separar o CSS do HTML.

Como Usar Seletores com CSS
Para aplicar estilos ao seu HTML, você precisa entender como usar seletores com CSS, como classes e IDs. Se ainda não sabe como utilizá-los, dê uma olhada no nosso guia: Como usar seletores com CSS.

Se você já tem esses conhecimentos, está pronto para começar! Vamos lá!

Passo 1: Criando o HTML Básico

Vamos começar criando uma página HTML simples. 

Crie uma pasta nova para colocarmos todos os arquivos desse exemplo.

Em seguida crie um arquivo chamado index.html e cole o código HTML abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Minha Primeira Página</title>
   <link rel="stylesheet" href="styles.css"> <!-- Link para o arquivo CSS externo -->
</head>
<body>
   <h1>Bem-vindo ao Vivendo de Programação!</h1>
   <p>Hoje aprenderemos a formatar texto com CSS 3.</p>
   <p class='text-left'>Texto posicionado à esquerda.</p>
   <p class='text-center'>Texto posicionado no centro.</p>
   <p class='text-right'>Texto posicionado à direita.</p>
</body>
</html>

Salve e abra o arquivo no navegador para visualizar a página com a formatação padrão colocada pelo navegador.

Passo 2: Criando o Arquivo CSS

Agora, vamos criar um arquivo CSS chamado styles.css e salvá-lo na mesma pasta onde você salvou o index.html. Esse arquivo vai conter todas as nossas regras de estilo.

Passo 3: Estilizando o Título <h1>

Vamos começar formatando o título <h1> da nossa página. Queremos mudar a fonte, a cor, posicionar o texto no centro e deixar o título em negrito. Para isso, adicione o seguinte código no seu styles.css:

h1 {
   font-family: Arial, Verdana; /* Define a fonte para Arial, ou usa a fonte Verdana*/
   color: #336699; /* Altera a cor do texto para um azul específico */
   text-align: center; /* Centraliza o texto na página */
   font-weight: bold; /* Deixa o texto em negrito */
}

Salve o arquivo styles.css e atualize a página no navegador para visualizar a formatação aplicada.

 

Importante! No font-family, sempre que utilizar as fontes padrão, defina mais de uma, pois se o usuário não tiver a primeira fonte instalada em seu computador, o navegador automaticamente usará a segunda.


Essas são algumas das fontes mais comuns disponíveis para serem usadas com o font-family:

  • Arial
  • Verdana
  • Times New Roman
  • Georgia
  • Courier New


No futuro, faremos outros artigos ensinando como adicionar mais fontes para personalizar ainda mais o seu site!

Passo 4: Posicionamento de Texto

Agora vamos aprender a posicionar o texto usando CSS. Temos três parágrafos, cada um com uma classe (text-left, text-center, text-right). Vamos estilizar cada um deles para que fiquem alinhados conforme o desejado.

Adicione o seguinte código ao seu styles.css:

.text-left {
   text-align: left; /* Alinha o texto à esquerda */
}
.text-center {
   text-align: center; /* Alinha o texto ao centro */
}
.text-right {
   text-align: right; /* Alinha o texto à direita */
}

Cada uma dessas classes alinha o texto de forma diferente na página. Para ver como o texto se move, salve o arquivo styles.css e recarregue sua página no navegador!

Passo 5: Espaçamento Entre Linhas

Por fim, vamos aprender sobre o line-height, que é uma propriedade usada para controlar o espaçamento entre as linhas de texto. Para ilustrar isso, vamos adicionar um parágrafo adicional logo após o último <p> com um texto de exemplo (lorem ipsum).

Adicione o seguinte parágrafo ao seu index.html:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.</p>


Agora, adicione o seguinte CSS ao seu styles.css para ajustar o espaçamento entre as linhas:

p {
   line-height: 1.6; /* Ajusta o espaçamento entre as linhas de texto para 1.6 vezes a altura da linha padrão */
}

Essa propriedade line-height ajuda a tornar o texto mais legível, especialmente em parágrafos longos. Salve suas alterações e recarregue a página no navegador para ver como o espaçamento entre as linhas faz a diferença!

 

Adicionar um background ao p, facilitará a visualização para que você compreenda a diferença.

p {
   background-color: #336699;
   line-height: 1.6;  /*Ajusta o espaçamento entre as linhas de texto para 1.6 vezes a altura da linha padrão*/ 
}

Sendo assim, é só comentar a linha line-height, salvar e visualizar a diferença no navegador.

Conclusão

Agora que você já conhece o básico da formatação de texto com CSS, é hora de praticar e explorar ainda mais! Teste diferentes combinações e veja como você pode transformar um texto simples em algo visualmente atraente. Continue nos acompanhando para mais dicas e tutoriais!

Dúvidas frequentes sobre formatação de texto com css

 

Pergunta: Como posso alterar a fonte de um texto com CSS?

Resposta: Para alterar a fonte de um texto com CSS, você pode usar a propriedade font-family. Por exemplo, para aplicar a fonte Arial, use font-family: Arial;. Adicione essa regra ao seu arquivo styles.css e salve as alterações. Depois, recarregue sua página no navegador para ver a mudança.

 

Pergunta: Como centralizar um texto usando CSS?

Resposta: Para centralizar um texto usando CSS, utilize a propriedade text-align: center; no elemento que deseja centralizar. Por exemplo, para centralizar um título <h1>, adicione essa regra ao seu arquivo styles.css e aplique-a ao seletor do título.

 

Pergunta: O que é a propriedade line-height e como ela funciona?

Resposta: A propriedade line-height no CSS define a altura da linha do texto, ou seja, o espaço entre as linhas. Ela pode ser usada para tornar o texto mais espaçado ou mais compacto. Por exemplo, line-height: 1.5; aumenta o espaço entre as linhas em 50%.

 

Pergunta: Por que é importante usar comentários no CSS?

Resposta: Comentários no CSS ajudam a documentar o código, tornando mais fácil entender o que cada regra faz, especialmente se você ou alguém precisar revisar o código no futuro. Eles são ignorados pelo navegador e não afetam o funcionamento do seu site. Para adicionar um comentário no CSS, use /* seu comentário aqui */.

 

Pergunta: Posso usar qualquer fonte no CSS?

Resposta: Não exatamente. No CSS, você pode usar qualquer fonte que esteja disponível no computador do usuário. Para garantir que todos vejam as mesmas fontes, é comum usar fontes padrão ou fontes da web, como as oferecidas pelo Google Fonts. Em posts futuros, ensinaremos como adicionar fontes personalizadas usando serviços como o Google Fonts.