6 Dec 2023

Cara Menggunakan CSS

Terdapat beberapa cara untuk mengaplikasikan CSS ke dalam halaman web, dan mari kita jelaskan perbedaan antara inline CSS, internal (embedded) CSS, dan eksternal CSS.

Inline CSS

Inline CSS diterapkan langsung ke dalam elemen HTML menggunakan atribut style. Ini adalah cara paling langsung untuk memberikan gaya pada suatu elemen, namun tidak disarankan untuk penggunaan yang kompleks.

Contoh penggunaan inline CSS:

<p style="color: blue; font-size: 16px">
  Ini adalah teks dengan gaya inline CSS.
</p>

Internal CSS

Internal CSS ditempatkan di dalam tag <style> di bagian <head> dari dokumen HTML. Ini memisahkan gaya dari struktur HTML, membuatnya lebih terorganisir daripada inline CSS.

Contoh penggunaan internal CSS:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>blog.adydetra.my.id</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 20px;
        padding: 0;
        background-color: #f8f8f8;
      }

      h2 {
        color: #333;
      }
    </style>
  </head>
  <body>
    <h2>Contoh Penggunaan Internal CSS</h2>
    <p>Ini adalah paragraf dengan gaya yang ditentukan di dalam tag style.</p>
  </body>
</html>

Eksternal CSS

Eksternal CSS memisahkan seluruh gaya ke dalam file terpisah dengan ekstensi .css. File ini kemudian direferensikan di dalam tag <link> di bagian <head> HTML. Ini adalah cara yang sangat umum digunakan dalam pengembangan web.

Oke berikut gambaran struktur folder nya:

/belajar
  ├── /css
  |   └── style.css
  ├── index.html

Contoh file eksternal CSS (style.css):

style.css

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 20px;
  padding: 0;
  background-color: #f8f8f8;
}

h2 {
  color: #333;
}

Contoh penggunaan eksternal CSS:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cara Menggunakan CSS</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h2>Contoh Penggunaan Eksternal CSS</h2>
    <p>Ini adalah paragraf dengan gaya yang diambil dari file eksternal CSS.</p>
  </body>
</html>

Dengan memahami perbedaan dan penggunaan dari ketiga cara tersebut, Anda dapat memilih metode yang paling sesuai dengan kebutuhan dan skala proyek Anda.

Namun secara pribadi untuk penggunaaan css native (tanpa framework), Saya lebih menyukai penggunaan dengan tipe Eksternal dalam skala proyek apapun.