Belajar CSS – Part 2 : Cara Menggunakan CSS (Inline, Internal, dan External)

Setelah memahami pengertian dan fungsi CSS, langkah berikutnya adalah mengetahui bagaimana cara menggunakannya dalam pengembangan web.

CSS (Cascading Style Sheets) memiliki tiga metode utama untuk diterapkan dalam dokumen HTML yaitu: Inline CSS, Internal CSS, dan External CSS.

Setiap metode memiliki karakteristik, kelebihan, dan kekurangan masing-masing.

1. Inline CSS

Inline CSS adalah metode di mana css langsung diterapkan ke dalam elemen HTML menggunakan atribut style.

Cara ini sering digunakan untuk perubahan cepat atau pengujian kecil.

Jika kamu sedang mengedit sebuah halaman web dan ingin mengubah warna teks pada satu paragraf saja tanpa mengutak-atik CSS pada elemen lain atau pada file CSS utama. Inline CSS adalah pilihan yang praktis.

Contoh Penggunaan Inline CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline CSS</title>
</head>
<body>
    <h1 style="color: blue; font-size: 24px; text-align: center;">Ini adalah teks dengan Inline CSS</h1>
</body>
</html>

Kelebihan Inline CSS:

Mudah dan cepat diterapkan.
Tidak memerlukan file tambahan.

Kekurangan Inline CSS:

Tidak efisien untuk proyek besar.
Sulit dikelola karena bercampur dengan HTML.

2. Internal CSS

Internal CSS digunakan dengan menuliskan kode CSS dalam tag <style> yang ditempatkan di dalam bagian <head>dokumen HTML.

Metode ini cocok untuk halaman yang memiliki gaya unik tanpa memerlukan file eksternal.

Misal kamu membuat halaman promosi yang hanya akan digunakan satu kali dan ingin mengatur tampilannya tanpa perlu membuat file CSS terpisah.
Internal CSS bisa jadi solusi.

Contoh Penggunaan Internal CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Internal CSS</title>
    <style>
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Ini adalah teks dengan Internal CSS</h1>
</body>
</html>

Kelebihan Internal CSS:

Tidak perlu file tambahan.
Dapat digunakan untuk satu halaman khusus.

Kekurangan Internal CSS:

Tidak efisien untuk banyak halaman.
Dapat memperlambat pemuatan halaman karena kode CSS dimuat berulang kali.

3. External CSS

Saat kamu mengembangkan situs web dengan banyak halaman dan ingin menjaga tampilan tetap konsisten di seluruh halaman, menggunakan External CSS akan sangat membantu.

External CSS adalah metode yang paling disarankan dalam pengembangan web.

CSS ditulis dalam file terpisah (.css) dan dipanggil dalam dokumen HTML menggunakan tag <link>.

Contoh Penggunaan External CSS:

1. Buat File CSS (`style.css`)

body {
    background-color: white;
    font-family: Verdana, sans-serif;
}
h1 {
    color: green;
    text-align: center;
}

2. Panggil File CSS di HTML

<!DOCTYPE html>
<html>
<head>
    <title>Contoh External CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Ini adalah teks dengan External CSS</h1>
</body>
</html>

CSS dengan HTML dibuat pada file terpisah. Perhatikan gambar berikut ini

Pada contoh diatas, file “latihan_ext_css.html” adalah file html yang akan diberi style dengan CSS.
sedangkan file “style.css“, berisi style CSS-nya.

Kedua file tersebut disimpan dalam folder yang sama.
Walaupun lebih baik kamu menyimpan file CSS dalam folder tertentu, sehingga antara style dengan file HTML tidak bercampur.

Misalnya untuk file CSS-nya kita simpan pada folder bernama “css“, maka saat pemanggilan di file HTML-nya pun harus disesuaikan, menjadi :

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

Kelebihan External CSS:

Memudahkan pemeliharaan kode.
Dapat digunakan untuk banyak halaman web.
Mempercepat loading halaman karena file CSS dapat di-cache oleh browser.

Kekurangan External CSS:

Membutuhkan file tambahan (.css).
Tidak akan berfungsi jika file CSS tidak ditemukan atau gagal dimuat.

Kesimpulan

Metode CSS	Kelebihan	Kekurangan
Inline CSS	Cepat diterapkan, cocok untuk perubahan kecil	Sulit dikelola, kode berantakan
Internal CSS	Tidak memerlukan file tambahan, cocok untuk satu halaman	Tidak efisien jika banyak halaman, memperlambat loading
External CSS	Lebih terstruktur, digunakan di banyak halaman, mempercepat loading	Membutuhkan file tambahan, bisa tidak berfungsi jika file tidak terhubung

Jika kamu hanya ingin mengubah satu elemen kecil dengan cepat, gunakan Inline CSS.
Jika kamu ingin menerapkan gaya pada satu halaman tanpa file tambahan, gunakan Internal CSS.
Namun, jika kamu ingin membuat website yang terstruktur dan profesional, External CSS adalah pilihan terbaik.

Jadi, sudah siap menerapkan CSS di proyek kamu? Selamat mencoba.

Press ESC to close