CSS: Pengertian, Tipe, dan Contohnya
How to tekno
·waktu baca 1 menit
Tulisan dari How To Tekno tidak mewakili pandangan dari redaksi kumparan
PerbesarCSS adalah teknologi yang berfungsi untuk memperindah tampilan website. CSS adalah singkatan dari Cascading Style Sheets yang sudah digunakan selama bertahun-tahun.
Pada sebuah website, selalu terdapat dokumen, gambar, dan teks. Dokumen di sini tidak seperti yang tersimpan di komputer (PDF, Word, dll), melainkan berbentuk HTML dan CSS.
Pengertian dan Fungsi CSS adalah
CSS merupakan cascade style sheets, di mana arti cascade adalah aliran dari serangkaian gaya pada style sheets di sebuah situs.
Mengutip dari Tought Co., cascade selayaknya batu dalam air terjun yang mengalir dari atas ke bawah dan menyentuh bebatuan. Namun, hanya batuan paling bawah yang akan memengaruhi ke mana air mengalir.
Sementara itu, style sheets pada CSS adalah dokumen teks yang dapat diedit dalam banyak program untuk desain dokumen. Style sheets sudah digunakan selama bertahun-tahun, baik untuk desain cetak maupun online.
Style sheets dalam situs memiliki tujuan yang sama dengan desain cetak. Namun, diberi tugas tambahan seperti memberi tahu website bagaimana cara menerjemahkan dokumen yang sedang dilihat.
CSS merupakan salah satu teknologi yang harus benar-benar dipahami oleh desainer website. Hal ini dikarenakan CSS dapat memengaruhi seluruh tampilan yang ada di-website tersebut.
Tipe-tipe CSS
Seperti yang sudah kita bahas, CSS adalah program yang berfungsi sebagai alat untuk mengatur gaya pada situs berisi elemen HTML. CSS akan mengatur warna, ukuran, font, dan lainnya. Berikut ini adalah tipe-tipe CSS, dikutip dari laman Ionos:
1. Eksternal CSS
Pada CSS eksternal, instruksinya selalu menggunakan akhiran ".css", kemudian diubah ke dalam file HTML menggunakan "link". Metode ini paling umum digunakan, karena memisahkan desain dan konten agar terlihat rapi. Contoh eksternal CSS adalah:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>
2. Internal CSS
Pada CSS internal, instruksi dimasukkan ke dalam file HTML. Kamu hanya cukup memasukkan elemen "style" pada area "head" dokumen, berikut ini adalah contoh CSS internal:
<!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. Inline CSS
Instruksi untuk inline CSS hampir sama dengan internal CSS, yaitu ada di dalam file HTML. Pada inline CSS, atribut digunakan pada tag awal elemen dan tidak ada di elemen lain. Contoh penggunaan CSS inline adalah:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>
Sekarang kamu sudah memahami apa itu CSS dan berbagai tipenya yang bisa digunakan untuk membuat desain website sesuai keinginan dan kebutuhan.
(NSF)