Lebar dan Tinggi

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 37 dari 76.

Dalam CSS, property width dan height digunakan untuk mengatur dimensi area konten suatu elemen. Property ini penting untuk mengendalikan ukuran dan tata letak elemen di halaman webmu.

Berikut sintaks dasar untuk menggunakan property width dan height:

selector {
    width: value;
    height: value;
}

width: Lebar area konten elemen.

height: Tinggi area konten elemen.

value: Nilai lebar atau tinggi yang diinginkan, yang dapat ditentukan dalam piksel (px), em (em), persentase (%), atau satuan CSS valid lainnya. Kamu juga dapat menggunakan kata kunci auto agar browser menghitung lebar atau tinggi secara otomatis berdasarkan konten.

Contoh:

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

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

Dalam contoh ini, semua elemen <div> memiliki lebar 300px dan tinggi 200px, sedangkan semua elemen <img> memiliki lebar yang mengisi 100% lebar elemen induknya dan tinggi yang dihitung secara otomatis untuk mempertahankan rasio aspek.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan sebuah division (<div>) dan sebuah gambar (<img>). Tugasmu adalah menggunakan property width dan height untuk mengatur dimensi elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div>. Atur width menjadi 400px dan height menjadi 250px.
Tulis aturan CSS yang menargetkan elemen <img>. Atur width menjadi 300px dan height menjadi auto.

Coba sendiri

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