Tanda <style> HTML

Definisi dan penggunaan

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

di <style> di dalam elemen, Anda dapat menentukan cara pengarahan elemen HTML di dalam peramban.

Perhatikan bahwa elemen style mendefinisikan gaya CSS yang disisipkan di dalam dokumen HTML, sementara elemen link digunakan untuk mengimpor gaya dari tabel gaya eksternal.

Elemen style dapat muncul di berbagai bagian dokumen HTML. Sebuah dokumen dapat mengandung banyak elemen style, jadi tidak perlu mengisi semua definisi gaya ke bagian head. Fitur ini sangat bermanfaat dalam hal generasi halaman dengan mesin template, karena seperti ini, gaya khusus halaman dapat memberikan penambahan bagi gaya yang ditentukan dalam template.

Lihat pula:

Pelajaran HTML:HTML CSS

Pelajaran CSS:Panduan CSS

Panduan HTML DOM:Objek Style

Contoh

Contoh 1

Dengan <style> Elemen menerapkan gaya tabel sederhana ke dokumen HTML:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Ini adalah judul</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>

Coba sendiri

Contoh 2

Banyak 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>Ini adalah judul</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>

Coba sendiri

Petunjuk dan komentar

Perhatian:Ketika peramban membaca gaya tabel, ia akan memformat dokumen HTML berdasarkan informasi format yang ada di gaya tabel. Jika beberapa properti telah didefinisikan untuk pemilih yang sama (elemen) di gaya tabel yang berbeda, maka nilai yang digunakan adalah nilai yang terakhir dibaca dari gaya tabel yang terakhir (lihat contoh di atas)!

Petunjuk:Untuk menghubungkan ke stylesheet eksternal, gunakan <link> tanda.

Petunjuk:Untuk mendapatkan informasi lebih lanjut tentang stylesheet, baca panduan kami Panduan CSS.

Atribut

Atribut Nilai Deskripsi
media Pencarian media Tentukan media yang digunakan untuk gaya.
type text/css Tentukan tipe media <style>.

Atribut global

<style> Tanda masih mendukung Atribut global di HTML.

Atribut peristiwa

<style> Tanda masih mendukung Atribut peristiwa di HTML.

Pengaturan CSS standar

Sebagian besar browser akan menampilkan yang memiliki nilai default berikut: <style> Elemen:

style {
  display: none;
}

Dukungan browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan