Memahami CSS, Cara Kerja Hingga Fungsinya

CSS – CSS kepanjangan dari Cascading Style Sheet. CSS ini berfungsi untuk mengatur style dari halaman website (Interface User). W3C (World Wide Consortium) telah mengembangkan CSS di tahun 1996. CSS merupakan script pendukung untuk penggunaan HTML. Awal mulanya script HTML tidak dilengkapi dengan tags, dimana fungsinya yaitu untuk memformat halaman website. HTML dan juga CSS dapat dikombinasikan karena keduanya sangat berperan dalam men-develop sebuah halaman website yang tentunya ingin terlihat menarik secara visual.

CSS merupakan bagian teknis dalam pemrograman. Mayoritas orang menganggap bahwa CSS ini merupakan bahasa pemrograman, padahal bukan. CSS merupakan salah satu Styling Languange (bahasa design) yang tergabung dalam kategori markup languange dimana dapat menghasilkan perpaduan warna untuk menghasilkan visual website yang elegan.

Istilah-Istilah dalam CSS

Sebelum anda menggunakan CSS, terdapat beberapa istilah yang perlu dipahami. Istilah-istilah tersebut yaitu sebagai berikut :

1. Selector

Jika mengacu pada W3Schools, selector itu merupakan bagian yang ingin dirubah desainnya. Contohnya pada saat akan mengubah heading di setiap halaman. Anda harus memilih heading berapa yang akan dirubah. Heading 1 (H1), Heading 2 (H2), Heading 3 (H3) dan seterusnya. Contoh penggunaan selector yaitu sebagai berikut :

p {
  text-align: center;
  color: white;
}

2. Property

Property ini merupakan aspek perubahan dari selector. Contohnya jika anda ingin merubah style font baik itu dari sisi warna, ukuran ataupun jenis font yang digunakan. Contoh penggunaan property yaitu sebagai berikut :

@property --bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: springgreen;
}

3. Value

Value ini merupakan nilai yang akan dihasilkan dari property dan juga selector yang sudah dibuat. Contoh penggunaan value yaitu sebagai berikut :

input[type="text"] {
  width: 1000px;
}

input[type="text"]:focus {
  width: 300px;
}

4. Declaration

Declaration ini merupakan bagian dari value yang dikombinasikan dengan property yang dibuat.

Cara Kerja CSS

CSS bekerja dengan cara memberikan efek visual terhadap tag Source HTML. Antara Konten HTML dilakukan penggabungan untuk visualisasinya dengan CSS.

CSS menggunakana bahasa inggris sederhana dengan basic script yang dilengkapi dengan kombinasi perintah terstruktur. Contohnya seperti tag <style> yang dapat digunakan untuk atribut class warna.

CSS. Adapun contohnya sebagai berikut :

body {
background-color: springgreen;
}

h1 {
color: yellow;
text-align: center;
}

p {
font-family: verdana;
font-size: 24px;
}

Lalu pada saat ingin merubah warna teks ataupun header cukup menambahkan tag <span> dan tidak memerlukan penulisan kembali instruksinya. Dalam sebuah website, CSS juga bekerja pada saat browser memuat halaman. Tanpa adanya CSS halaman website akan terlihat tidak menarik dan statis.

Fungsi CSS

CSS memiliki fungsi untuk mempermudah para pengembang dalam hal ini web developer untuk create ataupun edit data baik itu berupa teks, gambar, background halaman. Yang membedakan antara halaman website menggunakan CSS atau tidak biasanya akan sangat terlihat dari style halaan website itu sendiri. Tapi pada umumnya karena antara CSS dan HTML ini saling berkaitan, maka setiap halaman website sudah menggunakan CSS.

Adapun fungsi CSS lainnya yaitu :

• Mengatur visualisasi website seperti warna,jenis teks dan penataan letak konten.
• Optimalisasi responsivitas halaman website.
• Konsistensi Design Website dari setiap halamannya.