Tentang KamiPedoman Media SiberKetentuan & Kebijakan PrivasiPanduan KomunitasPeringkat PenulisCara Menulis di kumparanInformasi Kerja SamaBantuanIklanKarir
2025 © PT Dynamo Media Network
Version 1.101.0
Konten dari Pengguna
CSS: Pengertian, Cara Kerja, dan Tipe-tipenya
18 November 2021 10:48 WIB
·
waktu baca 3 menit
Tulisan dari Kabar Harian tidak mewakili pandangan dari redaksi kumparan
PerbesarADVERTISEMENT
CSS adalah singkatan dari cascading style sheets yang menjelaskan bagaimana elemen-elemen HTML ditampilkan dengan lebih mulus. CSS menghemat banyak pekerjaan, sekaligus mengontrol tata letak beberapa halaman website.
ADVERTISEMENT
CSS memungkinkan website developer untuk memisahkan HTML dari aturan-aturan tertentu, untuk membentuk tampilan sebuah website. Namun terkadang, programmer pemula cenderung menganggap remeh kekuatan dan fleksibilitas dari sebuah CSS.
CSS pertama kali diperkenalkan untuk pengembangan website di tahun 1996. Nama CSS didapat dari fakta, bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style.
Bagaimana cara menambahkan CSS ke elemen HTML? Apa saja tipe-tipenya? Agar lebih memahaminya, simak uraian lengkapnya berikut ini.
Cara Kerja CSS pada Website
Dikutip dalam buku Sakti HTML, CSS, dan Javascript: Pemrograman Web Itu Gampang karangan Asam Saputra, S.Si (2019: 47), CSS dapat ditambahkan ke elemen HTML dalam tiga cara, yaitu:
ADVERTISEMENT
Tipe-tipe CSS dan Contohnya
Seperti yang sudah dibahas sebelumnya, CSS adalah program yang berfungsi sebagai alat untuk mengatur style pada situs berisi elemen HTML.
CSS dapat mengubah besar kecilnya teks, mengganti warna background pada sebuah halaman, mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan CSS.
Singkatnya, CSS digunakan untuk mengatur susunan tampilan pada HTML. Berikut ini adalah tipe-tipe CSS, dikutip dari buku Pengenalan HTML dan CSS karya Jubilee Enterprise (2018: 22):
1. Inline CSS
Instruksi untuk inline CSS, yaitu ada di dalam file HTML. Pada inline CSS, atribut digunakan pada tag awal elemen dan tidak ada di elemen-elemen lainnya. Contoh penggunaan inline CSS adalah sebagai berikut.
ADVERTISEMENT
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>
2. Internal CSS
Pada internal CSS, instruksi dimasukkan ke dalam file HTML. Penggunanya hanya cukup memasukkan elemen <style> pada area <head> dokumen. Adapun contoh internal CSS, yaitu:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:12px;}
</style>
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>
3. Eksternal CSS
Pada CSS eksternal, instruksinya selalu menggunakan akhiran ".css", kemudian diubah ke dalam file HTML menggunakan "link". Metode ini paling umum digunakan, karena dapat memisahkan desain dan konten agar terlihat rapi. Contoh eksternal CSS adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
ADVERTISEMENT
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>
CSS memiliki andil yang besar dalam pembuatan website. Tanpa menggunakan CSS, tampilan halaman website akan terlihat membosankan.
Selain itu, dari sisi web designer sendiri, CSS akan membantu mereka untuk menghemat waktu karena tidak harus lagi mengetikkan perintah yang sama.
(VIO)