Pengertian & Konsep CSS

By: Didik Sazali on 6:11 PM

Pengertian CSS

       

        Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

       CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

       CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

       Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

       CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.

Keuntungan Menggunakan CSS:

1. CSS memberikan keseragaman pada halaman web.
2. Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat perubahan dalam style sheet.
3. CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
4. Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
5. CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif. 

Satuan Dalam CSS:

1. Statik
in -- satuan inchi
cm -- satuan centimeter
mm -- satuan milimeter
pt -- satuan point (1point = 1/72 inchi)
pc -- satuan pica (1pica = 12 point)
px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)

2. Relatif
% -- satuan persen
em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

1.  External Style Sheet (file CSS berbeda dari file HTML),
2.  Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
3.  Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Konsep CSS

1. Inheritance

Inheritance pada CSS dapat diartikan; Jika kita memberikan style pada suatu elemen maka elemen turunannya akan mengikuti stylenya, kecuali elemen turunan tersebut diberikan style tersendiri yang mengatur hal yang sama.

2. Selector Contextual

Contextual Selector ini merupakan suatu istilah di mana pendefinisian CSS yang terjadi akan menjadi lebih spesifik. Istilah ini yang sering kita sebut sebagai tag/selector anak.Pada penggunaan CSS, diperbolehkan menambahkan Contextual Selector seberapapun yang kita inginkan. Untuk menuliskannya, cukup menambahkan spasi pada sebuah tag yang dituju, lalu menambahkan sebuah selector/tag anak yang diinginkan.

3. Class Selector

Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang sesuai. Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class.

4. Id Selector

Penggunaan Id Selector hampir sama dengan Class Selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut id.

Perbedaan setiap konsep:

Konsep pewarisan mengatur setiap elemen dengan tampilan yang sama harus dipisah satu persatu sedangkan konsep kontekstual dapat digabungkan seperti gambar diatas. Dan pada konsep kelas untuk mengatur isi, elemen harus diisi class dan pemanggilan serta css diawali tanda titik sedangkan pada konsep id bedanya elemen kelas ganti dengan id dan diawali tanda pagar.

Kelebihan & kekurangan:

Konsep pewarisan banyak menggunakan css padahal untuk tampilan yang sama dan kurang efisien dibanding dengan konsep kontekstual yang menggabungkan setiap elemen dalam satu css. Sedangkan konsep kelas dan id adalah sama. Intinya, konsep kontekstual, kelas dan id lebih efisien dibanding konsep pewarisan.