Fungsi !important Pada Baris CSS

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
Fungsi !important Pada Baris CSS

Fungsi !important

Hi Web DEveloper! kali ini guru design akan berbagi tutorial tentang fungsi Important pada baris kode css, ok langsung saja ketutorialnya.

Sebelumnya kita harus tahu terlebih dahulu important itu apa?  Jadi important itu berasal dari bahasa inggris yang artinya penting, kemuadian kita juga harus tau terlebih dahulu bagaimana cara kerja sebuah browser?,  Jadi browser itu akan membaca atau menjalankan perintah terakhir yang ditulis di baris kode css, jadi dengan importan kita bisa pilih style yang mana yang akan kita utamakan.

Contoh tanpa !important

CSS

.tidak{
  background: pink;
 }

HTML

<div class="tidak" style="background: green;">Maka sudah pasti warna background nya akan berwarna hijau, karena browser akan membaca perintah yang terakhir, dan perintah pertama yang di css akan di abaikan.</div>

Begini Penerapannya 

<html>
    <head>
        <title> Judul mu tulis disini </title>
        <style type="text/css">
          .tidak{
            background: pink;
           }
        </style>
    </head>
<body>
    <div class="tidak" style="background: green;">Maka sudah pasti warna background nya akan berwarna hijau, karena browser akan membaca perintah yang terakhir, dan perintah pertama yang di css akan di abaikan.</div>
</body>
</html>

Begini demonya

Judul mu tulis disini
Maka sudah pasti warna background nya akan berwarna hijau, karena browser akan membaca perintah yang terakhir, dan perintah pertama yang di css akan di abaikan.

Contoh dengan !important

CSS

.ya{
  background: pink!important;
 }

HTML

<div class="ya" style="background: green;">Maka sudah pasti warna background nya akan berwarna hijau, karena browser akan membaca perintah yang terakhir, dan perintah pertama yang di css akan di abaikan.</div>

Begini Penerapannya 

<html>
    <head>
        <title> Judul mu tulis disini </title>
        <style type="text/css">
          ya{
            background: pink!important;
           }
        </style>
    </head>
<body>
    <div class="ya" style="background: green;">Maka sudah pasti warna background nya akan berwarna pink, karena browser membaca perintah yang di tandai penting (important).</div>
</body>
</html>

Begini demonya

Judul mu tulis disini
Maka sudah pasti warna background nya akan berwarna pink, karena browser membaca perintah yang di tandai penting (important).

Tujuan

Dalam penulisan program tentu ada perintah default yang akan dibaca browser maka dengan !important kita bisa mengganti perintah default sesuai selera.

Sekian semoga bermanfaat terimakasih.
Rafiqi, S.Kom.