Langsung ke konten utama

3.2 Belajar CSS [ Cara Menulis CSS ]



Ada tiga cara menulis CSS di HTML :

  1. Internal CSS : ditulis dalam tag <style>
  2. inline CSS : ditulis di atribut elemen HTML
  3. External CSS : ditulis di file terpisah dengan HTML

1. Internal CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Internal CSS juga dikenal dengan sebutan Embeded CSS. 

Tag <style> dapat ditulis di dalam tag <head>, bisa juga ditulis di tag <body>. Namun kebanyakan ditulis di dalam tag <head>.

Contoh :


Hasilnya...


Penulisan css di dalam tag <head> akan lebih dahulu dibaca dibandingkan di <body>. Karena lebih dahulu dibaca, style yang akan dipakai adalah yang terakhir.

Misal, terdapat style seperti ini :

p { color: red }

lalu, di body dibuat lagi seperti ini :

p { color: blue }

Maka yang akan dipakai adalah yang terakhir, yakni yang { color: blue }.

Karena itu, biar konsisten dan tidak bentrok. sebaiknya tulis CSS hanya dalam satu tempat saja. Misal di <head> saja.

2. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis di dalam file khusus yang berekstensi .css

sumber : Petani Kode

Contoh :


Untuk menggunakan CSS ini, kita harus menghubungkannya dengan HTML. Ada dua cara yang bisa dilakukan:

  1. Menggunakan tag <link>
  2. Menggunakan @import
Contoh :

Cara 1 : Menggunakan tag <link>


Cara 2 : Menggunakan @import


Contoh penerapan dari Cara 1 :


Hasilnya...


CSS eksternal biasanya digunakan saat kita ingin menggunakan kembali style yang sudah dibuat.

Misalnya ada lima halaman HTML, dan semua halaman ini membutuhkan CSS yang sama. Maka sebaiknya kita menggunakan eksternal CSS agar tidak menulis ulang kode CSS di setiap file HTML.

3. Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut <style> di elemen HTML. Kode CSS ditulis langsung tanpa menggunakan kurung kurawal {...} . Kemudian properti tetap dipisah dengan titik koma.
Contoh : 

Hasilnya...


Inline CSS biasanya digunakan untuk memberikan style pada satu elemen saja. CSS pada inline akan lebih diprioritaskan dibandingkan dengan internal dan eksternal. 
Akan tetapi, Inline CSS jarang digunakan pada proyek-proyek besar, karena cukup menyulitkan mengelola kode jika sudah terlalu banyak menggunakan inline.

~Terima Kasih~

Komentar

Posting Komentar