Integrasi Kode CSS pada HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

CSS atau Cascading Style Sheets adalah sebuah bahasa pemrograman yang digunakan untuk mendesain dan mengatur tampilan halaman web yang ditampilkan di browser web. Dengan CSS, kita dapat mengubah tampilan elemen HTML seperti teks, gambar, warna latar belakang, layout, ukuran, dan posisi dengan lebih mudah dan efisien. CSS memisahkan tampilan dan isi pada halaman web sehingga memudahkan pengembang web untuk mengelola dan memodifikasi tampilan halaman web secara terpisah dari isi atau kontennya. CSS juga dapat digunakan untuk membuat tampilan yang responsif dan dapat disesuaikan dengan ukuran layar yang berbeda, seperti pada perangkat seluler atau desktop.

Cara Menggunakan CSS

CSS dapat ditambahkan ke dokumen HTML dengan 3 cara, yaitu:

Inline CSS: CSS dapat ditambahkan secara langsung ke dalam atribut "style" pada elemen HTML. Dengan cara ini, gaya atau style hanya akan diterapkan pada elemen HTML tersebut.
Internal CSS: CSS dapat ditambahkan di dalam tag "<style>" pada bagian head dari dokumen HTML. Dengan cara ini, CSS dapat diterapkan pada seluruh halaman web.
External CSS: CSS dapat ditulis di dalam file terpisah dengan ekstensi .css, dan kemudian dipanggil pada dokumen HTML dengan menggunakan tag "<link>". Dengan cara ini, CSS dapat diterapkan pada seluruh halaman web dan dapat digunakan pada beberapa halaman web yang berbeda.

Inline CSS

Inline CSS digunakan untuk menerapkan gaya atau style ke satu elemen HTML.

Cara menggunakan Inline CSS yaitu dengan menambahkan atribut style pada elemen HTML.

Contoh:

<h1 style="color: blue;">Ini merupakan judul dengan style inline</h1>
<p style="color:red">Ini merupakan paragraf dengan style inline digunakan untuk mengubah warna teks menjadi merah </p>

Kode diatas akan menghasilkan dokumen HTML sebagai berikut:

Ini merupakan judul dengan style inline

Ini merupakan paragraf dengan style inline digunakan untuk mengubah warna teks menjadi merah

Internal CSS

Internal CSS digunakan untuk menentukan gaya atau style untuk satu halaman HTML.

Internal CSS didefinisikan pada bagian <head> HTML, di dalam elemen <style>.

Contoh penggunaannya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Internal CSS</title>
    <style>
        h1 {
            color: blue;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Ini merupakan judul dengan Internal CSS</h1>
    <p>Ini merupakan paragraf dengan internal CSS digunakan untuk mengubah warna teks menjadi merah </p> 
</body>
</html>

Kode diatas akan menghasilkan dokumen HTML yang sama dengan kode pada inline HTML.

External CSS

Eksternal CSS dapat digunakan untuk menentukan gaya pada banyak halaman HTML.

Untuk menggunakan style sheet eksternal, tambahkan tautan pada bagian <head> di setiap halaman HTML

Berikut adalah contoh penggunaanya:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh External CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Ini merupakan judul dengan External CSS</h1>
    <p>Ini merupakan paragraf dengan External CSS digunakan untuk mengubah warna teks menjadi merah </p> 
</body>
</html>

Selanjutnya buat file pada folder yang sama dengan nama style.css:

h1 {
     color: blue;
}
p {
     color: red;
}

Untuk lebih memahami mengenai CSS dapat mempelajari pada bagian tutorial CSS.