Estilização de Texto CSS

Introdução

Bem-vindo ao laboratório de Estilização de Texto CSS! No design web, controlar a aparência do texto é fundamental para criar websites legíveis, acessíveis e esteticamente agradáveis. O CSS (Cascading Style Sheets) fornece um conjunto poderoso de propriedades especificamente para este propósito.

Neste laboratório, você terá experiência prática com as propriedades CSS mais comuns para estilização de texto. Você aprenderá a alterar a cor do texto, ajustar o tamanho da fonte, colocar o texto em negrito, alinhá-lo e controlar o espaçamento entre as linhas. Trabalharemos com dois arquivos: index.html, que contém o conteúdo, e style.css, onde você escreverá suas regras CSS. Você pode ver suas alterações em tempo real alternando para a aba Web 8080 no ambiente do laboratório.

Vamos começar!

Definir a propriedade color para a cor do texto

Nesta etapa, você aprenderá a alterar a cor do texto usando a propriedade CSS color. Esta propriedade pode aceitar nomes de cores (como red, blue), valores hexadecimais (como #FF0000), valores RGB e mais.

Primeiro, localize o arquivo style.css no explorador de arquivos no lado esquerdo do WebIDE. Clique nele para abri-lo no editor.

Agora, vamos adicionar uma regra para alterar a cor do texto do parágrafo. Usaremos um seletor p para direcionar todos os elementos de parágrafo. Adicione o seguinte código ao seu arquivo style.css:

p {
  color: #2980b9;
}

Após adicionar o código, salve o arquivo style.css. Para ver o resultado, clique na aba Web 8080 no topo da interface. Você deverá ver que a cor do texto do parágrafo mudou para um tom de azul.

Aplicar a propriedade font-size em pixels

Nesta etapa, ajustaremos o tamanho do nosso texto usando a propriedade font-size. Esta propriedade controla o tamanho da fonte. Embora existam muitas unidades que você pode usar (como em, rem, %), começaremos com pixels (px), que fornecem um tamanho fixo.

Vamos tornar o texto do parágrafo um pouco maior para melhor legibilidade. Volte ao seu arquivo style.css e adicione a propriedade font-size à regra p existente.

A regra do seu seletor p agora deve parecer com isto:

p {
  color: #2980b9;
  font-size: 18px;
}

Salve o arquivo e alterne para a aba Web 8080 novamente. Você notará que o texto dentro do parágrafo agora é maior do que antes.

Usar a propriedade font-weight para texto em negrito

Nesta etapa, você aprenderá a controlar a espessura do texto usando a propriedade font-weight. Esta propriedade pode aceitar valores de palavra-chave como normal ou bold, ou valores numéricos de 100 a 900.

Vamos fazer o título (h1) se destacar mais, definindo explicitamente sua espessura. Embora os títulos geralmente sejam em negrito por padrão, defini-lo em seu CSS garante consistência. Também deixaremos o texto do parágrafo em negrito.

Modifique seu arquivo style.css. Primeiro, adicione uma nova regra para o elemento h1. Em seguida, adicione a propriedade font-weight à sua regra p existente.

h1 {
  font-weight: bold;
}

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
}

Salve o arquivo e verifique a aba Web 8080. Você verá que o texto do parágrafo agora está em negrito.

Implementar a propriedade text-align para centralizar

Nesta etapa, usaremos a propriedade text-align para controlar o alinhamento horizontal do texto. Esta propriedade pode ter valores como left, right, center ou justify. É uma ótima maneira de posicionar títulos e outros elementos de texto de nível de bloco.

Vamos centralizar o título principal da nossa página. Para fazer isso, adicionaremos a propriedade text-align à nossa regra h1 em style.css.

Atualize a regra h1 em seu arquivo style.css para incluir text-align: center;:

h1 {
  font-weight: bold;
  text-align: center;
}

Após salvar o arquivo, atualize a aba Web 8080. O título <h1>, "Welcome to CSS Text Styling", agora deve estar perfeitamente centralizado no topo da página.

Adicionar a propriedade line-height para espaçamento

Em nossa etapa final, melhoraremos a legibilidade do nosso parágrafo ajustando o espaço entre as linhas de texto. Isso é feito com a propriedade line-height.

Usar um valor sem unidade para line-height é uma prática recomendada comum, pois cria um espaçamento relativo ao tamanho da fonte do elemento. Por exemplo, um line-height de 1.6 significa que o espaçamento será 1,6 vezes o tamanho da fonte.

Vamos adicionar algum espaçamento vertical ao nosso parágrafo. Vá para o seu arquivo style.css e adicione a propriedade line-height à regra p.

Sua regra p final deve ficar assim:

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
}

Salve o arquivo e visualize o resultado na aba Web 8080. Você notará que o parágrafo agora é muito mais fácil de ler, com um espaçamento mais confortável entre as linhas.

Resumo

Parabéns por completar o laboratório de Estilização de Texto com CSS! Você aprendeu e aplicou com sucesso algumas das propriedades CSS mais essenciais para controlar a aparência do texto em uma página da web.

Neste laboratório, você praticou:

• color: Para alterar a cor do texto.
• font-size: Para controlar o tamanho do texto.
• font-weight: Para ajustar a espessura (negrito) do texto.
• text-align: Para definir o alinhamento horizontal do texto.
• line-height: Para gerenciar o espaçamento vertical entre as linhas de texto.

Essas habilidades fundamentais são os blocos de construção para criar conteúdo web bem projetado e legível. Sinta-se à vontade para experimentar mais com diferentes valores e propriedades no arquivo style.css. Continue explorando para se tornar mais proficiente em CSS!