HTML e CSS: posicionamento, fontes e Flexbox!

Você utiliza a CLASS quando quer estilizar alguma parte especifica do html, então ele vira o seletor aonde vc pode incluir dentro das tags html sem precisar de um fechamento </>. e para chamar no CSS é: .nomedaclasse

"reset CSS". pois essa parte do código limpa todos os padrões dos navegadores, como uma decoração nos nossos links ou o espaçamento enorme que existe entre o início da nossa página e o título

margin, que define a área de margem nos quatro lados do elemento (cima, direita, baixo, esquerda)

padding, que define a área de preenchimento interna nos mesmos quatro lados do elemento

exemplo p fazer no começo do css:

• { margin: 0; padding: 0;

}

A propriedade CSS de box-sizing define como a largura total e a altura de um elemento são calculadas.

1-No seu CSS, selecione o container principal e defina display: flex;.
2-Use flex-direction: row; ou column; para ajustar a direção dos itens.
3-Adicione flex-wrap: wrap; para permitir que os itens se ajustem e mudem de linha conforme o tamanho da tela.

Padrões de projetos CSS com height e box-sizing;
Unidade Viewport;
Hierarquia entre elementos pai e filho;
Formas e parâmetros de posicionamento;
Flexbox.

justify-content: space-between; deixa os elementos um do lado do outro com espaço margin: 10%; cria margem entre os elementos

Nessa aula, você aprendeu: Criar seções (sections) no HTML; Posicionar elementos com Flexbox utilizando o justify-content; Indentar o código; Boas práticas para nomear sections; Utilizar o Figma para consultar medidas de elementos; Alterar o tamanho, tipo e peso da fonte com font-size, font-family e font-weight; Importar fontes com Google Fonts.

A tag <div> define uma divisão em um documento HTML e costuma ser usada como um contêiner para outros elementos, o que ajuda na estilização do bloco. Por esse motivo, a <div> é frequentemente utilizada quando precisamos agrupar elementos sem usar as tags semânticas do HTML. Isso acontece porque a <div> não tem valor semântico. Portanto, não significa nada para os navegadores e mecanismos de pesquisa.