Sumber gambar : Google
Embed CSS terbagi menjadi tiga yaitu :
- Inline Style
- Internal Style
- External Style
Inline Style
Adalah penerapan kode css pada satu elemen yang sama atau bisa dibilang dengan satu halaman dengan kode HTML, dengan cara ini kita bisa langsung memasukan kode css pada tag HTML. Atribut yang digunakan adalah dengan memberi tag style.
<p style="color: blue;"> Paragraf jika ingin berubah warna biru</p>
<p style="color: red;"> Paragraf jika ingin berubah warna merah</p>
Untuk metode inline style ini saya rasa kurang efektif jika kita menggunakan script yang sama dalam beberapa halaman dan style. Jika kita menggunakan style yang sama berati kita harus mengatur satu persatu style setiap paragraf.
Internal Style
Dengan Internal style kita bisa memberikan style pada setiap astribut yang kita inginkan, HANYA kita dapat menggunakan pada satu halaman HTML saja .
<html>
<head>
<title>Cara Menggunakan CSS</title>
<style> p{color:blue;} </style>
</head>
<body>
<p>Paragraf kesatu nih, ingin berubah warna biru</p>
<p>Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga</p>
</body>
</html>
Eksternal Style
Metode ini adalah metode yang paling praktis dan banyak digunakan untuk membangun sebuah web. Karena dengan metode ini kita hanya membuat satu halaman CSS yang bisa di gunakan pada semua halaman HTM dengan menggunakan tag <link>.
Sebagai contoh :
- Kita buat file style.css
p{color:blue;}
- Ini script html untuk memanggil style css
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
- Script html
<html><head><title>Cara Menggunakan CSS</title><link href="style.css" rel="stylesheet" type="text/css" media="screen" /></head><body><p>Paragraf kesatu nih, ingin berubah warna biru</p><p>Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga</p></body></html>
Kelebihan menggunakan metode ini adalah memudahkan kita untuk melakukan perubahan dan tidak perlu repot mengubah style pada setiap halaman dan tag.
