Skip to main content

B.2. Metode Penulisan CSS

Setelah sepintas kita berkenalan dengan menggunakan CSS pada chapter sebelumnya, kali ini kita akan mempelajari tentang metode penulisan pada CSS. Terdapat 3 metode penulisan pada CSS, yaitu Inline CSS, Internal CSS dan Eksternal CSS. Apa itu? mari kita bahas satu per-satu.

B.2.1. Inline CSS​

Seperti namanya, metode ini menuliskan CSS secara langsung pada tag HTML dengan menggunakan attribut style. Sebagai contoh kita ingin mengubah sebuah tulisan menjadi berwarna hijau, maka kita bisa menuliskan kode seperti: 

<h1 style="color: green;">Hello World!</h1>

kita bisa menambahkan kode CSS lainnya, seperti pengaturan ukuran font, jarak huruf dan lain-lain. 

<h1 style="color: green; font-size: 42px; letter-spacing: 12px;">
  Hello World!
</h1>

Ketika temen-temen buka di web browser maka hasilnya:

Output

Menurut penulis, menuliskan kode dengan Inline CSS ini sangat cocok ketika temen-temen memiliki satu komponen yang memiliki style unik atau tunggal di halaman web temen-temen.

B.2.2. Internal CSS​

Nah yang kedua ada Internal CSS, seperti namanya Inline CSS ini menuliskan kode CSS secara langsung di file HTML dengan menggunakan tag <style> yang di letakan di dalam tag <head>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B.2.2. Internal CSS</title>

    <style>
      h1 {
        color: green;
        font-size: 42px;
        letter-spacing: 12px;
      }
    </style>
  </head>

  <body>
    <h1>Hello World!</h1>
  </body>
</html>

kode diatas masih sama dengan kode sebelumnya, hanya saja kode di atas ditulis dengan menggunakan metode Internal CSS. Ketika temen-temen buka di web browser maka hasilnya akan tetap sama.

Output

Metode ini cocok sekali ketika ada satu halaman yang memiliki style unik dan tidak di aplikasikan kedalam file lain. Namun perlu di perhatikan ya temen-temen, ketika kode HTML dan style yang di terapkan semakin banyak maka akan semakin sulit juga untuk melakukan pemeliharaan pada website temen-temen nantinya.

B.2.3. Eksternal CSS​

Metode yang terakhir adalah Eksternal CSS, seperti namanya metode ini digunakan untuk menuliskan kode CSS secara terpisah pada satu file CSS yang nantinya bisa dihubungkan dengan halaman HTML yang dibuat. Untuk menghubungkannya, kita bisa menggunakan tag <link> yang diletakkan di dalam tag <head>.

Nah, sekarang kita coba buat file dengan nama style.css dan kita hubungkan dengan menggunakan tag <link>.

Output

Setelahnya temen-temen bisa tulis ulang kode di bawah ini ya:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>B.2.3. Eksternal CSS</title>

      <!-- Connect into CSS file -->
      <link rel="stylesheet" href="style.css" />
    </head>

    <body>
      <h1>Hello World!</h1>
    </body>
  </html>

Hasilnya pun masih akan tetap sama:

Output

Menurut penulis, metode ini paling cocok dan sangat di anjurkan menggunakan metode ini ketika menuliskan kode CSS. kenapa? karena kode menjadi lebih rapih dan terstruktur, mudah di maintenance. Jadi, kedepannya kita akan pakai metode ini ya🙌.

Selanjutnya kita akan coba belajar mengenai satu hal yang sangat penting di CSS yaitu Selector. Tampa kita sadari, kita sudah menggunakan salah satu selector yaitu type selector. Apa itu selector?

Yuk kita langsung bahas!

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.2-metode-penulisan-css