8.1. Introdução ao CSS: seletores, propriedades e valores
O CSS, ou Cascading Style Sheets, é uma linguagem de estilo que é usada para descrever a aparência e a formatação de um documento escrito em HTML. CSS é uma das principais tecnologias de front-end, juntamente com HTML e JavaScript, que são usadas para criar e projetar sites.
Então, o que são seletores, propriedades e valores em CSS? Vamos começar com seletores.
Seletores CSS
Os seletores CSS são a parte do CSS que determina quais elementos HTML em uma página serão estilizados. Em outras palavras, eles "selecionam" quais elementos receberão certos estilos CSS. Existem vários tipos de seletores CSS, incluindo seletores de tipo, seletores de classe, seletores de ID, seletores de atributo, seletores de pseudo-classe e seletores de pseudo-elemento.
Os seletores de tipo selecionam elementos HTML com base em seu tipo de elemento. Por exemplo, o seletor de tipo 'h1' selecionaria todos os elementos h1 em uma página.
Os seletores de classe selecionam elementos HTML com base em sua classe. As classes são atributos HTML que podem ser adicionados a qualquer elemento HTML. Por exemplo, o seletor de classe '.intro' selecionaria todos os elementos com a classe 'intro'.
Os seletores de ID selecionam elementos HTML com base em seu ID. Os IDs são atributos HTML únicos que podem ser adicionados a qualquer elemento HTML. Por exemplo, o seletor de ID '#header' selecionaria o elemento com o ID 'header'.
Propriedades CSS
As propriedades CSS são os aspectos dos elementos HTML que você deseja estilizar. Por exemplo, você pode querer alterar a cor de fundo, a fonte, o tamanho da fonte, a margem, o preenchimento, a altura, a largura e muitos outros aspectos de um elemento HTML. Cada uma dessas coisas que você pode querer alterar é uma propriedade CSS.
Por exemplo, a propriedade 'color' é usada para alterar a cor do texto de um elemento. A propriedade 'font-size' é usada para alterar o tamanho da fonte de um elemento. A propriedade 'background-color' é usada para alterar a cor de fundo de um elemento.
Valores CSS
Os valores CSS são os valores específicos que você atribui a uma propriedade CSS. Por exemplo, se você quisesse que o texto de um elemento fosse vermelho, usaria a propriedade 'color' e atribuiria o valor 'red' a ela.
Os valores podem ser muitas coisas diferentes, dependendo da propriedade. Por exemplo, para a propriedade 'color', os valores podem ser nomes de cores, como 'red', 'blue' ou 'green', ou podem ser códigos de cores hexadecimais, como '#FF0000' para vermelho.
Para a propriedade 'font-size', os valores podem ser unidades de medida, como 'px' para pixels, 'em' para a largura da letra 'M' na fonte atual, ou '%' para um tamanho relativo ao tamanho da fonte do elemento pai.
Em conclusão, o CSS é uma linguagem de estilo poderosa que permite estilizar elementos HTML de muitas maneiras diferentes. Ao entender os seletores, propriedades e valores do CSS, você pode começar a criar designs de sites mais complexos e atraentes.
