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>
