Cara Menulis CSS di HTML: Panduan Lengkap untuk Pemula

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan dan tata letak halaman web. Dengan CSS, kita dapat mengubah warna, font, margin, tata letak, dan bahkan membuat animasi. Dalam artikel ini, kita akan membahas lima metode utama untuk menulis CSS dalam HTML: Internal CSS, Eksternal CSS, Eksternal CSS dalam Folder, Eksternal CSS dari Internet (CDN), dan Inline CSS.

Table of Contents

Internal CSS

Internal CSS adalah cara menuliskan CSS langsung di dalam file HTML, biasanya di bagian <head> dokumen. Ini berarti CSS hanya berlaku untuk halaman tersebut. Internal CSS cocok untuk halaman web tunggal yang tidak terlalu besar atau untuk pengujian desain halaman sebelum memutuskan untuk menggunakan file CSS terpisah.

Contoh Internal CSS:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            font-size: 24px;
        }
        p {
            font-family: Arial, sans-serif;
        }
    </style>
    <title>Internal CSS Example</title>
</head>
<body>
    <h1>Ini adalah Contoh Internal CSS</h1>
    <p>Teks paragraf dengan gaya yang ditetapkan oleh CSS internal.</p>
</body>
</html>

Dalam contoh di atas, CSS diletakkan di antara tag <style> di bagian <head> dari dokumen HTML.

Hasilnya:

Eksternal CSS

Eksternal CSS adalah metode terbaik dan paling sering digunakan untuk situs web besar karena memungkinkan pemisahan penuh antara konten HTML dan desain. CSS ditulis dalam file terpisah dengan ekstensi .css, dan dihubungkan ke dokumen HTML melalui tag <link>.

Contoh Eksternal CSS

File HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Eksternal CSS Example</title>
</head>
<body>
    <h1>Ini adalah Contoh Eksternal CSS</h1>
    <p>Teks paragraf dengan gaya yang ditetapkan oleh CSS eksternal.</p>
</body>
</html>

File style.css:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    font-size: 24px;
}

p {
    font-family: Arial, sans-serif;
}

Dengan eksternal CSS, Kamu bisa menggunakan satu file CSS untuk banyak halaman HTML, sehingga mempermudah pemeliharaan dan membuat situs lebih terstruktur.

Hasilnya:

Eksternal CSS di dalam Folder

Dalam proyek yang lebih besar, file CSS biasanya disimpan di dalam folder khusus, misalnya folder css. Ini memudahkan pengelolaan berbagai file proyek.

Contoh Menggunakan CSS di dalam Folder

Struktur folder:

/project
   /css
       style.css
   index.html

File HTML (index.html):

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Eksternal CSS di Folder</title>
</head>
<body>
    <h1>Ini adalah Contoh Eksternal CSS di dalam Folder</h1>
    <p>Teks paragraf yang ditata oleh CSS yang berada di folder.</p>
</body>
</html>

Dalam contoh ini, file style.css berada di dalam folder css, dan kita menghubungkannya ke HTML menggunakan path relatif css/style.css.

Eksternal CSS dari Internet (CDN)

CDN (Content Delivery Network) memungkinkan kita menggunakan CSS dari internet tanpa perlu menulis atau menyimpan file CSS sendiri. Biasanya, kita menggunakan CDN untuk memuat pustaka CSS seperti Bootstrap, Font Awesome, atau Google Fonts.

Contoh Menggunakan CDN untuk Bootstrap:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>Eksternal CSS dari CDN</title>
</head>
<body>
    <div class="container">
        <h1 class="text-primary">Ini adalah Contoh Eksternal CSS dari CDN (Bootstrap)</h1>
        <p class="lead">Teks paragraf menggunakan gaya dari Bootstrap CDN.</p>
    </div>
</body>
</html>

Dengan menggunakan CDN, kita tidak perlu mengunduh atau menyimpan file CSS. Hanya dengan menambahkan tautan ke sumber CDN, kita bisa memanfaatkan fitur-fitur desain dari pustaka CSS yang terkenal.

Hasilnya:

Inline CSS

Inline CSS adalah metode menulis CSS langsung pada elemen HTML menggunakan atribut style. Metode ini biasanya digunakan untuk perubahan cepat atau elemen tunggal, tetapi tidak dianjurkan untuk digunakan secara luas karena bisa membuat kode sulit dikelola.

Contoh Inline CSS:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: navy; font-size: 24px;">Ini adalah Contoh Inline CSS</h1>
    <p style="font-family: Arial, sans-serif;">Teks paragraf dengan gaya yang diatur langsung pada elemen HTML.</p>
</body>
</html>

Dalam contoh ini, gaya CSS ditulis langsung di elemen <h1> dan <p> menggunakan atribut style.

Hasilnya:

Kesimpulan

Dalam pengembangan web, ada berbagai cara untuk menyisipkan CSS ke dalam HTML, masing-masing dengan keunggulan dan penggunaannya sendiri:

Inline CSS
cocok untuk perubahan cepat pada elemen tunggal.
Internal CSS
berguna untuk halaman tunggal yang memerlukan gaya khusus.
Eksternal CSS
adalah cara terbaik untuk memisahkan konten dan tampilan, terutama pada proyek besar.
Eksternal CSS dalam Folder
memberikan struktur yang lebih baik untuk proyek web.
Eksternal CSS dari CDN
memungkinkan penggunaan pustaka CSS dari internet tanpa harus menyimpan file lokal.

Pilih metode yang paling sesuai dengan kebutuhan proyek Kamu untuk mengoptimalkan pengelolaan dan desain situs web Kamu.