Curso de CSS – Aula 02: Estilo incorporado e cores em hexadecimal

Este Curso de  CSS é a continuação do Curso de HTML publicado aqui no Hiperbytes. 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 segunda aula do Curso de Desenvolvimento Web com CSS. Caso ainda não tenha lido, recomendo que leia antes o artigo: Introdução às CSS (Folhas de Estilo).


Estilo incorporado

Para começarmos a colocar em prática o que aprendemos até o momento, vamos utilizar o método de estilo incorporado, que consiste em colocar as regras CSS dentro das tags <style></style> que, por sua vez, ficam dentro da seção <head> conforme aprendemos na primeira aula do Curso de HTML. Segue abaixo um exemplo de como deve ser a estrutura da página com a tag <style> e as regras CSS contidas dentro dela:

<html>
<head>
<title>Introdução às CSS</title>
<style type="text/css">
     h1 {
        color: red;
        font-size: 32px;
     }
     p {
        color: blue;
        font-size: 24px;
     }         
</style>
</head>
<body>
     <h1>Hiperbytes</h1>
     <p>Curso de HTML</p>
     <p>Curso de CSS</p>
</body>
</html>
Curso de CSS - Estilo incorporado

A vantagem deste método sobre o estilo inline é que a legibilidade do código é bem melhor e, até certo ponto, estamos separando o conteúdo do site da estilização. Note no exemplo acima que o título e os parágrafos possuem a estilização desejada, mas as tags <h1> e <p> não possuem mais os códigos de estilização que utilizamos na primeira aula do curso, e o efeito visual é o mesmo.

Existe outro método de estilização muito mais eficiente, mas para efeito didático utilizaremos por enquanto o estilo incorporado para facilitar o aprendizado da linguagem CSS, e no momento oportuno aprenderemos o método em questão.


Unidade de medida

Vários aspectos de estilos dependem da definição de uma medida. Tamanho de fontes, espaçamento entre elementos e espessura de uma borda são alguns exemplos. Existem diversas unidades de medidas que são utilizadas conforme a especificidade da sua aplicação, mas por hora utilizaremos apenas a medida em px (pixel).

A unidade de medida em px (pixel) é calculada em relação à resolução do dispositivo no qual a página é apresentada, podendo ser a tela de um monitor ou de um smartphone. O termo “pixel” se refere aos pontinhos que compõem as imagens na tela e é muito útil na maior parte dos casos.

Exemplos:

font-size: 20px;
line-height: 30px;

Cores em hexadecimal

Neste curso aprenderemos a definir as cores de duas maneiras: pelo nome e pelo seu valor em hexadecimal.

Definir cores através do nome é muito simples e já fizemos isso na aula anterior. Na regra CSS basta utilizar a propriedade “color” e no valor informar o nome da cor (em inglês) que você deseja.

No site da W3C encontramos uma lista com os nomes das principais cores que podemos utilizar em nossas páginas. São elas: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white e yellow.

Tabela de cores - nome e hexadecimal
Figura extraída do site  https://www.w3.org/TR/CSS21/syndata.html#color-units

Através das cores acima já conseguimos dar mais “vida” às nossas páginas web. Porém, utilizando os nomes, ficamos limitados à variação das cores que são possíveis de serem representadas através de nomes. Por essa e outras razões, é mais eficiente utilizarmos a notação hexadecimal.

Uma cor hexadecimal é definida da seguinte forma: #RRGGBB, na qual RR, GG e BB devem variar de 00 a FF e representam os componentes Red (vermelho), Green (verde) e Blue (azul) de uma cor. Veja abaixo um exemplo:

#FA15B9

Os valores alfanuméricos possíveis na notação hexadecimal são: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E e F. Somente eles são válidos para definir uma cor, sendo que a variação entre os valores de cada elemento produzirá uma tonalidade de cor diferente.

Veja na tabela abaixo a formação de algumas cores:

RGBCorDescrição
000000#000000preto
FFFFFF#FFFFFFbranco
FF0000#FF0000vermelho
CFCFCF#CFCFCFcinza

Para as notações #6699FF e #FFFFFF, observe que cada um dos pares que representam RGB é formado por números iguais. Nesse caso, podemos abreviar essas notações para #69F e #FFF.


Comentários

Um componente opcional, mas de grande utilidade na escrita de folhas de estilo, é o sinal para inserir comentários. Eles não possuem nenhuma função de estilização, inclusive são totalmente ignorados pelos navegadores, mas eles podem fornecer informações relevantes sobre o código.

Um comentário começa com conjunto de caracteres /* e termina com o */ .  Veja o exemplo a seguir.

/*
Layout do meu primeiro site em CSS
Desenvolvido por Júnior Gonçalves
*/

Este artigo continua em Aula 03: Estilização de textos – parte 1