Ancho y alto

Parte de la sección Styling with 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 el diseño de los elementos en sus páginas web.

Aquí tienes 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 anchura o altura deseado, que puede especificarse 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 la anchura o la altura basándose en el 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 padre 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 apunte al elemento <div>. Establece el width a 400px y el height a 250px.
Escribe una regla CSS que apunte al elemento <img>. Establece el width a 300px y el height a auto.

Hoja de referencia

Las propiedades width y height controlan las dimensiones del área de contenido de un elemento:

selector {
    width: value;
    height: value;
}

Los valores se pueden especificar en píxeles (px), ems (em), porcentajes (%), o usar auto para el cálculo automático:

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

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

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>