Tutorial CSS Untuk Pemula - Cara Memasukkan Kode CSS Kedalam File HTML
Pada tutorial sebelumnya kita telah membahas tentang "apa itu CSS?" dan kita telah memahami cara penulisan kode CSS. Bagi anda yang belum membaca tutorialnya maka saya sarankan sebaiknya anda membaca Tutorial CSS untuk pemula - Mengenal Apa Itu CSS terlebih dahulu sebelum anda melanjutkan membaca tutorial kedua ini agar anda bisa memahami dengan mudah apa yang akan saya jelaskan nanti.
Sebenarnya pada tutorial yang kedua ini saya ingin membahas tentang macam-macam selector. Akan tetapi berdasarkan pengalaman pribadi saya, akan terasa membosankan jika suatu materi hanya dibahas tanpa ada praktek. Maka dari itu akhirnya saya memutuskan pada tutorial yang kedua ini untuk menjelaskan tentang bagaimana cara memasukkan kode CSS ke dalam file HTML karena saya ingin memberikan contoh untuk mempraktekkan apa yang telah kita bahas sebelumnya, sehingga dengan begitu kita bisa semakin memahami penggunaan kode CSS tersebut.
Sebelum kita mulai menuliskan kode CSSnya, saya ingin agar anda membuat sebuah folder di desktop anda dengan nama "belajar_css". Folder ini akan kita gunakan untuk menyimpan semua file yang akan kita buat nanti.
Tanpa berlama-lama lagi mari kita langsung ke pembahasan.
Cara Memasukkan Kode CSS ke dalam File HTML
Ada tiga cara untuk memasukkan kode CSS ke dalam file HTML. Berikut saya akan menjelaskan caranya satu persatu.
1. Inline Methode
Sesuai namanya, Inline Methode atau metode Inline adalah suatu metode penulisan kode CSS yaitu menuliskan kode CSS langsung kedalam Tag atau Element HTML yang akan kita modifikasi . Dalam penulisannya, metode inline ini sedikit berbeda dengan contoh yang telah saya sebutkan pada tutorial sebelumnya. Untuk lebih jelasnya silahkan perhatikan contoh penulisan kode CSS dengan metode Inline dibawah ini dan sekaligus saya akan berikan contoh perbandingan dengan Tag atau Element HTML yang tidak mengandung kode CSS :
<html>
<head><title>Tutorial CSS - Belajar Metode Inline</title></head>
<body>
<b>Ini adalah tulisan didalam Tag atau Element HTML body tanpa kode CSS</b>
<br>
<b style="color:white;background-color:red;font-size:30px;">Ini adalah tulisan didalam Tag atau Element HTML bold yang sudah dimodifikasi dengan kode CSS</b>
<br>
<p style="color:blue;background-color:yellow;font-size:20px;">Ini adalah tulisan didalam Tag atau Element HTML paragraf yang sudah dimodifikasi dengan kode CSS</>
</body>
</html>
Sedikit penjelasan tentang kode diatas:
Kata "style" yang ditulis setelah Tag atau Element HTML bold <b style="....">merupakan atribut Tag atau Element HTML yang berfungsi untuk memasukkan kode CSS langsung ke dalam Tag atau Element HTML tersebut, dan inilah yang dimaksud dengan metode Inline.
Untuk dapat melihat hasilnya maka silahkan anda buka teks editor yang anda miliki (buat file baru), lalu ketikan atau copy-paste kode diatas, kemudian simpan didalam folder "belajar_css" yang sudah kita buat tadi dengan nama "inline-css.html". Setelah anda simpan maka sekarang silahkan anda buka file tersebut dengan menggunakan browser anda. Disini saya menggunakan browser Mozilla Firefox dan hasilnya adalah seperti ini :
Bisa anda perhatikan tulisan "Ini adalah tulisan didalam Tag atau Element HTML tanpa kode CSS" memiliki warna dan ukuran yang standart, sedangkan tulisan "Ini adalah tulisan didalam Tag atau Element HTML yang sudah dimodifikasi dengan kode CSS" telah dimodifikasi sehingga warna tulisan, background tulisan dan ukuran tulisan berubah sesuai dengan apa yang kita perintahkan.
Akan tetapi, dalam penulisan kode CSS metode inline ini sangat tidak disarankan untuk digunakan kecuali jika memang kita ingin memodifikasi suatu Tag atau Elements HTML secara khusus.
2. Internal Methode
Internal methode atau metode Internal adalah suatu metode penulisan kode CSS langsung kedalam file HTML. Walaupun metode inline juga ditulis langsung ke dalam file HTML, namun terdapat perbedaan antara metode inline dan metode internal yang mana perbedaan tersebut terletak pada letak penulisan kode CSS pada file HTML. Jika pada metode internal kita menuliskan langsung kode CSS ke dalam Tag atau Element HTML yang ingin kita modifikasi dengan menggunakan atribut "style", maka pada metode internal kode CSS ditulis setelah Tag atau Element HTML <head> atau sebelum Tag atau Element HTML penutupnya yaitu </head> dengan menggunakan Tag atau Element HTML <style>.
Untuk lebih jelasnya perhatikan contoh penulisan kode CSS dengan metode internal dibawah ini :
<html>
<head>
<title>Tutorial CSS - Belajar Metode Internal</title>
<style>
body {
background-color : brown;
color : white;
font-size : 30px;
}
b {
background-color : green;
color: yellow;
font-size : 15px;
}
</style>
</head>
<body>
Ini adalah teks pada Tag atau Element HTML body yang sudah dimodifikasi sehingga seluruh warna tulisan pada Tag atau Element HTML body ini akan menjadi putih.
<br><br>
<b>Sedangkan ini adalah teks pada Tag atau Element HTML bold yang sudah dimodifikasi secara khusus sehingga warnanya menjadi kuning dan tidak terpengaruh dengan kode CSS untuk Tag atau Element HTML body diatas.
</b>
</body>
</html>
Silahkan anda ketik atau copy-paste kode diatas ke dalam teks editor anda (buat file baru), lalu simpan didalam folder "belajar_css" yang sudah kita buat tadi dengan nama internal-css.html, kemudian jalankan dibrowser anda. Ini adalah hasilnya :
Sesuai dengan kode CSS yang ditulis, maka background pada Tag atau Element HTML body berwarna cokelat, tulisannya berwarna putih dengan ukuran tulisan 30px dan warna tulisan yang terdapat dalam Tag atau Element HTML bold berwarna kuning dengan background hijau dan ukuran tulisan yang lebih kecil yaitu 30px.
Penulisan kode CSS dengan metode internal ini juga kurang disarankan, karena akan sangat merepotkan jika kita harus menuliskan kode CSS yang sama pada setiap file HTML yang ingin kita modifikasi, kecuali jika file HTML yang akan dimofikasi hanya berjumlah sedikit atau perintah yang kita tulis pada kode CSSnya berbeda antara file HTML yang satu dengan yang lain.
3. External Methode
Ini adalah metode yang terakhir. External methode atau metode external adalah suatu metode penulisan kode CSS dimana kode CSS dituliskan didalam suatu file yang berbeda dari file HTML yang akan dimodifikasi, dan cara memasukkan kode CSS tersebut adalah dengan memanggil atau mengimportnya ke dalam file HTML yang akan dimodifikasi dengan sebuah perintah khusus. Untuk lebih jelasnya tentang cara memanggil atau mengimport kode CSS external ke dalam file HTML silahkan anda perhatikan contoh berikut dibawah ini :
Langkah-langkah menuliskan kode CSS dengan metode External
Langkah pertama, silahkan anda buka teks editor (buat file baru), lalu ketikkan atau copy-paste kode CSS dibawah ini :
body {
background-color : purple;
font-size : 50px;
color : yellow;
}
b {
background-color : green;
font-size : 20px;
color: white;
}
p {
boder-style:1;
background-color : yellow;
color: black;
font-size : 30px;
}
Lalu simpanlah didalam folder belajar_css dengan nama "CSSku.css".
Coba anda perhatikan extensi dari file tersebut diatas. File ini bukan lagi berextensi html, akan tetapi extensinya adalah "css", dan inilah yang disebut dengan file CSS.
Lalu, setelah kita membuat file CSS, maka langkah yang kedua adalah membuat file HTML yang akan dimodifikasi. Silahkan anda kembali buka teks editor anda (buat file baru), lalu ketikkan atau copy-paste kode dibawah ini ke dalam teks editor anda tersebut :
<html>
<head>
<title>Tutorial CSS - Belajar Metode External</title>
<link rel="stylesheet" type="text/css" href="CSSku.css">
</head>
<body>
Ini adalah teks pada Tag atau Element HTML body yang sudah dimodifikasi sehingga seluruh warna tulisan pada Tag atau Element HTML ini akan menjadi kuning dan backgroundnya berwarna ungu.
<br>
<b>dan ini adalah teks pada Tag atau Element HTML bold yang sudah dimodifikasi secara khusus melalui file <b>CSSku.css</b> sehingga warna tulisannya bukan kuning, melainkan putih dan backgroundnya berwarna hijau
</b>
<br>
<p>Sedangkan ini adalah teks pada Tag atau Element HTML paragraf yang sudah dimodifikasi secara khusus melalui file <b>CSSku.css</b> sehingga warna tulisannya menjadi hitam dan warna backgroundnya menjadi kuning.
</p>
</body>
</html>
Kemudian simpan didalam folder belajar_css yang sudah kita buat tadi dengan nama external-css.html, lalu jalankan dibrowser anda. Ini hasilnya :
Tulisan didalam Tag atau Element body, bold dan paragraf berubah sesuai dengan apa yang kita perintahkan didalam file CSSku.css.
Ini ada metode penulisan kode CSS yang paling disarankan, karena bisa digunakan untuk banyak file HTML hanya dengan cara sederhana seperti diatas.
Sedikit penjelasan tentang kode diatas :
Coba perhatikan, pada kode diatas terdapat kode :
<link rel="stylesheet" type="text/css" href="CSSku.css">
Tag atau Element HTML <link> berfungsi untuk memanggil atau mengimport kode dari file eksternal seperti CSS atau Javascript. Pada Tag atau Element HTML <link> diatas terdapat atribut "href" sebagai tempat kita memasukkan alamat file yang kodenya ingin kita import. Pada contoh diatas saya mencontohkan letak file CSSku.css berada didalam satu folder dengan file HTML yang kita buat sehingga kita cukup menuliskan nama filenya saja tanpa perlu menambahkan alamat foldernya*.
Bisakah 3 metode diatas digunakan secara bersamaan dalam satu file HTML?
Tentu bisa, hanya saja kita perlu memperhatikan penggunaan selector agar fungsinya tidak kacau. Sebagai contoh, mari kita coba buat file baru. Silahkan buka teks editor anda (buat file baru) lalu ketik atau copy-paste kode dibawah ini:
body {
background-color : green;
font-size : 50px;
color : yellow;
}
kemudian simpan dengan nama style.css didalam folder belajar_css
Setelah itu, kembali buat file baru dengan teks editor anda lalu ketikkan atau copy-paste kode dibawah ini:
<html>
<head>
<title>Tutorial CSS - Belajar Metode External</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
b {
background-color : yellow;
color: blue;
font-size : 15px;
}
</style>
</head>
<body>
Ini adalah teks pada Tag atau Element HTML body yang sudah dimodifikasi dengan metode External.
<br>
<br>
<b>dan ini adalah teks pada Tag atau Element HTML bold yang sudah dimodifikasi dengan metode Internal.</b>
<br>
<br>
<p style="color:green;background-color:white;font-size:20px;">Ini adalah tulisan didalam Tag atau Element HTML paragraf yang sudah dimodifikasi metode Inline</>
</body>
</html>
Kemudian simpan dengan nama allinone-css.html didalam folder belajar_css lalu jalankan dibrowser anda. Ini adalah hasilnya :
Apa yang terjadi jika kita pada contoh "All In One" diatas kita menggunakan selector yang sama pada masing-masing metode ?
Jawabannya silahkan anda cari tau dengan bereksperimen sendiri. Saya sengaja tidak memaparkannya disini agar anda bisa berkreasi dan berusaha "mengotak-atik" ilmu yang anda dapatkan, karena dengan begitu anda akan terlatih untuk bereksperimen dan mengembangkan suatu program.
Nah, itulah cara-cara memasukkan kode CSS ke dalam file HTML.
Bagaimana penjelasan diatas? sangat mudah untuk dipahami dan dipraktekkan bukan?
Apakah anda juga mendapatkan hasil yang sama dengan contoh diatas? Jika belum maka coba baca lagi tutorial diatas dengan teliti, karena jika anda memang mengikuti tutorialnya dengan baik dan benar maka in sya aLLAH anda akan mendapatkan hasil yang sama persis dengan contoh diatas. Dan jika anda telah berhasil maka Alhamdulillah dan selamat. Semoga anda benar-benar mengerti dan memahaminya dengan baik, karena setelah ini kita akan masuk lebih dalam lagi ke dunia CSS.
Cukup sampai disini dulu tutorial kali ini, in sya aLLAH kita akan melanjutkan tutorial CSS berikutnya tentang Macam-Macam Selector Dalam CSS, silahkan langsung klik link tersebut untuk membaca tutorialnya.
Semoga bermanfaat.
* tentang penulisan letak file css in sya aLLAH dibahas pada kesempatan lain