Depois de ter dado início, na passada sexta-feira, à série de artigo Aprender CSS, hoje vamos dar continuidade ao assunto. Ao longo deste artigo vamos analisar de forma pormenorizada os agrupamentos de selectores e dar início às propriedades de fonts em CSS. Por isso, antes de continuar, e se não ainda o fez, recomendo que leia atentamente o primeiro artigo da série Aprender CSS,Por onde começar para aprender CSS.

Seletores CSS

Aquando da criação do código HTML, é necessário organizar de forma limpa e coerente os elementos que compõem a sua página, para que depois possa aplicar os estilos que pretender a través de CSS. Para isso, usam-se o chamados selectores CSS. Tudo isto é feito de forma muito simples, usando referência às tags de HTML e de seguida atribuímos os estilos pretendidos para esses elementos.

Selectores por Tags

Para começar, vamos criar um título com a tag <h1>, para depois vermos como podemos alterar o estilo do título com ajuda de CSS.

<h1>Isto é um título</h1>

A este código HTML vamos agora aplicar algumas definições de estilo usando CSS. Para isso teremos de chamar o selector H1, e seguindo a sintaxe CSS aplicar algumas propriedades.

h1{

color: red;   /*Cor vermelha a todos os títulos do tipo <h1>*/

font-family: Verdana;   /* Tipo de letra Verdana a todos os títulos <h1>*/

text-align: center;   /*Alinha o texto ao centro*/

}

Quando uma regra CSS é comum a vários selectores, é possível agrupá-los e atribuir essa regra em simultâneo para todos esses selectores. No exemplo que a seguir vamos ver como aplicar a mesma cor a todos os tipos de títulos.

h1, h2, h3, h4, h5, h6 { color: #FF0000; }

Selectores por ID

Atribuindo um ID a uma determinada tag HTML, é possível aplicar um determinado estilo a essa tag específica, sem que para isso altere as características das outras tags iguais. Ou seja, se você tem todos os títulos com uma determinada cor (como no exemplo anterior), mas para um determinado título <h1> que se encontrar numa página específica do seu site, a cor tem de ser diferente, então atribui um ID a essa tag específica. Depois, é só chamar o ID em questão na CSS e atribuir-lhe os estilos pretendidos.

<h1 id="titulo_diferente">Este é um título diferente</h1>

Agora, no código CSS chamamos o ID pretendido, e atribuímos as propriedades pretendidas. Para chamar o selector através do ID basta colocar um # antes do nome do ID.

#titulo_diferente{

text-align:right;

color:#000000;
}

Selectores por Classe

Os selectores por classes, são muito semelhantes ao selectores por ID, no entanto, ao inverso dos ID, apresentam a vantagem de poderem ser usados em mais do que uma Tag em simultâneo. Vejamos o exemplo:

<h1 class="text_red">Título a vermelho</h1>

Agora basta chamar a classe text_red no CSS, à propriedade color dar o atributo red. Para chamar uma classe basta colocar um ponto (.) no início do nome da classe.

.text_red{

color: red;

}

O resultado será todos os títulos e parágrafos que tiverem o atributo de classe=”text_red”, apresentarão a cor de letra vermelha.

Propriedades das Fonts em CSS

As fonts, em português letras, e a manipulação das suas propriedades, são o ponto base para uma aprendizagem de CSS. Ou seja, não importa aprender a manipular imagens, blocos ou qualquer outro tipo de conteúdo, sem num primeiro tempo controlar de forma eficiênte as características das letras. A tabela que se segue, e que foi retirada do site w3schools, lista todos as propriedades que podemos controlar com CSS, no que a fonts diz respeito.

Nesta lista fica a faltar uma propriedade de font, que a w3schools trata de forma isolada, que é a propriedade color, e que permite definir a cor do texto.

No exemplo a seguir vamos ver como podemos definir todas as propriedades de fonts para um determinado parágrafo do seu site.

<p id="texto_exemplo">Texto para proriedades das Fonts em CSS</p>

Como pode verificar, criei um parágrafo ao qual atribui um ID com o nome text_exemplo. Agora no CSS, tenho de chamar o selector cujo o ID é text_exemplo e definir todas as suas propriedades de fonts.

#texto_exemplo{
font-family: Verdana; /*Tipo de letra Verdana*/
font-style: italic; /*Letra em itálico*/
font-size: 30px; /*Tamanho de letra de 30px*/
font-variant: small-caps; /*Transforma o texto em small-caps*/
font-weight: bold; /*texto em negrito*/
}