Este Curso de CSS é a continuação do Curso de HTML publicado aqui neste site. Tal como seu antecessor, este curso destina-se à qualquer pessoa que tenha interesse em aprender a criar websites utilizando-se das melhores técnicas recomendadas pela W3C (World Wide Web Consortium).
Esta é a terceira aula do curso e caso ainda não tenha visto, recomendo que leia antes os artigos da aula 01 – Introdução às CSS (Folhas de Estilo) e da aula 02 – Estilo incorporado e cores em hexadecimal.
Estilização de textos
A partir de agora utilizaremos um mesmo projeto modelo para testar as diferentes propriedades de estilização de textos da linguagem CSS. Segue abaixo o código HTML que será utilizado e, caso você não compreenda algum detalhe, sugiro que estude antes a série de artigos do Curso de HTML.
<!DOCTYPE html>
<html>
<head>
<title>Liga da Justiça</title>
</head>
<body>
<h1>Liga da Justiça</h1>
<p>A Liga da Justiça é uma fictícia equipe de super-heróis
publicadas pela editora americana DC Comics. A equipe é
um conjunto de super-heróis e entre seus membros,
destacam-se: Superman, Batman, Aquaman, Mulher Maravilha,
Flash e Ciborgue.</p>
<h2>Clark Kent (Superman)</h2>
<h3>Bruce Wayne (Batman)</h3>
<h4>Arthur Curry (Aquaman)</h4>
<h5>diana prince (mulher maravilha)</h5>
<h6>Barry Allen (Flash)</h6>
<h6>Victor Stone (Ciborgue)</h6>
</body>
</html>
Para que possamos fazer juntos este projeto modelo, copie o código HTML acima em um editor de código de sua preferência e salve em uma pasta no seu computador com o nome “liga-justica.html”. Em seguida, acrescente tag <style> dentro da seção <head> conforme mostra o exemplo a seguir.
<head>
<title>Liga da Justiça</title>
<style type="text/css">
</style>
</head>
Executando o código “liga-justica.html” em um navegador web, você visualizará uma página web semelhante à da imagem abaixo:
Preste bem atenção nesta imagem, pois é através deste projeto modelo que estudaremos as várias propriedades CSS para estilização de textos da nossa página.
Propriedade: font-family
A propriedade font-family é utilizada para definir uma lista de fontes e sua prioridade para apresentação de um elemento HTML em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser utilizada a segunda, e assim por diante, até ser encontrada uma fonte instalada.
Vamos acrescentar então no nosso projeto a propriedade font-family conforme mostra o código a seguir.
<title>Liga da Justiça</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
}
</style>
Aplicando a propriedade font-family na tag <body> faremos com que todos os textos da nossa página utilizem o mesmo tipo de fonte que, no exemplo em questão, será a fonte Arial. Se o usuário não possuir a fonte Arial instalada no seu computador, será utilizada a fonte Verdana e, se ambas estiverem indisponíveis, será utilizada uma fonte qualquer da família “sans-serif”.
Vamos aplicar agora uma estilização na tag <p>.
<title>Liga da Justiça</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
}
p {
font-family: "Times New Roman";
}
</style>
Perceba que na estilização da tag <p> foi utilizado apenas a fonte “Times New Roman”, e nela foi necessário utilizar aspas (“”). Isso é necessário para fontes com nomes compostos que contenham espaços entre os nomes.
Até o momento, a nossa página da Liga da Justiça está com fonte “Times New Roman” na tag <p> e fonte “Arial” no restante dos textos. Veja o que alteramos no nosso projeto na imagem a seguir:
Propriedade: color
A propriedade color é utilizada para definir a cor de um elemento. Como já dito anteriormente, existem várias formas de definir cores em uma regra CSS, mas a partir de agora utilizaremos a notação hexadecimal por ser a mais comumente utilizada pelos desenvolvedores web. Caso tenha dúvidas com relação a este assunto, sugiro que leia o artigo da aula 02 – Estilo incorporado e cores em hexadecimal
Exemplo:
<title>Liga da Justiça</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
}
p {
font-family: "Times New Roman";
}
h1 {
color: #FF0000;
}
</style>
Aplicando a propriedade color na tag <h1> com o valor #FF0000, faremos com a que cor do título da nossa página fique na cor vermelha. Veja na imagem a seguir a alteração da cor na tag <h1>.
Propriedade: font-size
A propriedade font-size é utilizada para definir o tamanho da fonte de um elemento. Como também já dito anteriormente, existem várias unidades de medidas para definir o tamanho de uma fonte, mas neste curso utilizaremos a medida px (pixel) no nosso projeto. Observe no código a seguir:
<title>Liga da Justiça</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
}
p {
font-family: "Times New Roman";
}
h1 {
color: #FF0000;
}
h2 {
font-size: 22px;
color: #0000FF;
}
h5 {
font-size: 22px;
color: #0000FF;
}
</style>
No exemplo acima você pode observar que aplicando a propriedade font-size com valor 22px nas tags <h2> e <h5>, ambas passam a ter o mesmo tamanho da letra. Além disso, aplicamos também na propriedade color o valor #0000FF (azul) para melhor diferenciarmos dos demais textos.
É importante frisar que apesar do tamanho da letra das tags <h2> e <h5> serem iguais, a relevância do conteúdo para os mecanismos de busca não foi alterado.
Propriedade: font-style
A propriedade font-style é utilizada para definir um estilo para a fonte, que pode ser: normal ou italic. O estilo normal é o padrão do navegador, mas se você deseja que determinado elemento HTML da sua página fique em itálico, você pode utilizar a propriedade font-style como mostra o exemplo a seguir :
h2{
font-size: 22px;
color: #0000FF;
font-style: italic;
}
Dessa forma, estaremos diferenciando as tags <h2> e <h5> que até o momento estavam com o mesmo font-size e color.
Propriedade: font-weight
A propriedade font-weight é utilizada para definir outro tipo de estilo para uma fonte. Podendo os valores serem normal ou bold. O estilo normal é o padrão do navegador, mas se você deseja que determinado elemento HTML de sua página fique em negrito você pode utilizar a propriedade font-weight como mostra o exemplo a seguir:
p{
font-family: "Times New Roman";
font-weight: bold;
}
Propriedade: text-indent
A propriedade text-indent é utilizada para definir um recuo na primeira linha de um parágrafo. No exemplo a seguir temos um recuo de 50px que será aplicado em todos os textos marcados com a tag <p>:
p{
font-family: "Times New Roman";
font-weight: bold;
text-indent: 50px;
}
A imagem a seguir mostra o nosso projeto modelo com todas as regras CSS que aprendemos até o momento nesta aula.
Propriedade: text-align
A propriedade text-align é utilizada para definir o alinhamento de um elemento. Podendo ele ser alinhado à esquerda (left), à direita (right), centralizado (center), ou justificado (justify), que é quando o texto contido em uma linha se estende tocando as margens esquerda e direita, tal como você vê em jornais e revistas. Vamos testar alguns exemplos em nossa página:
p{
font-family: "Times New Roman";
font-weight: bold;
text-indent: 50px;
text-align: justify;
}
h1{
color: #FF0000;
text-align: center;
}
h2{
font-size: 22px;
color: #0000FF;
font-style: italic;
text-align: right;
}
Observe que acrescentamos a propriedade text-align nas tags <p>, <h1> e <h2>, colocando diferentes valores em cada um deles. Na tag <h1> definimos o valor center para centralizar o texto no navegador; na tag <p> definimos o valor justify para justificar o texto; e na tag <h2> definimos o valor right para alinhar o texto à direita. Observe na imagem a seguir o comportamento de cada um desses elementos que receberam a propriedade text-align.
Este artigo continua em Aula 04: Estilização de textos – parte 2.