Tutorial HTML <style>
Element html
style digunakan untuk menentukan informasi gaya atau menentukan bagaimana document html di tampilkan.
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 PrintContoh 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 browserscoped
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
styleContoh :
<!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
| Element | Chrome | Safari | Firefox | Opera | IE | Edge |
<style> | 1 | 1 | 1 | 3.5 | 3 | Ya |
Mobile
| Element | Android webview | Chrome Android | Edge mobile | Firefox Android | IE mobile | Opera Android | iOS Safari |
<style> | 1 | 1 | Ya | 4 | 9 | 6 | 1 |
Nilai pada table memnentukan versi awal browser.
Default CSS :
Browser yang support dengan element
<style>, mempunyai nilai default :style {
display: none;
}