8.6. Introdução ao CSS: seletores, propriedades e valores

CSS, ou Cascading Style Sheets, é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML. Ele é usado para controlar o layout de várias páginas de uma vez, permitindo que você altere o design de um site inteiro apenas modificando um arquivo. Em nossa jornada para nos tornarmos desenvolvedores front-end proficientes, é crucial entender como usar e entender as propriedades CSS.

Seletores CSS

Os seletores CSS são os elementos que definem para quais elementos HTML o estilo será aplicado. Eles podem ser divididos em cinco categorias: seletores de tipo, seletores de descendentes, seletores de classe, seletores de ID e seletores de atributo.

Seletores de tipo

Os seletores de tipo selecionam elementos com base no nome do elemento HTML. Por exemplo, se quisermos selecionar todos os parágrafos em uma página e alterar a cor do texto para vermelho, podemos usar o seguinte código:

p {
    color: red;
}

Seletores de descendentes

Os seletores de descendentes selecionam elementos que são descendentes de um elemento específico. Por exemplo, se quisermos selecionar apenas os parágrafos que estão dentro de uma div, podemos usar o seguinte código:

div p {
    color: red;
}

Seletores de classe

Os seletores de classe selecionam elementos com base em sua classe. Por exemplo, se quisermos selecionar todos os elementos com a classe "texto-vermelho" e alterar a cor do texto para vermelho, podemos usar o seguinte código:

.texto-vermelho {
    color: red;
}

Seletores de ID

Os seletores de ID selecionam um elemento com base em seu ID. Por exemplo, se quisermos selecionar o elemento com o ID "meu-paragrafo" e alterar a cor do texto para vermelho, podemos usar o seguinte código:

#meu-paragrafo {
    color: red;
}

Seletores de atributo

Os seletores de atributo selecionam elementos com base em um atributo e valor específicos. Por exemplo, se quisermos selecionar todos os links que apontam para "https://www.google.com" e alterar a cor do texto para vermelho, podemos usar o seguinte código:

a[href="https://www.google.com"] {
    color: red;
}

Propriedades e valores CSS

As propriedades CSS são os estilos que você deseja alterar, e os valores CSS são os estilos que você deseja aplicar. Por exemplo, se quisermos alterar a cor do texto de um parágrafo para vermelho, "color" é a propriedade que queremos mudar, e "red" é o valor que queremos aplicar.

Existem muitas propriedades diferentes que você pode alterar, incluindo cor de fundo, tamanho da fonte, margem, preenchimento, borda, etc. Cada propriedade tem um conjunto específico de valores que podem ser aplicados.

Por exemplo, se quisermos alterar o tamanho da fonte de um parágrafo para 16 pixels, podemos usar o seguinte código:

p {
    font-size: 16px;
}

Se quisermos alterar a cor de fundo de uma div para azul, podemos usar o seguinte código:

div {
    background-color: blue;
}

É importante lembrar que a ordem dos estilos em seu CSS pode afetar o resultado final. Se você tiver estilos conflitantes para o mesmo elemento, o último estilo no seu CSS será o que prevalece.

Compreender como usar e entender as propriedades CSS é uma habilidade essencial para qualquer desenvolvedor front-end. Espero que este guia tenha ajudado a esclarecer alguns dos conceitos básicos.