Sebelumnya kita sudah bahas cara penulisan CSS. Sekarang, kita akan bahas bagaimana cara memasukkan CSS ke HTML. Check it out untuk melihat panduan AneIqbal selengkapnya.
Cara memasukkan CSS ke HTML dengan mudah
Ada 3 cara untuk memasukkan kode CSS ke dalam file HTML:
..cara inline style,
..cara internal style sheet dan,
..cara eksternal style sheet.
Kita bahas satu per satu.
Cara inline style
Cara yang pertama yaitu inline style. Cara ini langsung menempelkan kode CSS ke tag HTMLnya dengan menggunakan atribut style.
Jadi, kode CSSnya tergabung menjadi elemen HTML.
..langsung ke contoh kodenya.
<!DOCTYPE html>
<html>
<head>
<title>Memasukkan kode CSS dengan cara inline style</title>
</head>
<body>
<h1 style="color:red;background:black">Ini adalah elemen heading (h1) yang diubah warna huruf dan latar belakangnya oleh kode CSS dengan cara inline style</h1>
</body>
</html>
Simpan filenya yang berisi kode di atas dengan nama inline-style.html. Lalu jalankan dengan web browser.
Jeng.. jeng.. berubah kan? Warna hurufnya menjadi merah dan latar belakangnya menjadi hitam.
..sesuai dengan kode CSS yang kita tempel di tag h1 di atas.
Cara internal style sheet
Cara yang kedua yaitu dengan internal style sheet. Cara ini sudah memisahkan kode CSS yang ditempel di tag HTML (cara inline style).
Kode CSS diletakkan di dalam tag <style>.. tag <style> ini posisinya ada di dalam tag <head>.
Jadi, kode CSS dengan elemen HTML sudah terpisah namun kode CSS masih di dalam file HTML.
..belum benar-benar memisahkan antara konten dan tampilan. Ingat, HTML is for content. CSS is for presentation.
Kita ambil contoh kode yang sama dengan kode CSS inline style tapi ada beberapa yang harus diubah.
<!DOCTYPE html>
<html>
<head>
<title>Memasukkan kode CSS dengan cara internal style sheet</title>
<style>
h1 {
color:red;
background:black;
}
</style>
</head>
<body>
<h1>Ini adalah elemen heading (h1) yang diubah warna huruf dan latar belakangnya oleh kode CSS dengan cara inline style</h1>
</body>
</html>
Simpan dengan nama file internal-style-sheet.html. Lalu jalankan dengan web browser. Hasilnya pun akan sama dengan cara inline style.
Eksternal style sheet
Cara yang terakhir yakni eksternal style sheet. Dengan cara ini, kode CSS dan kode HTML benar-benar terpisah.
..karena, kode CSS dibuat file tersendiri dan dengan ekstensi file tersendiri, yakni .css.
Kode CSS yang sudah dibuat tersendiri, akan dipanggil oleh file HTML sesuai dengan nama filenya. Ada 2 cara pemanggilan file CSS oleh file HTML:
..dengan tag <link>.. dan
..dengan tag <style> plus @import CSS.
Posisi kode keduanya, ada di dalam tag <head>.
Jadi, kode akan lebih rapi dan terorganisir. Cara inilah yang sesuai dengan konsep HTML is for content, CSS is for presentation.
Seperti ini contoh kode dengan tag <link>.
<!DOCTYPE html>
<html>
<head>
<title>Memasukkan kode CSS dengan cara eksternal style sheet</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Ini adalah elemen heading (h1) yang diubah warna huruf dan latar belakangnya oleh kode CSS dengan cara inline style</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Memasukkan kode CSS dengan cara inline style</title>
<style>
@import url(style.css);
</style>
</head>
<body>
<h1>Ini adalah elemen heading (h1) yang diubah warna huruf dan latar belakangnya oleh kode CSS dengan cara inline style</h1>
</body>
</html>
Simpan dengan nama file eksternal-style-sheet.html.
Dan ini kode CSS yang disimpan dengan nama style.css.
h1 {
color:red;
background:black;
}
Lalu jalankan dengan web browser. Hasilnya pun akan sama.
Cara mana yang direkomendasikan?
Kita sudah coba ketiga cara di atas untuk menghasilkan tampilan yang sama.Lalu manakah yang direkomendasikan banget?
Jawabannya adalah..
..eksternal style sheet.
Kenapa? banyak alasannya.
..yang pertama, kode jadi lebih rapi. Terpisah antara kode HTML dan kode CSS.
..yang kedua, jika ada perubahan tampilan salah satu elemen HTML yang jumlahnya banyak, maka kita cukup dengan mengubah 1 selector saja di kode CSS.
..yang ketiga, memudahkan orang lain yang ikut mengerjakan pembuatan web dengan kita karena file dan kodingan terstruktur rapi.
Sampai sini selesai pembahasan kita kali ini tentang memasukkan kode CSS ke dalam file HTML.
Next, kita akan membahas macam-macam selector CSS..
