Curso de CSS – Aula 03: Estilização de textos – parte 1

Este Curso de Desenvolvimento Web em Linguagem CSS é a continuação do Curso de HTML publicado aqui no Hiperbytes. Tal como seu antecessor, este curso destina-se a 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 de Desenvolvimento Web com CSS. Caso ainda não tenha lido, 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.

Curso de CSS

 

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 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 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:

Curso de CSS - Estilização de Textos

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:

Curso de CSS - Estilização de Textos

 

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 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>.

Curso de CSS - Estilização de Textos

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.

Curso de CSS - Estilização de Textos

 

Propriedade: text-align

A propriedade text-align é utilizada para definir o alimento 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.

Curso de CSS - Estilização de Textos

Na próxima aula continuaremos com as propriedades CSS para estilização de textos.

Coordenador de curso na Etec de Itapira, pós-graduado em desenvolvimento de sistemas web e professor nos cursos de Administração e Técnico em Informática para Internet. Nerd por vocação e blogueiro por opção, é autor do livro “Diário de um Blogueiro” e dos blogs Neurônio 2.0 e Hiperbytes.

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here