Inline, Embedded dan External CSS
DAFTAR ISI
Ada 3 cara memasang kode CSS ke dalam HTML yaitu :
  • Inline CSS
  • Embed / memasang kode CSS ke dalam bagian <head>
  • Link ke external CSS
INLINE CSS
Kode CSS di tulis langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaknya hanya di gunakan jika anda mau memformat suatu elemen sekali saja.
Contoh:
<h1 style="color: red;">
H1 dengan CSS
</h1> 

Pada contoh si atas, elemen <h1> di format agar tulisannya menggunakan warna merah, elemen lain, tidak akan menggunakan warna merah karena format ini hanya berlaku pada elemen paragraf yang di tentukan kode CSSnya. Penulisan CSS dengan cara ini mulai dengan kata “style = lalu di ikuti dengan syntax Property:value;”
EMBEDDED CSS
Kita bisa menempelkan kode CSS di antara tag <head> & </head>. Penulisan CSS dengan cara ini awalnya diawali dengan tag <style>—-</style>.
Contoh :
<head>
<style type=”text/css”>
h1 {color : red;}
</style>
</head>
EXTERNAL CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran “.css” atau ekstensi “.css”. Anda lalu perlu memanggil file CSS itu ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
  • Anda membuat satu file dengan notepad atau teks editor lain, dan beri nama, contohnya: style.css, lalu tuliskan kode-kode css di dalam file itu.
 p {font-family: arial; font-size: small;} h1 {color: red; }
  • Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head> <link rel=”stylesheet” href=”style.css”> </head>
Baca Juga:  Membuat Tombol Submit dan Reset

Ebook Gratis!!

Subscribe untuk dapatkan e-book GRATIS dan informasi teknologi terbaru dan diskon menarik langsung di Email-mu

Infanthree Digital Administrator
Infanthree Digital Administrator
Website, Mobile Apps, IoT, Digital Marketing Agency, IT Konsultan
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
WhatsApp chat