Penulisan CSS di HTML

12 Agustus 2023 M. Hernawan

Ketika berbicara tentang cara membuat CSS untuk sebuah website, kita dimulai dengan kode HTML dasar. Dalam HTML, ada berbagai metode untuk menambahkan CSS, dan setiap metode memiliki tujuannya masing-masing. Beberapa metode memungkinkan kita untuk menghubungkan CSS dari file eksternal, sementara yang lain memberikan opsi untuk memanggil CSS langsung dalam kode.

Pada materi sebelumnya kita telah mempelajari tentang apa itu css. Selanjutnya dalam artikel ini, kita akan menjelajahi berbagai cara menambahkan, menghubungkan, dan memanggil CSS untuk memberikan tampilan yang menarik pada halaman web Anda.

CSS bisa ditambahkan ke halaman web dengan tiga cara utama: inline, internal, dan eksternal. Pilihan mana yang terbaik tergantung pada kebutuhan Anda dan struktur situs Anda. Mari kita bahas satu-persatu.

Cara Menambahkan, Menghubungkan dan Memanggil CSS di HTML

1. Inline CSS

Inline CSS diterapkan langsung pada elemen HTML individual melalui atribut style.

Contoh sederhana dari penggunaan Inline CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Inline CSS</title>
</head>
<body>
    <p style="color: blue;">Ini adalah teks berwarna biru menggunakan Inline CSS.</p>
</body>
</html>

Simpan kode di atas ke dalam file html misalnya inline.html. Kemudian buka file tersebut di internet browser.

tampilan hasil inline css

Penjelasan:

  • <p> adalah elemen paragraf pada HTML.
  • style adalah atribut yang digunakan untuk menambahkan CSS.
  • color: blue; adalah kode CSS yang membuat warna teks menjadi biru.

2. Internal CSS

Internal CSS diletakkan di dalam tag <style> di bagian <head> dari dokumen HTML.

Contoh sederhana dari penggunaan Internal CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Internal CSS</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Ini adalah teks berwarna merah menggunakan Internal CSS.</p>
</body>
</html>

Simpan kode di atas ke dalam file html misalnya internal.html. Kemudian buka file tersebut di internet browser.

tampilan hasil internal css

Penjelasan:

  • Elemen <style> digunakan untuk menulis kode CSS di dalam dokumen HTML.
  • p adalah selector yang menunjuk ke semua elemen paragraf pada halaman.
  • color: red; mengubah warna teks dari semua elemen paragraf menjadi merah.

3. Eksternal CSS

Eksternal CSS memungkinkan Anda untuk menulis CSS dalam file terpisah dengan ekstensi .css. Anda kemudian menghubungkan file tersebut ke dokumen HTML Anda.

Pertama, buatlah sebuah file bernama styles.css:

/* Isi dari file styles.css */
p {
    color: green;
}

Kemudian, buat file HTML dengan nama misalnya eksternal.html di folder yang sama dengan style.css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Ini adalah teks berwarna hijau menggunakan External CSS.</p>
</body>
</html>

Untuk melihat hasilnya buka file eksternal.html tersebut.

tampilan hasil eksternal css

Penjelasan:

  • File styles.css berisi kode CSS yang menetapkan warna teks dari semua elemen paragraf menjadi hijau.
  • Elemen <link> di dokumen HTML memberitahu browser untuk memuat dan menggunakan file styles.css tersebut.

Kelebihan, Kekurangan dan Kapan Harus Menggunakannya

Tiap cara di atas punya keunggulan dan kekurangan. Selain itu setiap cara tersebut cocok untuk kondisi-kondisi tertentu. Untuk lebih jelasnya mari kita bahas.

1. Inline CSS

Kelebihan:

  • Cepat dan mudah untuk gaya sederhana.
  • Cocok untuk perubahan singkat dan cepat.

Kekurangan:

  • Tidak efisien untuk gaya situs web yang luas.
  • Sulit dikelola untuk situs web yang besar.

Kapan Menggunakan Inline CSS?

Ketika Anda memiliki pengecualian gaya khusus untuk elemen tertentu.

2. Internal CSS

Kelebihan:

  • Cocok untuk gaya satu halaman web.
  • Tidak memerlukan file eksternal.

Kekurangan:

  • Harus ditulis ulang untuk setiap halaman baru.
  • Tidak seefisien CSS eksternal untuk situs web besar.

Kapan Menggunakan Internal CSS?

Saat membuat halaman tunggal tanpa perlu gaya berulang.

3. Eksternal CSS

Kelebihan:

  • Sangat efisien untuk situs web besar.
  • Gaya dapat diterapkan ke banyak halaman dengan satu file.

Kekurangan:

  • Memerlukan pemahaman tentang struktur direktori dan penghubungan file.

Kapan Menggunakan Ekternal CSS?

Untuk situs web besar dengan banyak halaman. Ini adalah pilihan yang paling populer karena efisiensinya.

Rekomendasi Pemilihan Metode

Mayoritas website modern cenderung menggunakan metode Eksternal CSS. Alasannya adalah metode ini lebih mudah dikelola, terutama untuk situs web dengan banyak halaman. Dengan External CSS, perubahan dapat diterapkan ke seluruh situs hanya dengan mengedit satu file.

Namun, untuk proyek kecil atau perubahan cepat, Inline atau Internal CSS mungkin lebih sesuai. Yang penting adalah memahami kapan dan di mana setiap metode paling efektif digunakan.

Kesimpulan

Itulah cara untuk memasukkan css ke html. Ada 3 cara yaitu inline, internal dan eksternal. Memahami bagaimana dan kapan menggunakan metode penulisan yang berbeda akan membantu Anda dalam pengembangan web yang efisien. Seiring waktu, Anda akan menemukan metode yang paling cocok untuk proyek Anda, namun penggunaan eksternal CSS seringkali menjadi pilihan terbaik bagi banyak developer.

Apa yang harus dipelajari selanjutnya?

Setelah belajar penulisan CSS maka kita sudah bisa membuat css sederhana. Selanjutnya kita bisa mulai untuk belajar:

Struktur Dasar CSS

Mari kita lanjutkan!

M. Hernawan
M. Hernawan
Web developer yang juga suka dengan dunia sysadmin. Pernah belajar Teknik Informatika di Indonesia.

Kirim Komentar