Cara membuat style di php

Question

Tutorial Web
HTML
HTML style tag | belajar <style> element

HTML Fadlullah Fadul December 3,2018

Table of Contents Show

Deskripsi Penjelasan HTML styletag
Attributes Atribut HTML Tag <style>
Global Attributes Atribut Secara Global (Keseluruhan)
Event Attributes Atribut event (Peristiwa)
Example Contoh HTML <style>element
Contoh Lengkap

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 styletag

HTML <style>elementdigunakan untuk menyisipkan kode styleatau 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 styletersebut hanya berlaku dalam lingkup element itu sendiri (element yang menaunginya).

Elemen stylemerupakan satu dari berbagai cara yang dapat digunakan untuk mengaplikasikan styleatau kode CSS kedalam HTML.

Attributes Atribut HTML Tag <style>

Menentukkan sasaran media atau alat untuk style tersebut diberlakukan.

Contoh:

<style media="screen and (max-width:768px)"> p {color:blue;}</style>

menunjukkan bahwa style (CSS) hanya berlaku untuk element induk dan anak element beserta keturunannya dalam lingkup dimana attribute scopedtersebut ditulis.

Contoh penggunaannya,dapat dilihat pada Contoh 2.

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)

Event Attributes Atribut event (Peristiwa)

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

<!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 styletag yang berisi kode CSS yang berlaku untuk halaman tersebut.

Contoh 2

<!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 styletag pada baris ke-11 tersebut memiliki attribute scopeddan 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 codelengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

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