Hal yang perlu kita ketahui saat belajar CSS adalah bagaimana cara menyisipkan CSS ke dalam HTML. ada 3 metode yaitu: Inline CSS, Internal CSS, External CSS. Dan tentunya dari ketiga metode tersebut, memiliki kelebihan dan kekurangan masing-masing. Pada artikel ini kita akan mempelejari pengertian dari setiap metode, contoh penggunaanya, dan kapan kita perlu menggunakan metode tersebut.

3 Metode Menambahkan CSS

Inline CSS

Inline CSS adalah metode yang dimana kita menambahkan styling CSS secara langsung ke dalam elemen HTML. Dengan menambakan attribute style pada elemen, maka kita bisa langsung menerapkan css didalmnya. Berikut contohnya.

<p style="color: red; font-size: 12px;">This is paragraph with inline style</p>

Pada contoh diatas, teks akan tampil berwarna merah dengan ukuran sebesar 12 piksel. Metode ini bisa kita gunakan untuk:

Styling lebih cepat
Hanya sekedar untuk testing sementara
Elemen tunggal yang membutuhkan styling khusus Namun, Inline CSS memiliki banyak keterbatasan. Karena style yang di aplikasikan hanya untuk satu elemen, penggunaan secara berlebihan bisa membuat kode HTML menjadi kurang rapih dan sulit untuk dikelola.

Internal CSS

Internal CSS digunakan dengan menuliskan kode CSS di dalam tag <style> yang ada diletakkan di bagian dalam tag <head> dokumen HTML. Berikut contohnya.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: black;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: blue;
    }
		
		p {
		  color: red;
		}
  </style>
</head>
<body>
  <h1>Welcome to NganggurDev</h1>
  <p>Example using internal CSS</p>
</body>
</html>

Jika kita menulis kode ini ke text editor dan kita jalankan, maka hasilnya adalah:

background halaman akan berwarna menjadi hitam.
font untuk seluruh teks menggunakan Arial.
<h1> akan berwarna biru.
<p> akan berwarna merah.

Dengan menggunakan metode Internal CSS, kita bisa mengatur banyak elemen sekaligus dari satu tempat atau halaman, tanpa melakukan styling ke dalam struktur HTML seperti Inline CSS. Namun, jika digunakan untuk proyek besar dengan banyak halaman, Internal CSS sangat tidak efisien karena tidak bisa digunakan ulang antar halaman.

External CSS

External CSS adalah metode yang paling direkomendasikan dalam pengembangan website modern. CSS ditulis di file terpisah dengan menggunakan ekstensi .css dan dihubungkan ke HTML menggunakan tag <link> di dalam <head>. Buat file bernama styles.css dalam satu folder dengan index.html, setelah itu aplikasikan kode berikut ke dalam file styles.css.

/* styles.css */
body {
	background-color: black;
	font-family: Arial, sans-serif;
}

h1 {
	color: blue;
}

p {
	color: red;
}

Dan implementasikan kode berikut ke dalam file index.html.

<html>
 <head>
	 <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <h1>Welcome to NganggurDev</h1>
   <p>Example using internal CSS</p>
 </body>
</html>

Maka hasil dari kode diatas jika kita jalankan di browser, akan sama hasilnya dengan kita menggunakan metode Internal CSS. Yang membedakan adalah:

Kode terlihat rapih dan terorganisir.
Mudah dikelola.
Bisa digunakan ulang di banyak halaman.
Mendukung performa karena file CSS dapat dicache oleh browser. Karena itu, penggunaan metode External CSS menjadi standar industri untuk pengembangan website berskala besar maupun menengah.

Kesimpulan

Dengan memahami penggunaan metode inline, internal, dan external pada CSS, akan memantu kita menulis kode yang lebih efisien dan profesional.

Terimakasih, sampai jumpa di artikel selanjutnya.