4-como-o-css-funciona.md

Como o CSS funciona?

No CSS referenciamos as tags ou atributos HTML através de seletores e usando propriedades e valores conseguimos alterar a aparência e usabilidade de um site. Um bloco de CSS pode conter uma ou mais declarações que alteram uma característica específica, como o background-color, que define qual a cor do plano de fundo do elemento HTML referenciado pelo seletor.

Se fossemos estilizar uma barra de navegação de um site, sabe aquela que fica no topo da maioria dos sites e contém links para todas suas seções?

Primeiro, escrevemos o HTML demarcando o conteúdo. Barras de navegação geralmente tem um logo e uma lista de links:

<nav>
    <img src=".minha-imagem.png" alt="">
    <ul>
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
    </ul>
</nav>

Para estilizarmos cada elemento dessa barra de navegação, podemos utilizar seletores CSS.

nav {
  /* CSS de exemplo */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

img {
  /* ---- */
}

ul {
  /* ---- */
}

li {
  /* ---- */
}

a {
  /* ---- */
}

Mas o que representam essas marcações?

• seletor: Elemento ou atributo do HTML que será estilizado, por exemplo, uma div, um parágrafo, uma section. Para saber mais sobre os seletores, acesse a nossa documentação sobre seletores ⧉.

• propriedade: A característica a ser alterada, como, por exemplo, cor do texto, cor de fundo do elemento, seu tamanho e espaçamento.

• valor: As opções de customização dessa característica, como, por exemplo, definir uma cor red pra propriedade color.

🔎 Código Fonte

.seletor h1 {
  background-color: tomato;
}

Próxima página → Adicionando CSS no HTML