Deskripsi
Penjelasan HTML style tag

HTML <style> element digunakan untuk menyisipkan kode style atau CSS ke dalam sebuah dokumen web (HTML).

<style> element ditulis di dalam element <head>..</head> yang merupakan bagian kepala sebuah dokumen HTML. Apabila dituliskan attribute scoped, maka penempatannya boleh ditulis di bagian manapun di dalam element HTML, yang mana style tersebut hanya berlaku dalam lingkup element itu sendiri (element yang menaunginya).

Elemen style merupakan satu dari berbagai cara yang dapat digunakan untuk mengaplikasikan style atau kode CSS kedalam HTML.

Attributes
Atribut HTML Tag <style>

media

Menentukkan sasaran media atau alat untuk style tersebut diberlakukan.

Contoh: <style media="screen and (max-width: 768px)"> p {color: blue;} </style>

scoped

menunjukkan bahwa style (CSS) hanya berlaku untuk element induk dan anak element beserta keturunannya dalam lingkup dimana attribute scoped tersebut ditulis.

Contoh penggunaannya, dapat dilihat pada Contoh 2.

type

Menentukkan tipe media (MIME type) atau bahasa yang digunakan untuk style tersebut. Dalam HTML5 attribute ini tidak perlu ditulis, adapun untuk versi HTML sebelumnya, attribute ini harus ditulis.

Contoh: <style type="text/css"> p {color: blue;} </style>


Global Attributes
Atribut Secara Global (Keseluruhan)

<style> tag mencakup global attributes.

Event Attributes
Atribut event (Peristiwa)

<style> tag mencakup event attributes.

Example
Contoh HTML <style> element

Contoh 1
<!DOCTYPE html>
<html>
  <head>
    <title>HTML style tag</title>
    <style>
      p {
        color: blue;
      }
      span {
        color: red
      }
    </style>
  </head>
  <body>
    <p>Hello World</p>
    <span>Helo Dunia</span>
  </body>
</html>

Pada baris 5 sampai 12 merupakan html style tag yang berisi kode CSS yang berlaku untuk halaman tersebut.

Contoh 2
<!DOCTYPE html>
<html>
  <head>
    <title>HTML style tag</title>
    <style>
      p {color: red;}
    </style>
  </head>
  <body>
    <div>
      <style scoped>
        p {color: blue;}
      </style>
      <p>Teks ini berwarna biru</p>
    </div>

    <p>Teks ini berwarna merah</p>
  </body>
</html>

Karena style tag pada baris ke-11 tersebut memiliki attribute scoped dan berada dalam <div> element, maka kode CSS yang ditulispun hanya berlaku untuk element yang berada dalam lingkup <div> tersebut.

Untuk hasilnya, bisa dilihat pada demo editor dibawah ini:

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <style>
Code Editor

Note: Apabila hasil (result) pada kedua teks diatas memiliki warna yang sama, kemungkinan browser Anda tidak mendukung scoped attribute.