Referensi Belajar HTML style tag. Tutorial dan panduan mengenai element <style>...</style> yang digunakan untuk menyisipkan kode css dalam dokumen HTML. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <style>.


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.

Attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <style> element

Contoh 1
HTML
<!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
HTML
<!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

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

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

    <p>Jika dalam demo ini tidak benar (salah). kemungkinan browser tidak support.</p>
  </body>
</html>



Comments