Imagem

Oi bom dia ^_^

Sobre a distorção é simples, quando você define somente 1 valor, altura ou width o css automaticamente faz um calculo que deixa a imagem na mesma proporção que ela possuia antes, para resolver isso basta apagar o height ou o width, você pode testar e escolher o que mais lhe agradar.

Agora sobre os . e as # no css, essas são respectivamente as classes e os ids de um elemento html, por exemplo caso você queira mudar um paragráfo utilizando o css você pode criar uma classe dessa forma:

<p class="paragrafoDiferente"></p>

E depois no css você pode alterar o estilo de acordo com o seu gosto utilizando o nome que você colocou na classe:

.paragrafoDiferente {
        ///Código da estilização que você quer implementar.
}

Exemplo com id:

<p id="paragrafoDiferente"></p>

Css:

#paragrafoDiferente {
        ///Código da estilização que você quer implementar.
}

A diferença entre uma classe e um id, é que a classe é algo que você vai utilizar em varios lugares, por exemplo caso você crie uma estilização para uma imagem tipo imagemArredondada e depois queira utilizar ela em outros lugar, você vai adicionar essa classe na imagem que você quer que fique arredondada.

Já o id você só deve utilizar ele em 1 unico lugar, por exemplo você pode ter 2 ids, um homePage e outro aboutPage, esse vão ser ids, você nunca deve colocar eles em mais de um lugar.

Já a situação que não coloca nada, acho que você está falando das tags, body, h1 e etc

Esse são nomes de elementos HTML por isso você não precisa definir nenhuma classe ou id.

Por exemplo caso você queira mudar a estilização padrão de todos os elementos <p>, você pode ir no css e utilizar o elemento p como seletor:

p {
    ///Código da estilização que você quer implementar.
}

E todos os elementos do tipo 'paragrafo' irão mudar.

Acho que é isso, espero ter ajudado :)

Oi, Aline, tudo bem? Bom dia! :)

Então, como a imagem é maior, o width e height podem acabar modificando a maneira que esta imagem é exibida, mesmo que você já esteja dizendo pro browser que ele tenha que ocupar 100% da largura da tela. Nesse caso, você poderia driblar este problema adicionando a propriedade object-fit: contain, o que vai fazer com que a imagem se encaixe de acordo com as medidas que você ordenou (width e height).

Ou seja, você só passa pra ele:

#imagem {
    width: 100%;
    height: 350px;
    object-fit: contain;
}

Mas é legal você entender também como funciona o object-fit e quais são as outras propriedades que poderiam ser encaixadas ali. Caso desperte interesse, segue o link da documentação no MDN.

https://developer.mozilla.org/pt-BR/docs/Web/CSS/object-fit

Abraços! :D

Obrigada Jandson e Felipe!!!!! Me ajudou bastante entender a diferença entre id e class! Na parte object-fit, no meu caso deu certo object-fit: cover; Obrigada!