Solucionado
Boa tarde,
Minha dúvida é a seguinte, no exemplo do curso quando criamos a section no arquivo HTML " index" a instutura coloca " container principal" e no arquivo CSS utilizamos o . para organizar o uso da imagem no nosso arquivo, a dúvida é , no arquivo CSS a ordem que é colocado o . quando organizamos o principal e container terá alguma alteração no uso da imagem, e a outra dúvida seria no uso do principal e no container, não seria mais simples colocarmos tudo junto?
Olá João, vamos começar do inicio o " . " no CSS é um seletor assim como " # ", ele basicamente está ali para dizer ao navegador que naquele trecho de código estamos nos referindo a um elemento Html.
No CSS a ordem de como os elementos são organizados não interfere muito no resultado final, porem se torna uma boa pratica organizar o CSS da mesma forma que o nosso Html pois isso facilita a compreensão do código por outros desenvolvedores e ajuda na manutenção do mesmo.
E outra boa pratica é separar o código CSS de acordo com as seções e os elementos criados no html, da para fazer tudo junto e o resultado final seria o mesmo o problema vem quando você tem um código muito extenso e fica tudo junto e misturado, você vai ter uma certa dificuldade em entender o que foi feito nesse código e o que ele esta executando no final de tudo, fora que se torna inviável fazer manutenção em um código todo bagunçado.
Bom dia Carlos,
Entendi, o uso do . no CSS, agora surgiu uma outra dúvida por exemplo em um trecho do código do HTML, que seria nesse aqui por exemplo:
No HMTL:
<a href="www.alura.com.br" class="container__botao botao_secundario"> Assinar somente o Alura+ </a>No CSS:
.container__botao{
background-color: var(--botao-azul);
border-radius: 5px;
padding: 1em;
color: var(--branco-principal);
display: block;
}---> `.botao_secundario { background-color: transparent; border: 2px solid var(--branco-principal); }
Nesse ".botoa_secundario" ele está fazendo referência ao outro botão não é isso? Eu poderia fazer o mesmo com um ids?
Fala mestre beleza? Então, a classe .botao_secundario faz referência a todos os elementos que a possuem, no seu caso faz referencia a este elemento a também pois ele esta adicionado junto a classe .container_botao. Nesse seu exemplo, o estilo do botao_secundario irá sobrescrever o estilo do .container_botao
Caso voce queira que faça referencia a outro elemento, você pode criar uma classe genérica e uma classe identificadora para cada um dos botoes ex:
HTML
<a class="botao botao_principal">Botao Principal</a>
<a class="botao botao_secundario">Botao Secundario</a>E no seu CSS estilizar cada um de forma diferente baseada na sua classe
CSS
.botao {
border-radius: 16px; // ou 1rem
width: 150px;
min-height: 32px; // ou 2 rem
}
.botao.botao_principal {
background-color: red;
}
.botao.botao_secundario {
background-color: blue;
}Dessa maneira você consegue estilizar a classe de botao de forma genérica e ainda assim estilizar cada botão individualmente sem precisar usar atributo ID por exemplo, apenas com classes CSS :D
(Mas respondendo sua pergunta, vc poderia usar ID sim, só não é tão indicado se você consegue fazer o estilo com classes)
Salve João, só completando a resposta do André sobre o uso do " id ", ele não muito recomendado por conta de você não poder reaproveita um determinado " id " em vários elementos Html ao mesmo tempo , o " id " geralmente é usado quando temos um elemento que vai ser único dentro do código um exemplo é a tag " input " pois cada input é único dentro do código Html, dificilmente você vai ter dois inputs do mesmo tipo em um código.
To deixando o link de um artigo da alura que explica melhor as diferenças entre o " id " e " class "
Entendi o pontos Andre e Carlos, muito obrigado pela solução da minha dúvida. Irei ler o artigo Carlos o//