tRikSonic
Tema

HTML style Tag

Terakhir diperbarui : 22 Mei 2018 - 08.00

Tutorial HTML <style>

Element html style digunakan untuk menentukan informasi gaya atau menentukan bagaimana document html di tampilkan.
html font
Dalam penulisan pada document HTML, element style dianjurkan peletakannya didalam rentang element <head>...</head>, walaupun browser masih sangat baik membaca jika peletakannya di dalam element <body>...</body>, tapi dalam penulisan html yang baik dan benar meletakan element <style> didalam element <body>...</body> merupakan hal yang tidak dianjurkan.

Contoh HTML <style>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
body {
  font-family : verdana, sans-serif, arial;
  font-size : 16px;
}
h1 {
  color : red;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<p>Ini Konten berupa teks</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
body {
  font-family : verdana, sans-serif, arial;
  font-size : 16px;
}
h1 {
  color : red;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<p>Ini Konten berupa teks</p>

</body>
</html>

Attribute HTML <style>

media
Attribute ini digunakan untuk menentukan media apa yang diterapkan untuk element style.
Contoh 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>

<style media="print">
h2 {
   color: red;
}
</style>

</head>
<body>

<h2>Heading 2</h2>

</body>
</html>
Contoh diatas menjelaskan bahwa element <h2>...</h2> akan berwarna merah jika di Print
Contoh 2:
<style media="screen and (min-width:500px)">
h2.demo1{
 color : red;
}
</style>

<style media="screen and (max-width:400px)">
h2.demo2{
 color : blue;
}
</style>

<h2 class="demo1">
 Teks ini berwarna merah diatas area 500px
</h2>

<h2 class="demo2">
 Teks ini berwarna Biru di area 400px kebawah
</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>

<style media="screen and (min-width:500px)">
h2.demo1{
 color : red;
}
</style>

<style media="screen and (max-width:400px)">
h2.demo2{
 color : blue;
}
</style>

</head>
<body>

<h2 class="demo1">
 Teks ini berwarna merah diatas area 500px
</h2>

<h2 class="demo2">
 Teks ini berwarna Biru di area 400px kebawah
</h2>

<hr/>

<p>
 Perkecil dan Perbesar area Preview
 untuk melihat perbedaannya
</p>

</body>
</html>
Contoh 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>

<style media="tv">
h2 {
   color:blue;
}
</style>

</head>
<body>

<h2>Heading 2</h2>

</body>
</html>
Contoh diatas menjelaskan element <h2>...</h2> akan berwarna biru, jika diakses melalui televisi yang support internet dan browser
scoped
Atribute ini menentukan bahwa gaya hanya berlaku untuk elemen induknya dan element yang ada di dalam induknya.
Attribute ini hanya berlaku untuk browser firefox dengan versi tertentu saja
Contoh :
<!--div 1-->
<div class="div-1">
  <style scope>
   .red {color:#000000;}
  </style>
  
  <h2 class="red">Heading 2</h2>
  <p>konten teks</p>
  <p class="red">konten teks</p>
</div>

<!--div 2-->
<div class="div-2">
  <h2 class="red">Heading 2</h2>
  <p>konten teks</p>
  <p class="red">konten teks</p>
</div>
Contoh diatas menjelasan bahwa .red {...} hanya berfungsi untuk element <div class="div-1">...</div> dan tidak berlaku untuk <div class="div-2">...</div>
Catatan : Attribute ini sudah usang atau tidak berlaku lagi, banyak browser akan menganggap bahwa element style dengan attribute scope bersifat global.
type
Attribute ini digunakan untuk mementukan bahasa yang digunakan pada element style
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>

<style type="text/css">
h2 {
   color:#000000;
}
</style>

</head>
<body>

<h2>Heading 2</h2>

</body>
</html>

Global Attributes:

Element <style> mencakup Global Attributes HTML.

Event Attributes:

Element <style> mencakup Event Attributes HTML.

Browser Support :

Desktop
ElementChromeSafariFirefoxOperaIEEdge
<style>1113.53Ya
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<style>11Ya4961
Nilai pada table memnentukan versi awal browser.

Default CSS :

Browser yang support dengan element <style>, mempunyai nilai default :
style {
    display: none;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.