HTML Dasar: Menambahkan CSS

Pada pertemuan-pertemuan sebelumnya kita telah membahas berbagai macam tag pada HTML, baik yang berhubungan dengan teks, paragraf, gambar, link, list hingga tabel.

Akan tetapi kebanyakan dari elemen atau tag-tag tersebut ditampilkan apa adanya secara default, tanpa adanya sentuhan dari CSS.

Nah, pada pertemuan kali ini kita akan membahas secara singkat tentang cara menambahkan CSS pada dokumen HTML.

Apa itu CSS?

CSS merupakan singkatan dari Cascading Style Sheet, yaitu sebuah susunan kode yang kita gunakan untuk mengatur bagaimana dokumen HTML akan ditampilkan. Yang dimaksud mengatur di sini adalah: mengganti warna, tata letak, border, bayangan, posisi, background, dan lain sebagainya.

Faktanya, semua halaman web pada era ini hampir pasti menggunakan CSS. Sehingga semua situs yang kita jelajahi di internet (termasuk jago ngoding sendiri) adalah contoh penggunaan CSS.

Memasukkan CSS pada HTML

Untuk memasukkan CSS kepada HTML terdapat 3 cara:

Menggunakan CSS inline.
Menggunakan CSS internal.
dan Menggunakan CSS eksternal.

Kalau mau ditambahkan lagi: kita juga bisa mengatur CSS suatu element HTML dengan javascript, umumnya cara ini hanya digunakan pada komponen-komponen yang kompleks misalnya seperti komponen grafik.

1. Menggunakan CSS Inline

Cara pertama dan paling singkat adalah menggunakan CSS Inline.

CSS inline adalah sebuah kode CSS yang kita sematkan pada element apa pun di dalam body HTML, langsung menggunakan atribut style.

Misalkan kita punya dua button yang awalnya seperti ini:

<button>Masuk</button>
<button>Daftar</button>

Kita bisa mengubah gaya dari dua tombol di atas dengan menambahkan atribut style secara langsung seperti ini:

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

Nah, cara di atas dinamakan CSS inline, karena kita langsung menyisipkan CSS pada baris itu juga.

2. Menggunakan CSS Internal

Cara yang kedua adalah menggunakan CSS internal. CSS internal adalah CSS yang diletakkan pada bagian <head> suatu halaman HTML.

Misalkan kita memiliki dua buah link seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Dengan hasil keluaran:

Kita bisa tambahkan tag <style> di bagian <head> seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>

  <style>
    a {
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      background-color: #8d68e8;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Sehingga hasil keluaran dua tombol di atas menjadi lebih berwarna dan enak dilihat:

Insyaallah kedepannya kita akan membahas CSS lebih detil dalam seri tutorial tersendiri.

3. Menggunakan CSS Eksternal

Dan cara ketiga untuk menambahkan CSS kedalam sebuah halaman HTML adalah menggunakan CSS Eksternal.

Yang dimaksud eksternal adalah kita membuat file tersendiri yang berekstensi .css. Kemudian file tersebut kita hubungkan ke dalam halaman HTML menggunakan tag <link>.

Misalkan kita memiliki struktur direktori seperti berikut:

├── index.html
└── style
    └── app.css

Jadi kita memiliki dua buah file:

Yang pertama index.html
dan yang kedua adalah style/app.css

Kita bisa menambahkan tag <link> pada bagian <head> yang mengarah kepada file style/app.css seperti berikut:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Eksternal</title>

  <link rel="stylesheet" href="./style/app.css">
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Sedangkan isi dari file style/app.css adalah sebagai berikut:

a {
  padding: 8px 16px;
  border-radius: 4px;
  color: white;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

a:first-of-type {
  background-color: #1fc296;
}

a:last-of-type {
  background-color: #d45a5a;
}

Catatan: Pada penggunaan CSS eksternal kita tidak perlu menggunakan tag <style>.

Hasil keluaran dari kode di atas adalah:

Catatan: tanda ./ pada ./style/app.css (href tag <link>) menandakan direktori yang sama dengan file index.html. Misalkan file css berada pada “parent” directory, maka kita menggunakan dua buah titik (../) sebagai pengganti.

Misal kita memiliki struktur file seperti ini:

├── blog
│   ├── linux
│   │   └── tutorial-ubuntu.html
│   └── tutorial-python.html
├── index.html
└── style
    └── app.css

Kita memiliki 3 buah file html dan satu buah file css. Maka link yang mengarah ke file css tersebut akan berbeda-beda (relatif terhadap lokasi file yang memanggilnya).

Link pada file index.html akan terlihat seperti kode di bawah:

<link rel="stylesheet" href="./app/style.css">

Sedangkan link pada file blog/tutorial-python.html seperti ini:

<link rel="stylesheet" href="../app/style.css">

Dan yang terakhir, link pada file blog/linux/tutorial-ubuntu.html akan terlihat seperti berikut:

<link rel="stylesheet" href="../../app/style.css">

Link url seperti di atas dinamakan relative uri.

Kapan Menggunakan CSS inline, internal, dan eksternal?

Secara ideal di dalam real project, kita harus selalu menggunakan CSS eksternal.

Kenapa?

Agar susunan file di dalam project kita menjadi lebih rapi. Dan juga: agar kita bisa menggunakan satu file CSS yang sama untuk lebih dari satu halaman HTML.

Akan tetapi, ada kalanya kita lebih memilih penggunaan CSS internal mau pun inline. Seperti misalnya ketika kita hanya butuh sedikit CSS pada element tertentu saja, atau hanya pada halaman tertentu saja, maka kita bisa menggunakan CSS internal mau pun CSS inline.

Kesimpulan

HTML adalah kode markup yang digunakan untuk mendefinisikan struktur halaman web. Sedangkan CSS, ia merupakan pelengkap bagi HTML di mana tugasnya adalah memberikan “gaya” atau style kepada halaman HTML agar terlihat lebih bagus dan ramah pengguna.

Untuk menambahkan CSS pada suatu halaman HTML, kita bisa menggunakan 3 buah cara yaitu; inline, internal, dan eksternal.

CSS inline artinya kita menyisipkan CSS secara langsung pada suatu elemen HTML menggunakan atribut style.

Sedangkan CSS internal artinya kita menyisipkan CSS pada bagian <head> menggunakan tag <style>.

Dan yang terakhir CSS eksternal adalah kita membuat satu file khusus dengan ekstensi .css, kemudian memasukkannya ke dalam dokumen HTML menggunakan tag <link>.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang id dan class pada dokumen HTML.

Stay tune!