Tag <style> HTML


Contoh

Penggunaan elemen <style> untuk menerapkan style sheet sederhana ke dokumen HTML:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

Lebih banyak contoh "Coba Sendiri" di bawah ini.


Definisi dan Penggunaan

Tag <style>digunakan untuk mendefinisikan informasi gaya (CSS) untuk sebuah dokumen.

Di dalam <style>elemen, Anda menentukan bagaimana elemen HTML harus dirender di browser.


Tips dan Catatan

Catatan: Saat browser membaca style sheet, itu akan memformat dokumen HTML sesuai dengan informasi di style sheet. Jika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama di lembar gaya yang berbeda, nilai dari lembar gaya yang terakhir dibaca akan digunakan (lihat contoh di bawah)!

Tip: Untuk menautkan ke lembar gaya eksternal, gunakan tag <link> .

Tip: Untuk mempelajari lebih lanjut tentang style sheet, silakan baca Tutorial CSS kami .


Dukungan Peramban

Element
<style> Yes Yes Yes Yes Yes


Atribut

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
type text/css Specifies the media type of the <style> tag

Atribut Global

Tag <style>juga mendukung Atribut Global dalam HTML .


Atribut Acara

Tag <style>juga mendukung Atribut Peristiwa dalam HTML .


Lebih Banyak Contoh

Contoh

Beberapa gaya untuk elemen yang sama:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Halaman Terkait

Tutorial HTML: HTML CSS

Tutorial CSS : Tutorial CSS

Referensi DOM HTML: Objek Gaya


Pengaturan CSS Default

Sebagian besar browser akan menampilkan <style>elemen dengan nilai default berikut:

style {
  display: none;
}