Cascading Style Sheets atau yang biasa disingkat dengan CSS adalah aturan yang digunakan untuk mengatur tampilan dari sebuah web agar lebih terstruktur. CSS dapat mengerjakan hal-hal yang tidak bisa dikerjakan oleh HTML. Ibarat Microsoft Word CSS adalah menu yang mengatur style (gaya), contohnya memformat text, footer, images, hingga membuat layout. Sehingga penggunaannya bersama HTML akan saling melengkapi estetika dari sebuah web. 

CSS dapat mengatur ukuran gambar, warna teks, margin, spasi antar teks maupun spasi antar paragraf, ukuran border, dan lainnya. dan ditulis dengan menggunakan penanda (markup language). 

CSS terdiri dari dua bagian, yaitu bagian selector dan bagian declaration. Selector merupakan bagian dari HTML yang menjadi target dari pemformatan oleh CSS, bagian ini digunakan untuk menentukan elemen apa yang ingin dipakai dengan menggunakannya. Sedangkan declaration adalah bagian dari sintaks CSS yang berisi format-format yang disebut property atau value. 

Untuk memahami dengan baik apa itu Cascading Style Sheet dan bagaimana cara penggunaannya, akan lebih baik bila kita mengenal terlebih dahulu istilah-istilah CSS dan kegunaannya, di bawah ini!

1. Comment

Comment tidak akan mempengaruhi tampilan pada sebuah web, melainkan berfungsi agar author dapat membaca dengan jelas dan mengerti kode-kode yang telah ditulis. Comments dalam CSS ditandai dengan garis miring dan tanda bintang. 

2. Rule Set

Rule set adalah kumpulan aturan yang masih satu bagian dengan CSS termasuk selector, kurung awal, dan garis yang berbeda dengan properti dan nilai.

3. Property

Property digunakan untuk mengatur ukuran teks, jenis font, warna teks, warna background, dan lainnya. Property dipisahkan dengan titik dua (:) dan titik koma (;).

4. Value

Value adalah nilai yang muncul setelah tanda titik dua (:) di setiap baris CSS. 

5. Selector

Selector adalah bagian dari baris CSS yang menentukan elemen apa yang akan ditargetkan bersama dengan property atau value. Ada beberapa metode yang bisa digunakan untuk memilih elemen. 

6. Declaration

Declaration merupakan satu baris kode pada CSS yang biasanya ditandai dengan kurung kurawal di awal dan di akhir kode. Semua sintaks setelah kurung kurawal pertama dan sebelum kurung kurawal terakhir (dan tidak termasuk komentar) adalah sebuah declaration.

7. Padding

Padding adalah spasi atau jarak diantara isi konten dengan border. Kita dapat memindahkan border dengan menyesuaikan value pada Cascading Style Sheets, memiliki jarak yang jauh atau dekat dengan konten, maupun berada di sisi kanan atau kiri konten. 

8. Margin

Margin adalah ruang disekitar elemen. Semakin besar margin, maka semakin besar pula ruang diantara elemen satu dengan lainnya. Margin juga dapat disesuaikan posisinya, apakah elemen ingin diletakkan berdekatan atau berjauhan. 

9. Pseudo-Class

Cara kerja pseudo-class kurang lebih mirip dengan CSS class biasa, hanya saja tidak secara eksplisit dideklarasikan di HTML. Pseudo class digunakan untuk mendefinisikan suatu keadaan dari suatu elemen.

10. Pseudo-Element

Pseudo-element memiliki kegunaan yang berbeda dengan pseudo-class. Pseudo-element menargetkan elemen “virtual” yang dapat berubah tergantung pada HTML sebenarnya. Pseudo-element pada CSS2 menggunakan titik dua tunggal, sementara CSS3 menggunakan titik dua ganda. 

11. Combinator

Combinator adalah karakter dalam selector yang menggabungkan dua selector bersama-sama. Ada empat jenis combinator yaitu:

1. Descendant selectors ditandai dengan karakter spasi
2. Child selectors ditandai dengan karakter “>”
3. Adjacent sibling selectors ditandai dengan karakter “+”
4. General sibling selectors ditandai dengan karakter “~” 

   

Sumber: .binaracademy.com