Fungsi Properti CSS Display

fungsi-css-display-yelloweb

Halo teman-teman kita berjumpa lagi 🙂 Kali ini kita akan mencoba sebuah tutorial, ya kita akan mencoba menggunakan salah satu properti dari CSS, yaitu properti display.

Fungsi dari properti css display itu sendiri adalah bagaimana suatu elemen akan ditampilkan pada sebuah halaman website.

Kali ini kita akan mencoba bagaimana mengubah sebuah elemen bertipe blok menjadi tidak bertipe blok.

Contoh elemen bertipe blok, adalah sebagai berikut:

  • <h1>
  • <p>
  • <div>
  • <li>

Contoh elemen tidak tidak bertipe blok, sebagai berikut:

  • <a>
  • <span>

Nah sekarang teman-teman buatlah file display.html seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fungsi Properti CSS Display</title>
    <style>
        
        h2{
            background-color: #000FFF;
            display: inline;
        }
        span{
            background-color: #3d941c;
            display: block;
        }


        /*  
            untuk melihat efek perbedaannya, 
            hilangkan fungsi display:inline dan display:block  
        */
        
    </style>
</head>
<body>
    <h2>Tulisan ini bertipe blok</h2>
    <span>Tulisan ini tidak bertipe blok</span>
</body>
</html>

Jangan lupa untuk melihat perbedaannya kalian hilangkan fungsi properti css display (display:inline & display:block).

Selamat mencoba ya teman-teman, sampai bertemu kembali diartikel berikutnya, bye….

Comments are closed.