CSS

 PENGENALAN CSS

 

CSS berfungsi sebagai pelengkap pada HTML. Jika anda baru mempelajari HTML,  Yuk kita belajar CSS bersama! 

Apa itu CSS ?

Cascading Style Sheets atau yang disingkat CSS ini adalah bahasa pemrograman untuk menentukan bagaimana dokumen disajikan. CSS berfungsi untuk menjelaskan dan menata tampilan elemen yang tertulis pada bahasa markup, salah satunya adalah HTML. Nantinya CSS yang akan menjelaskan bagaimana elemen HTML di balik layar ditampilkan sedemikian rupa di layar website. Baik HTML maupun CSS, keduanya saling melengkapi.

Jadi, jika HTML itu kerangkanya maka CSS ini adalah cat dan hiasannya. CSS dapat membuat tampilan website kita menjadi lebih cantik dan menarik untuk dilihat.

Bagaimana sejarah CSS ?

CSS pertama kali dibuat oleh Håkon Wium Lie dan Bert Bos. Versi pertama CSS dirilis pada Desember 1996. Setelah itu, CSS terus berkembang menjadi bahasa yang sangat penting dalam pengembangan web.

Apa belajar CSS itu penting ?

CSS sangat penting untuk dipelajari karena CSS merupakan salah satu bagian penting dalam web development. Dengan menggunakan CSS website yang dibuat dapat menjadi lebih keren dan enak dilihat. Jika anda menguasai CSS, anda dapat menjadi web designer atau front-end developer.

Apa aja sih Fungsi dan Kegunaan CSS ?

• Mengubah font, ukuran, format, dan warna font. 
• Mengatur ukuran layout, lebar tinggi dan warna element.
• Mengubah tampilan form.
• Membuat halaman website yang responsive .

Sebagai developer, kita dituntut untuk dapat konsisten dan teliti. Salah coding sedikit saja dapat berakibat fatal. Apalagi dalam CSS kita akan menemukan berbagai elemen dan istilah-istilah yang cukup beragam. Karenanya, yuk kita pelajari istilah-istilah CSS dan kegunaannya terlebih dahulu!

Istilah CSS apa aja sih?

• Comment

Comment digunakan untuk menjelaskan code. Walaupun nantinya comment tidak ditampilkan di layar, namun comment dapat membantu untuk mengedit maupun mendokumentasikan code. Oleh karena itu, anda bisa menambahkan comment di manapun dan seperlunya.

Comment berada dalam elemen <style>, dan biasanya berupa garis miring (/) dan bintang (*), seperti yang bisa dilihat pada gambar berikut ini.

• Declaration

Declaration merupakan satu baris code pada CSS (tidak termasuk comment) yang biasanya ditandai dengan kurung kurawal buka ({) dan kurung kurawal tutup (}. Coba perhatikan gambar berikut!

Dibawah ini merupakan salah satu contoh dua atau lebih declaration!

• Selector

Selector digunakan untuk memilih elemen dari HTML yang akan ditargetkan atau dipengaruhi. Seperti contoh, apabila anda ingin mengatur posisi teks atau warna teks, cara memilihnya adalah dengan memakai selector.

Selector ditandai dengan tag h1, h2, p, a, div, body, dan tag lainnya, seperti gambar berikut :

Terdapat beberapa jenis Selector salah satunya adalah Grouping selector. Yang mana semua elemen HTML-nya dikelompokan sekaligus untuk meminimalisasi code, seperti contoh berikut :

• Property

Property digunakan untuk menambahkan atau mengatur ukuran teks, warna teks, warna background, jenis font, dan sebagainya. Pada aturan CSS, kita dapat menggunakan property sebanyak yang kita inginkan. Masing-masingnya berlaku untuk elemen yang diterapkan selector.

Property muncul sebelum titik dua (:) dan sesudah titik koma (;) di setiap barisnya, seperti pada gambar di bawah ini :

• Value

Value atau nilai adalah apa yang muncul setelah titik dua (:) di setiap barisnya. Pada gambar di bawah ini, ‘24px’ merupakan value-nya.

• Pseudo-class

Pseudo-class bekerja serupa dengan CSS class pada umumnya, hanya saja tidak secara eksplisit dideklarasikan di HTML. Kegunaan pseudo-class adalah untuk mendefinisikan suatu keadaan dari suatu elemen. Perhatikan gambar dibawah ini !

• Pseudo-element

Pseudo-element digunakan untuk mengedit bagian tertentu dari sebuah elemen. Berbeda dari pseudo-class, pseudo-element menargetkan elemen ‘virtual’ yang dapat berubah tergantung pada HTML yang sebenarnya. Selain itu, pseudo-element juga digunakan untuk:

1. Mengatur jenis huruf pertama, atau baris pertama dari sebuah elemen.
2. Menyisipkan konten sebelum/setelah konten suatu elemen.

Perhatikan gambar berikut :

• Padding

Padding digunakan untuk membuat jarak antara konten dan border elemen. Kita dapat mengatur padding untuk setiap sisi elemen, baik ke atas atau bawah, maupun kanan atau kiri. Contoh penerapannya adalah sebagai berikut :

• Margin

Margin digunakan untuk membuat space atau ruang di sekitar elemen, di luar batas yang ditentukan. Di sini, kita memegang kendali untuk mengatur margin di setiap elemen CSS, yaitu di atas, kanan, bawah, dan kiri. Perhatikan gambar berikut :

• Combinator

Combinator digunakan untuk menggabungkan dua selector sekaligus. Terdapat empat jenis combinator, yaitu:

1. Descendant selector yang ditandai dengan spasi (spasi).
2. Child Selector yang ditandai dengan tanda kurung siku (>).
3. Adjacent Sibling Selector yang ditandai dengan tanda tambah (+).
4. General Sibling Selector yang ditandai dengan tanda gelombang (~).

Contoh penggunaannya adalah sebagai berikut :

Cara belajar CSS :

1. Pelajari Dasar-dasarnya. Mulailah dengan mempelajari selectors, properties, dan values.
2. Coba aplikasikan CSS ke halaman HTML yang kamu buat.
3. Belajar dari Internet. Seperti W3Schools, CSS-Tricks, dan Codecademy.
4. Pelajari CSS3. Setelah paham dasar-dasarnya, coba pelajari fitur-fitur CSS3 seperti flexbox, grid, dan animasi.
5. Buat Proyek Sendiri.

NOTE :

Padding itu adalah jarak, sedangkan Margin itu adalah ruang . Jadi, jangan sampai tertukar ya !!