Introdução ao CSS

1. Surgimento do CSS

Quando ficou claro que o navegador era usado não apenas para fins científicos, mas também para fins divertidos, logo passou a faltar recursos multimídia: vídeos, animações, cores, sons, transparência, etc.

Inicialmente, a ideia era adicionar mais tags para isso, mas depois perceberam que as novas tags seriam centenas e complicariam muito o trabalho com os documentos HTML. Por isso, surgiu a ideia de separar a "decoração do documento" (design) de seu conteúdo. Assim nasceu o CSS.

Cascading Style Sheets (CSS) ou Folhas de Estilo em Cascata, é um dos componentes principais do desenvolvimento web, responsável pelo design visual das páginas da web.

CSS é um conjunto de propriedades, cada uma delas com um nome e um valor. O desenvolvedor web define essas propriedades, e o navegador é responsável por renderizá-las. Essas propriedades podem ser atribuídas a praticamente qualquer elemento. Um exemplo de estilos CSS:

Existem menos de cem desses parâmetros CSS (também chamados de propriedades CSS). Mas eles podem interagir de maneira interessante e criar efeitos bem inesperados. No CodeGym você vai aprender a trabalhar com eles e criar verdadeira mágica na página 🦄.

2. Estilos dos elementos

Para cada elemento HTML, você pode definir seu próprio estilo CSS usando o atributo style.

Exemplo:

      
<p style="color: blue; font-size: 16px;">Este é um exemplo de estilo inline.</p>
      
    

Este estilo informa ao navegador que o texto dentro do parágrafo deve ser exibido em azul, e que o tamanho da fonte deve ser de 16 pixels de altura.

Na verdade, aqui temos dois "estilos":

• color = blue
• font-size = 16px

Eles estão apenas na mesma linha, separados por ponto e vírgula.

Você também pode, por exemplo, criar um retângulo preto e escrever texto nele com a cor branca. O código ficaria assim:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
Texto branco em fundo preto 
</div>
      
    

3. Cores

Vamos estudar mais profundamente os estilos CSS ao aprender sobre HTML. Mas para deixar mais interessante, vamos falar um pouco sobre cores hoje. Com CSS, você pode definir qualquer cor que o computador possa exibir, e até mais.

As cores em CSS são uma parte importante da estilização de páginas web. Elas permitem criar interfaces visualmente atrativas e intuitivas. Existem várias maneiras de definir cores em CSS, cada uma com suas características e aplicações.

1. Nomes de cores (Color Names)

O CSS suporta mais de 140 nomes de cores padrão. É uma maneira simples e compreensível de definir cores.

      
<div style="color: lightblue;"> Cor azul claro no texto</div>
      
    

Alguns nomes de cores comuns:

2. Valores Hexadecimais (Hexadecimal Values)

Há outra forma de definir qualquer cor — codificação hexadecimal. Com ela, é possível criar 16 milhões de tons — dar nomes para essa quantidade de cores seria impossível, então usamos números.

Os valores hexadecimais começam com o símbolo #, seguido por seis números ou letras que representam a intensidade das cores vermelho, verde e azul (RRGGBB).

      
<div style="color: #ff0000; background-color: #00ff00;"> Vermelho no verde </div>
      
    

Você verá esse método de definição de cores com frequência nos exemplos. Vamos voltar a este tema quando estudarmos CSS com mais detalhes.