CSS (Cascading Style Sheets) adalah bahasa markup yang digunakan untuk mengatur tampilan visual (front-end) website yang ditulis dengan HTML atau XHTML. Bahasa ini dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996. Dengan CSS, kamu dapat mengatur layout (tata letak), warna, font, garis, background, dan lain-lain, sehingga terlihat lebih menarik.

Pada artikel ini akan dibahas cara menggunakan CSS di HTML. Berdasarkan cara penulisannya, ada 3 cara menggunakan CSS di HTML, yaitu:

  • Inline CSS
Inline CSS adalah cara penulisan CSS langsung pada elemen HTML yang ingin diberikan style CSS.  Kode CSS ditulis di dalam elemen HTML menggunakan atribut style. Properti yang digunakan pada atribut style bisa lebih dari satu yang dipisah dengan titik koma. Cara ini sebaiknya digunakan jika ingin mengatur tampilan suatu elemen satu kali saja.

Contoh:

Contoh lengkap:
  • Internal CSS
    • Internal CSS dikenal juga dengan sebutan embeded CSS. Internal CSS adalah cara penulisan CSS dengan menggunakan elemen <style> untuk menyisipkan kode CSS. Elemen <style> tersebut bisa diletakkan di dalam elemen <head> atau <body> pada dokumen HTML. Kebanyakan orang biasanya menuliskannya di dalam elemen <head>.

    Contoh penulisan internal CSS dalam tag head:

    Contoh penulisan internal CSS dalam tag body:

    Catatan:
    Kode CSS didalam tag <head> akan dibaca lebih dulu dari kode CSS didalam tag <body>. Jadi, jika ada 2 kode CSS di tag <head> dan tag <body> yang mengatur tampilan elemen yang sama, maka yang akan dipakai adalah kode CSS di tag <body> karena terakhir dibaca.

    Misalkan, kamu punya style untuk elemen <h1> di tag head seperti ini:

    Dan kamu juga punya style untuk elemen <h1> juga di tag body seperti ini:

    Maka yang akan dipakai adalah yang terakhir, yaitu color blue.
    • External CSS
    External CSS adalah cara penulisan kode CSS yang ditulis terpisah dengan kode HTML. Kode CSS ditulis di dalam file dengan ekstensi .css yang disambungkan dengan file HTML menggunakan elemen <link>. Dengan cara ini, file CSS bisa digunakan di lebih dari satu file HTML dan satu file HTML bisa menggunakan lebih dari satu file CSS.

    Kelemahan dari cara ini adalah jika ada beberapa file CSS yang cukup besar, browser perlu mendownload semua file itu terlebih dahulu. Jadi untuk sesaat di awal mungkin tampilan website akan terlihat aneh sampai semua file CSS-nya selesai dibaca oleh browser.

    Contoh:

    Langkah pertama, buat sebuah file dengan ekstensi .css yang berisi kode CSS. Pada contoh ini file tersebut diberi nama style.css.

    Berikut isi kodenya:

    Langkah kedua, buat sebuah file dengan ekstensi .html yang berisi kode HTML dan menghubungkannya dengan file kode CSS. Ada 2 cara untuk menghubungkannya.

    Cara 1: menggunakan tag <link>

    Contoh lengkap:

    Cara 2: menggunakan @import

    Contoh lengkap:

    Selesai.

    Sumber gambar:  https://bit.ly/3pmm5i4