Largura e Altura

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 37 de 76.

No CSS, as propriedades width e height são usadas para definir as dimensões da área de conteúdo de um elemento. Essas propriedades são essenciais para controlar o tamanho e o layout dos elementos em suas páginas web.

Aqui está a sintaxe básica para usar as propriedades width e height:

selector {
    width: value;
    height: value;
}

width: A largura da área de conteúdo do elemento.

height: A altura da área de conteúdo do elemento.

value: O valor de largura ou altura desejado, que pode ser especificado em pixels (px), ems (em), porcentagens (%) ou outras unidades CSS válidas. Você também pode usar a palavra-chave auto para permitir que o navegador calcule automaticamente a largura ou altura com base no conteúdo.

Por exemplo:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

Neste exemplo, todos os elementos <div> têm uma largura de 300px e uma altura de 200px, enquanto todos os elementos <img> têm uma largura que ocupa 100% da largura do elemento pai e uma altura que é calculada automaticamente para manter a proporção.

Desafio

Fácil

Você recebeu um documento HTML com uma divisão (<div>) e uma imagem (<img>). Sua tarefa é usar as propriedades width e height para definir as dimensões desses elementos. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <div>. Defina o width como 400px e o height como 250px.
Escreva uma regra CSS que tenha como alvo o elemento <img>. Defina o width como 300px e o height como auto.

Folha de consulta

As propriedades width e height controlam as dimensões da área de conteúdo de um elemento:

selector {
    width: value;
    height: value;
}

Os valores podem ser especificados em pixels (px), ems (em), porcentagens (%), ou use auto para cálculo automático:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

Experimente você mesmo

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>