Olá Samuel, tudo bem?
Excelente a sua pergunta!
Nós fazemos isso por meio dos seletores CSS! Esse é um assunto bem vasto e que será aprofundado nas próximas aulas do curso, então a seguir colocarei um pequeno resumo e alguns exemplos de aplicação. Vamos lá!
Um dos objetivos dos seletores quando aplicados nos elementos HTML, é a localização de qual ou quais elementos irão receber no CSS determinadas propriedades. Existem diversas formas de selecionarmos, podendo ser por meio da tag, pela classe, ID, entre outros. Cada tipo de seletor possui as suas próprias particularidades.
Seletor por tag
Irá selecionar todos os elementos correspondentes a uma determinada tag HTML.
Exemplo:
p {
font-size: 22px;
color: red;
}
Seletor por classe
Irá selecionar todos os elementos que baseados no valor de seu atributo classe. Indicado para quando queremos que vários elementos tenham o mesmo estilo. No CSS, utilizamos .
para identificar que se trata de um seletor por classe.
Exemplo:
<ul>
<li class="item-da-lista"></li>
<li class="item-da-lista"></li>
<li class="item-da-lista"></li>
<li class="item-da-lista"></li>
</ul>
.item-da-lista {
margin-left: 27px;
color: red;
font-weight: bold;
}
Seletor por ID
Irá selecionar o elemento baseado no valor de seu atributo id. Deve existir apenas um elemento com o mesmo ID no mesmo documento HTML, sendo assim, é indicado a aplicação quando queremos aplicar estilos em um único elemento. No CSS, utilizamos #
para identificar que se trata de um seletor por ID.
Exemplo:
<p id="paragrafo-missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
#paragrafo-missao {
font-size: 22px;
}
Caso queira aprender mais um pouco sobre os Seletor, segue a indicação de leitura:
Espero ter ajudado, em caso de dúvida fique a vontade para perguntar. Bons estudos!