Ketika kalian baru saja belajar membuat website, kamu pasti sering mendengar bahasa pemrogramman CSS. Tapi saat itu, kalian mungking masih belum mengerti kenapa CSS sangat penting untuk dipelajari. Dalam seri artikel Belajar CSS Dasar ini, kita akan membahas secara lengkap tentang pengertian CSS dasar serta bagaimana cara kerja CSS untuk mengatur layout pada website.

Pengertian dari CSS

CSS merupakan singkatan dari Cascading Style Sheets, yaitu bahasa pemrograman yang digunakan untuk mengatur layout dan style elemen HTML pada website. Dengan CSS, website kita bisa tampil lebih cantik dan indah untuk dipandang oleh pengunjung dengan mengatur warna, ukuran teks, layout, posisi elemen, dan masih banyak lagi. Sederhananya, jika kita tidak mengaplikasikan CSS pada website yang kita buat, tampilan halaman web hanya akan berisi teks dan struktur polos dari HTML saja.

Fungsi CSS Dalam Website

Agar lebih jelas, berikut beberapa fungsi utama CSS dalam pengembangan sebuah website.

Mengatur Tata Letak Halaman (Layouting) CSS memungkinkan kita menentukan posisi elemen, ukuran kolom, lebar dari sebuah konten, dan lainnya dengan fleksibel
Mempercantik Tampilan Website Kita bahkan bisa mengatur warna latar belakang website kita, fonts, border, dan animasi transisi agar website terlihat lebih menarik dan nyaman untuk dilihat.
Responsive CSS menyediakan syntax yang bernama media query, dengan query tersebut kita bisa menyesuaikan tampilan untuk berbagai ukuran layar seperti dekstop, tablet, dan smartphone.

Bagaimana CSS Bekerja?

Setelah mengetahui pengertian dan fungsi dari CSS dalam pengembangan website, hal penting selanjutnya adalah memahami cara kerja dari CSS. Dengan memahami cara kerja CSS, kita dapat menulis kode CSS yang efektif dan efisien saat membangun sebuah website.

CSS Menargetkan Elemen HTML dengan Selector

Jika kita ingin mengubah tampilan dari sebuah elemen HTML, maka kita perlu melakukan targeting element atau biasa disebut dengan Selector. Berikut contohnya.

p {
  color: green;
}

Penjelasan dari kode diatas adalah.

p adalah selector yang menargetkan semua elemen yang menggunakan tag <p>.
color: green warna hijau akan diterapkan ke seluruh elemem yang menggunakan tag <p>.

Rules Pada CSS

Aturan menulis pada CSS adalah properti dan nilai. Yang dimana properti memiliki arti apa yang ingin diubah seperti warna, ukuran, atau margin. Sedangkan nilai, pengaturan yang ingin diterapkan pada properti tersebut. Coba perhatikan kode dibawah ini.

selector {
	property: value;
}

Jadi setiap kita menulis kode CSS, kita perlu menentukan properti dan nilai untuk mengatur tampilan suatu elemen.

CSS Membaca Urutan dari Atas ke Bawah

Jika seandainya terdapat dua aturan memiliki tingkat specificity yang sama, maka aturan yang terakhir yang akan dibaca oleh CSS. Contohnya sebagai berikut.

p {
  color: blue;
}

p {
  color: red;
}

Maka hasilnya adalah sebuah teks berwarna merah dari elemen <p>.

Kesimpulan

Mempelajari CSS adalah hal penting saat kita memulai belajar membangun sebuah website. Dengan CSS, kita bisa mengontrol keseluruhan desain halaman web.

Terimakasih, sampai jumpa di artikel selanjutnya.