Apa Itu CSS?

Warta Ekonomi, Jakarta -

Apa Anda masih ingat HTML (Hypertext Markup Language), bahasa coding yang berfungsi sebagai dasar dari web developing? Nah, jika HTML adalah bahasa pertama yang ingin Anda pelajari saat Anda tertarik untuk membangun situs web, sepupunya CSS adalah yang kedua.

Apa itu CSS dan Bagaimana Hubungannya dengan HMTL?

CSS adalah singkatan dari Cascading Style Sheets dengan penekanan pada Style. Jika HTML digunakan untuk menyusun dokumen web (mendefinisikan hal-hal seperti judul dan paragraf, dan memungkinkan Anda untuk menyematkan gambar, video, dan media lainnya), CSS hadir untuk menentukan gaya dokumen Anda, seperti tata letak halaman, warna, dan font yang semuanya ditentukan dengan CSS. Pikirkan HTML sebagai fondasinya (di mana setiap rumah pasti memilikinya), dan CSS sebagai pilihan estetika (ada perbedaan besar antara rumah bergaya kolonial dan rumah modern abad ke-21).

Baca Juga: Apa Itu HTML?

Apa Saja Fungsi CSS?

Seperti yang telah disebutkan sebelumnya, CSS adalah bahasa yang digunakan untuk menentukan bagaimana dokumen disajikan kepada pengguna, seperti bagaimana dokumen tersebut ditata agar lebih menarik.

Dokumen biasanya berupa file teks yang terstruktur menggunakan bahasa markup. HTML adalah bahasa markup yang paling umum, tetapi Anda mungkin juga menemukan bahasa markup lain seperti SVG atau XML.

Menyajikan dokumen kepada pengguna berarti mengubahnya menjadi bentuk yang dapat digunakan oleh audiens Anda. Browser, seperti Firefox, Chrome, atau Edge, dirancang untuk menyajikan dokumen secara visual, misalnya, di layar komputer, proyektor, atau printer.

CSS dapat digunakan untuk penataan teks dokumen yang sangat mendasar, misalnya mengubah warna, ukuran judul, dan tautan. Ini dapat digunakan untuk membuat tata letak, misalnya mengubah satu kolom teks menjadi tata letak dengan area konten utama dan bilah sisi untuk informasi terkait. Bahkan, dapat digunakan untuk menciptakan efek seperti animasi.

Bagaimana CSS Bekerja?

CSS menghadirkan gaya ke halaman web Anda dengan berinteraksi dengan elemen HTML. Elemen adalah komponen HTML individual dari halaman web, misalnya paragraf, yang dalam HTML mungkin terlihat seperti ini:

This is my paragraf!

Jika Anda ingin membuat paragraf ini tampak berwarna merah muda bagi orang-orang yang melihat halaman web Anda melalui browser, Anda dapat menggunakan kode CSS yang terlihat seperti ini:

p { color:pink; font-weight:bold; }

Dalam hal ini, "p" (paragraf) disebut selector—ini adalah bagian dari kode CSS yang menentukan elemen HTML mana yang akan dipengaruhi oleh gaya CSS. Dalam CSS, pemilih ditulis di sebelah kiri kurung kurawal pertama. Informasi di antara tanda kurung kurawal disebut deklarasi, dan berisi properties dan value yang diterapkan ke pemilih. Properties adalah hal-hal seperti ukuran font, warna, dan margin, sedangkan value adalah pengaturan untuk properties tersebut. Dalam contoh di atas, "color" dan "font weight" adalah properties, dan "pink" dan "bold" adalah value-nya. Set tanda kurung penuh dari

{ color:pink; font-weight:bold; }

adalah sebuah pernyataan, dan sekali lagi, "p" (artinya paragraf HTML) adalah selector atau pemilih. Prinsip dasar yang sama ini dapat diterapkan untuk mengubah ukuran font, warna latar belakang, lekukan margin, dan banyak lagi. Contohnya:

body { background-color:lightblue; }

Ini akan membuat latar belakang halaman Anda menjadi biru muda.

p { font-size:20px; color:red; }

Sementara, ini dapat membuat paragraf font 20 poin dengan huruf merah.