CSS: Pengertian, Tipe, dan Contohnya

Ilustrasi CSS. Foto: Lagos Techie via Unsplash

CSS 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

Ilustrasi CSS. Foto: 200 Degrees via Pixabay

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:

Ilustrasi CSS. Foto: James Osborne via Pixabay

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:

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:

Sekarang kamu sudah memahami apa itu CSS dan berbagai tipenya yang bisa digunakan untuk membuat desain website sesuai keinginan dan kebutuhan.

(NSF)