Ancho y alto

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 37 de 76.

En CSS, las propiedades width y height se utilizan para establecer las dimensiones del área de contenido de un elemento. Estas propiedades son esenciales para controlar el tamaño y la disposición de los elementos en tus páginas web.

Esta es la sintaxis básica para usar las propiedades width y height:

selector {
    width: value;
    height: value;
}

width: El ancho del área de contenido del elemento.

height: La altura del área de contenido del elemento.

value: El valor de ancho o alto deseado, que se puede especificar en píxeles (px), ems (em), porcentajes (%) u otras unidades CSS válidas. También puedes usar la palabra clave auto para permitir que el navegador calcule automáticamente el ancho o el alto en función del contenido.

Por ejemplo:

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

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

En este ejemplo, todos los elementos <div> tienen un ancho de 300px y una altura de 200px, mientras que todos los elementos <img> tienen un ancho que ocupa el 100 % del ancho de su elemento principal y una altura que se calcula automáticamente para mantener la relación de aspecto.

Desafío

Fácil

Se te proporciona un documento HTML con una división (<div>) y una imagen (<img>). Tu tarea es usar las propiedades width y height para establecer las dimensiones de estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que seleccione el elemento <div>. Establece width en 400px y height en 250px.
Escribe una regla CSS que seleccione el elemento <img>. Establece width en 300px y height en auto.

REQUERIDO FORMATO DE SALIDA: [Tu contenido traducido aquí]

Pruébalo tú mismo

<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>