Tutorial de CSS - Formatação de Textos

Neste tutorial inicial desta seção sobre Formatação de Textos em CSS, vamos explicar melhor o que é formatar um texto, como isso pode ser feito, a importância e propriedades que iremos estudar em nossa apostila de CSS.

• Apostila HTML Progressivo: Fazer download

CSS , Textos e A Nova Web

A internet está se tornando cada dia mais visual e auditiva, é bem comum vermos vídeos, assistir programas de televisão, futebol ao vivo, conversar com amigos via hangout, ver um show de sua banda favorita, filmes, seriados e outras coisas mais interativas.

Outro fator que ajudou bastante esse crescimento das mídias foi o fato da banda de internet no Brasil ter aumentado consideravelmente e os preços terem caído. Hoje em dia, até pessoas mais humildes têm acesso as redes sociais através de celulares.

Porém, embora esta mudança esteja ocorrendo, uma coisa nunca mudou e nunca vai mudar: os textos.
Antigamente, na década de 90, imagem era luxo, praticamente toda a rede era texto.
Os textos ainda continuam, mas surgiram novas mídias.

Sempre existirá textos em sites de notícias, pessoas que preferem ler e escrever nas redes sociais, instruções para preencher um formulário, campos de login e senha, fóruns de discussão, livros em pdf, tutoriais de programação, códigos de programação etc etc.

Podemos ficar aqui durante longos parágrafos falando sobre a importância dos textos e do seu uso, mas seria perder tempo, basta olhar os sites que acessa e ver a importância deles.
E se eles estão presentes em sites, é necessário saber estilizar e formatar textos através de CSS.

CSS em Textos

Qual a última vez que leu um texto sem formatação?
Um site inteiro com a mesma cor, fonte, tamanho, sem parágrafos, divisões, tags de cabeçalhos ?

Imagine um livro inteiro, sem divisão de capítulo, espaçamento de parágrafos, com títulos e rodapé com fonte de mesmo tamanho do texto comum.
É atrativo, é interessante, te motiva a ler?

Ora, um site toda igual, sem divisões lógicas e de design, é igualmente desestimulante.
Usar cor vermelha para notícias, verde para a seção de esportes e laranja para a seção de fofoca não é estética, é design, é marketing. Atrai, chama atenção, faz as pessoas passarem mais tempo em seu site.

Estilizar textos não é estética, ter senso e conhecimentos em fontes, cores e tamanho.é obrigatório, não é à toa que iremos disponibilizar diversos tutoriais de CSS sobre textos.

Lembre-se que fizemos a formatação de textos em HTML, porém, somente com HTML você precisa estilizar cada texto, cada cabeçalho e cada região de seu site.
O que é algo quase que humanamente impossível de se fazer em grandes portais nos dias de hoje.

Mas como vimos na seção sobre Tutorial Básico de CSS, podemos selecionar, identificar e estilizar tags, divisões, identificadores e praticamente qualquer região de qualquer página de um site.
Com um simples código podemos definir a fonte de todas as páginas, a cor de cada título, como se comporta os links quando passamos o mouse e outras infinidades de estilos e efeitos, tudo graças ao CSS.

Com apenas uma folha de estilos você diz como será a seção de moda de seu site, a cor que cada título vai ter, a fonte, o que acontece com o link ao ser clicado, como é o menu lateral com as notícias de esporte, pode colocar uma fonte em itálico em todas as citações de famosos ou políticos e o que mais sua criatividade (e estudo em CSS) permitir.

Tutorial de CSS sobre Formatação de Textos

Agora que já está bem ciente da importância da formatação de textos com CSS, vamos mostrar o que iremos aprender com estes tutoriais sobre o assunto em nossa apostila de CSS.

É importante que você estude, entenda bem e pratique todos os exemplos e exercícios que iremos apresentar, pois estilização de textos com CSS é algo de extrema importância para qualquer pessoa que queria aprender a criar sites.

Dentre outros assuntos, iremos estudar sobre:

• Como aplicar itálico, negrito e sublinhado em textos
• Cores em fontes (color), em hexadecimal, RGB e por nome da cor
• Definir tamanho da fonte (font-size), em pixels, porcentagem, palavras (small, larg etc) e ems
• Família de fonte (font-family), como Arial, Times New Roman, Sans-serif, Helvetica etc
• Fontes monoespaçadas
• Fontes decoradas (text-decoration)
• Fontes maiúsculas e minúsculas (text-transform, font-variant)
• Alinhamento (text-align), margem (margin-) e indentação (text-indent)
• Espaçamento entre letras e palavras (word-spacing e letter-spacing)
• Espaçamento entre linhas de um texto (line-height)
• Listas (list-style-type, list-style-position e list-style-image)

Ou seja, temos bastante estudo pela frente, muitos tutoriais de CSS para aprender :)