Eksternal CSS
Untuk menghubungkan CSS (Cascading Style Sheets) dengan HTML (HyperText Markup Language), Anda dapat mengikuti langkah-langkah berikut:
Langkah 1: Buat File CSS
Buat file terpisah dengan ekstensi .css yang akan berisi kode CSS Anda. Misalnya, beri nama file ini sebagai "style.css". Anda dapat membuat file ini dengan menggunakan teks editor sederhana seperti Notepad atau editor kode yang lebih canggih seperti Sublime Text atau Visual Studio Code.
Langkah 2: Tulis Kode CSS
Buka file "style.css" yang telah Anda buat dan tulis kode CSS Anda di dalamnya. Misalnya:
Langkah 3: Buat File HTML
Buat file HTML yang akan menggunakan gaya dari file CSS yang telah Anda buat. Misalnya, beri nama file ini sebagai "index.html" dan buka file ini dengan teks editor atau editor kode.
Langkah 4: Sambungkan File CSS dengan HTML
Tambahkan tag <link> dalam bagian <head> dari file HTML Anda untuk menghubungkan file CSS dengan file HTML. Gunakan atribut "href" untuk menentukan lokasi file CSS yang telah Anda buat, dan gunakan atribut "rel" untuk menandai tipe file sebagai "stylesheet". Berikut adalah contoh penggunaan tag <link>:
Pastikan bahwa atribut "href" pada tag <link> mengarah ke lokasi file CSS Anda yang benar. Dalam contoh di atas, file CSS ("style.css") harus berada dalam direktori yang sama dengan file HTML ("index.html") untuk dapat diakses dengan benar.
Dengan demikian, CSS Anda akan dihubungkan dengan HTML Anda, dan gaya yang ditentukan dalam file CSS akan diterapkan pada elemen HTML di dalam file HTML Anda.
Internal CSS
Internal CSS digunakan untuk menentukan gaya dalam dokumen HTML yang sama, di dalam bagian <style> di dalam tag <head> dari dokumen HTML Anda. Berikut adalah langkah-langkah untuk menggunakan internal CSS:
Langkah 1: Buat File HTML
Buat file HTML yang akan menggunakan gaya internal CSS. Misalnya, beri nama file ini sebagai "index.html" dan buka file ini dengan teks editor atau editor kode.
Langkah 2: Tambahkan Tag <style>
Di dalam tag <head> pada file HTML Anda, tambahkan tag <style> untuk menulis kode CSS internal. Misalnya:
Langkah 3: Tulis Kode CSS
Tuliskan kode CSS Anda di dalam tag <style>. Anda dapat menuliskan gaya yang sama seperti yang Anda tulis dalam file CSS terpisah. Dalam contoh di atas, kami menggunakan kode CSS yang sama seperti contoh sebelumnya.
Dalam kode di atas, kode CSS ditulis di dalam tag <style> di dalam bagian <head> dari file HTML. Gayanya akan diterapkan pada elemen HTML di dalam file HTML tersebut. Anda dapat menambahkan, mengedit, atau menghapus gaya CSS di dalam tag <style> sesuai kebutuhan Anda.
Dengan demikian, Anda telah menggunakan internal CSS dalam dokumen HTML Anda. Gaya CSS yang Anda tentukan di dalam tag <style> akan diterapkan pada elemen HTML yang sesuai dalam file HTML Anda.
Inline CSS
Inline CSS digunakan untuk menentukan gaya dalam suatu elemen HTML secara langsung melalui atribut "style" dalam tag HTML tersebut. Berikut adalah langkah-langkah untuk menggunakan inline CSS:
Langkah 1: Buat File HTML
Buat file HTML yang akan menggunakan inline CSS. Misalnya, beri nama file ini sebagai "index.html" dan buka file ini dengan teks editor atau editor kode.
Langkah 2: Tambahkan Atribut "style" dalam Tag HTML
Di dalam tag HTML yang ingin Anda beri gaya, tambahkan atribut "style" dan tulis kode CSS Anda sebagai nilai atribut tersebut. Misalnya:
Dalam contoh di atas, kita menambahkan atribut "style" pada tag <h1> dan <p> untuk menentukan gaya secara langsung. Nilai atribut "style" berisi kode CSS yang diterapkan pada elemen HTML tersebut.
Langkah 3: Tulis Kode CSS dalam Atribut "style"
Tuliskan kode CSS dalam nilai atribut "style". Anda dapat menuliskan gaya yang sama seperti yang Anda tulis dalam file CSS atau inline CSS di elemen HTML lainnya. Dalam contoh di atas, kami menggunakan gaya yang sama seperti contoh sebelumnya, namun kita menuliskannya langsung dalam atribut "style" pada tag HTML.
Anda dapat menambahkan, mengedit, atau menghapus gaya CSS dalam atribut "style" sesuai kebutuhan Anda.
Dengan demikian, Anda telah menggunakan inline CSS dalam dokumen HTML Anda. Gaya CSS yang Anda tentukan dalam atribut "style" akan diterapkan secara langsung pada elemen HTML yang bersangkutan. Namun, perlu diingat bahwa penggunaan inline CSS kurang disarankan karena dapat membuat kode HTML Anda menjadi sulit dikelola jika Anda memiliki banyak elemen yang memerlukan gaya. Sebaiknya, gunakan CSS eksternal atau internal jika memungkinkan.
