Pengertian CSS beserta cara kerjanya PWDPB

 Apa itu CSS

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. 

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

Kelebihan CSS 

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.

Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.

Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam style pada satu halaman HTML.

Cara kerja CSS 

CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a paragraph.</p>.

Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

Mari kita lihat contoh di bawah ini:

<style>

p {

 color: blue;

 text-weight: bold;

}

<style>

Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.

<style>

p {

   text-align: center;

   font-size: 16px;

   color: pink;

  }

</style>

CSS Style Internal, External, dan Inline

CSS Style Internal diload setiap kali website di-refresh, dan kekurangannya adalah waktu loading semakin lama. CSS style yang sama pun tidak dapat digunakan di halaman lain karena sudah aktif terlebih dulu di suatu halaman. Namun di balik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam sharing template untuk pratinjau (preview) karena CSS hanya ada di satu halaman.

External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.

CSS Style Inline menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika Anda ingin menggunakan CSS dengan cepat. Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak punya akses ke file CSS.

Properti CSS

1. Background property

Property background pada CSS disebut juga sebagai latar belakang, property background ini digunakan untuk menentukan efek latar belakang pada sebuah elemen.

Background tersebut bisa berupa gambar, warna dan lain sebagainya. Berikut merupakan properti pada background tersebut:

2. Border property

Border properti merupakan properti yang digunakan untuk mengatur dan memberi garis pada elemen atau selector dengan berbagai variasi lebar serta warna pada garis tersebut.

3. Font property

Font properti pada CSS digunakan untuk menentukan jenis font, huruf tebal, ukuran, dan gaya teks pada halaman web sesuai dengan yang diinginkan.

4. Margin property

Margin adalah sebuah kode yang mengatur seleksi batas jarak luar. Margin properti pada CSS digunakan untuk membuat ruang kosong disekitar box atau elemen bagian yang luar sesuai dengan yang diinginkan. Kita bisa mengatur margin pada sisi kanan, sisi kiri,sisi atas dan sisi bawah secara terpisah. 

5. Padding property

Padding adalah sebuah kode yang mengatur seleksi batas jarak dalam. Padding properti pada CSS digunakan untuk menghasilkan ruang kosong disekitar konten elemen bagian dalam atau didalam batas yang telah ditentukan. Kita bisa mengatur padding pada setiap sisi elemen baik itu sisi atas, bawah, kanan, dan sisi kiri.

6. Property lebar dan tinggi

Properti ini merupakan peroperti yang digunakan untuk mengatur tinggi dan lebar suatu elemen. Kita bisa mengatur tinggi dan lebar suatu elemen secara otomatis atau bisa juga dalam bentuk nilai seperti ukuran pixel, cm, em, persen dan lain sebagainya. 

 7. Text property

Properti text ini merupakan sebuah properti yang digunakan untuk mengatur atau memformat tulisan sesuai dengan yang kita inginkan.

8. Display property 

Properti display biasanya digunakan untuk menentukan bagaimana sebuah elemen akan ditampilkan. Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemennya. Nilai tampilan default untuk sebagian besar elemen adalah blok atau baris.

9. Border radius property

Border Radius merupakan properti untuk membuat suatu element memiliki tepian yang elips atau umumnya disebut sudut lengkungan. Dengan adanya properti border radius, kamu bisa berkreasi dengan menambahkan lengkungan-lengkungan halus di setiap sudut border, hingga memungkinkan kamu untuk membuat sebuah lingkaran.

10. Position property

Position merupakan property css yang digunakan untuk menentukan sifat posisi suatu elemen di suatu dokument. Sifat di sini dalam artian elemen bisa berubah, tetap , dan lain lain . Nilai dari propety bisa berbentuk static, relative, abosulute, atau fixed.