8.9. Introdução ao CSS: seletores, propriedades e valores: Como aplicar valores a propriedades CSS

Introdução ao CSS: Seletores, Propriedades e Valores

CSS, ou Cascading Style Sheets, é uma linguagem de estilo usada para descrever a aparência de um documento escrito em HTML. CSS descreve como os elementos HTML devem ser exibidos na tela, papel, ou em outras mídias. CSS economiza muito trabalho, pois controla o layout de várias páginas de uma só vez.

Seletores CSS

Os seletores CSS são usados para "encontrar" (ou selecionar) elementos HTML com base em seu nome de elemento, id, classe, atributo, e mais.

Por exemplo, um seletor de tipo seleciona elementos por nome de nó. Por exemplo, o seletor de tipo 'h1' seleciona todos os elementos <h1>.

<style>
h1 {
  color: blue;
}
</style>

Este exemplo seleciona todos <h1> elementos e muda a cor do texto para azul.

Propriedades CSS

As propriedades CSS são usadas para especificar o estilo de um elemento. Cada propriedade tem um nome e um valor. O nome da propriedade é seguido por dois pontos e o valor da propriedade. Uma declaração CSS sempre termina com um ponto e vírgula, e as declarações de estilo são separadas por um espaço.

Por exemplo:

<style>
p {
  color: red;
  text-align: center;
}
</style>

Este exemplo define a cor do texto para vermelho e alinha o texto ao centro.

Valores CSS

Os valores CSS são definidos junto com as propriedades para definir o estilo dos elementos HTML. Por exemplo, a propriedade de cor pode ter valores como 'red', 'blue', 'green', etc. Além disso, a propriedade de largura pode ter valores como '100px', '50%', etc.

Exemplo:

<style>
p {
  font-size: 20px;
  color: white;
  background-color: black;
}
</style>

Este exemplo define o tamanho da fonte para 20 pixels, a cor do texto para branco e a cor de fundo para preto.

Como aplicar valores a propriedades CSS

Aplicar valores a propriedades CSS é bastante simples. Primeiro, você precisa selecionar o elemento ao qual deseja aplicar o estilo. Em seguida, você precisa definir a propriedade que deseja alterar. Finalmente, você precisa definir o valor que deseja aplicar a essa propriedade.

Por exemplo, se você quiser alterar a cor de todos os seus parágrafos para azul, você pode fazer isso da seguinte maneira:

<style>
p {
  color: blue;
}
</style>

Neste exemplo, 'p' é o seletor, 'color' é a propriedade e 'blue' é o valor.

CSS é uma linguagem poderosa que permite aos desenvolvedores controlar a aparência de seus sites. Ao entender como os seletores, propriedades e valores CSS funcionam, você pode criar sites mais atraentes e eficazes.

Esperamos que este guia tenha ajudado você a entender melhor o CSS. Lembre-se de que a prática é a chave quando se trata de aprender e dominar CSS. Portanto, continue praticando e experimentando diferentes seletores, propriedades e valores.

Próxima página do Ebook Gratuito:

53Introdução ao CSS: seletores, propriedades e valores: Entendimento da cascata e herança em CSS

4 minutos