Cara Memasukkan CSS ke Halaman Web: Panduan Langkah-demi-Langkah

Tutorial Belajar CSS Part 3 -Menyisipkan CSS ke dalam Halaman Web Anda

10/16/2023
Yan Afriyoko
51

Tutorial Belajar CSS Part 3: Menyisipkan CSS ke dalam Halaman Web Anda

Pada bagian ketiga dari tutorial ini, kita akan menjelaskan berbagai metode penyisipan CSS ke dalam halaman web Anda. Ini termasuk cara internal, eksternal, dan inline untuk menerapkan gaya ke elemen HTML.

1. CSS Internal

Penggunaan Tag `<style>`

Anda dapat menuliskan CSS langsung di dalam tag <style> di bagian <head> halaman web Anda.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Judul Halaman</h1>
    <p>Contoh paragraf dengan gaya internal.</p>
</body>
</html>

2. CSS Eksternal

Penggunaan Berkas CSS Terpisah

Anda dapat membuat berkas CSS terpisah dan menyisipkannya ke dalam halaman web menggunakan tag <link> di bagian <head>.

Misalnya, berkas style.css berisi gaya yang akan diterapkan ke halaman.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Judul Halaman</h1>
    <p>Contoh paragraf dengan gaya eksternal.</p>
</body>
</html>

3. CSS Inline

Penggunaan Atribut `style`

Anda dapat menambahkan gaya langsung ke elemen HTML menggunakan atribut style.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1 style="color: blue;">Judul Halaman</h1>
    <p style="font-size: 16px;">Contoh paragraf dengan gaya inline.</p>
</body>
</html>

Manfaat dan Pertimbangan

Internal CSS: Cocok untuk halaman kecil, namun mungkin membingungkan pada halaman yang lebih besar.
Eksternal CSS: Memisahkan gaya dari struktur HTML, memungkinkan konsistensi dan kemudahan pemeliharaan.
Inline CSS: Berguna untuk perubahan gaya sementara atau dalam konteks spesifik.

Kesimpulan

Memilih metode penyisipan CSS yang tepat bergantung pada kebutuhan dan kompleksitas halaman web Anda. Penggunaan internal, eksternal, atau inline CSS memiliki kelebihan dan kelemahan masing-masing. Pemisahan tata letak dan tampilan dengan CSS eksternal umumnya disarankan untuk pengelolaan yang lebih baik dan konsistensi gaya di seluruh situs web Anda.