Penegrtian CSS dan Cara Kerjanya

 

Pengembangan website menggunakan HTML atau PHP saja belum cukup. Anda membutuhkan CSS yang bisa mengatur seluruh tampilan website sehingga terlihat lebih menarik dan sesuai dengan kebutuhan. Itulah kenapa kita perlu mengetahui pengertian CSS.

Kita wajib mengetahui mengenai CSS karena akan sangat berguna  dalam proses pengembangan website. Apalagi saat ini hampir setiap website menggunakan CSS sebagai tools untuk mengatur berbagai tampilan di dalamnya.

Setelah perkembangan pesat internet, halaman web tidak hanya memiliki format tetapi juga warna dan tata letak lain harus dibebankan pada kontrol HTML. Pengembangan web berubah menjadi sesuatu yang sangat kompleks dan sulit ditangani. Tentu saja, peran HTML sebagai alat struktural dan alat bantu desain terasa amat berat. Untuk itulah kemudian CSS dibuat sebagai solusi dari tugas desain dan pemformatan, sedangkan HTML bisa kembali fokus pada tata letak halaman web.

CSS muncul dan lantas dikenal sebagai alat untuk memformat dokumen yang ditulis menggunakan bahasa markup yaitu HTML. CSS juga dikenal sebagai bahasa style sheet yang bekerja sama dengan HTML untuk membangun sebuah halaman situs jejaring.

Jadi, secara umum kita dapat mengartikan HTML sebagai bahasa untuk menggambarkan struktur halaman situs, sedangkan CSS merupakan bahasa untuk menggambarkan halaman situs, termasuk warna, tata letak, dan font. Hal ini memungkinkan seorang pengembang untuk mengadaptasi presentasi ke berbagai jenis perangkat, seperti layar besar monitor, layar kecil tablet atau smartphone, hingga mesin cetak (printer). CSS tidak lagi bergantung pada HTML dan dapat digunakan dengan bahasa markup lainnya.

Kalau kamu sudah belajar HTML maka tahapan selanjutnya adalah mempelajari CSS. Apa itu CSS?

Pengertian CSS

CSS atau kepanjangannya Cascading Style Sheet merupakan bahasa markup yang digunakan untuk mengatur tampilan elemen menjadi lebih indah. 

CSS dipakai untuk mendesain halaman depan atau tampilan website (front end). CSS menangani tampilan dan ‘rasa’ dari halaman website.

Ada banyak hal yang dapat Anda lakukan menggunakan CSS dibandingkan dengan bahasa pemrograman inti seperti HTML dan PHP. Ketika menggunakan CSS, Anda dapat mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis background yang dipakai. 

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. Anda hanya perlu menulis markup untuk situs.

Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.

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.

Sejarah CSS

CSS sendiri dibuat pada tahun 96 oleh W3C (World Wide Web Consortium). Masalah awalnya yaitu dulu HTML tidak dilengkapi dengan tag untuk format halaman. 

Akhirnya dikenalkan lah tag <font> pada versi HTML 3.2 yang menyebabkan banyak masalah. Karena website mempunyai berbagai macam pilihan : 

font

warna background

juga style 

Maka kalau ditulis satu-satu di HTML prosesnya akan lebih lama dan kode akan menjadi lebih panjang. Itulah yang menyebabkan CSS lahir. 

Cara Kerja CSS

Contoh skema cara kerja CSS (Sumber: developer.mozilla.org)

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>.

Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?

Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.

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.

CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs. Untuk membangun sebuah halaman situs dan membuat presentasinya semenarik mungkin, CSS memiliki beberapa langkah cara kerja yang bisa digambarkan sebagai berikut,

• Load HTML, dalam tahap ini browser memuat HTML dari jaringan

• Parse HTML, pada tahap ini terjadi penguraian HTML untuk membuat document object model (DOM) dan memuat CSS. DOM bertindak untuk mewakili dokumen dalam memori komputer. DOM memiliki struktur seperti pohon dan mencakup elemen, atribut, potongan teks dalam bahasa markup yang menjadi simpulnya atau struktur pohon DOM. DOM dapat membantu pengembang untuk mendesain, men-debug, dan memelihara CSS karena DOM adalah tempat di mana CSS dan konten dokumen bertemu.

• Load CSS, peramban atau browser kemudian memuat sebagian besar sumber daya yang akan ditautkan oleh dokumen HTML, seperti gambar atau video sematan. Dalam hal ini kemudian CSS dimuat dan ditautkan.

• Parse CSS, sama halnya HTML, CSS juga kemudian diurai dengan mengurutkan aturan yang berbeda berdasarkan jenis pemilihnya ke dalam bucket yang berbeda seperti elemen, kelas, ID, dan sebagainya. Penyeleksian ini nantinya menentukan aturan mana yang harus diterapkan ke simpul-simpul DOM.

• Render tree, penyeleksian dalam setiap elemen CSS yang akan diterapkan ke simpul DOM sesuai kebutuhannya tadi disebut render tree. Render tree ini diletakkan dalam struktur yang seharusnya muncul setelah aturan dan penyesuaian simpul dan elemen telah diterapkan.

• Display, setelah penyesuaian tadi berjalan dan aturan dijalankan maka CSS dan DOM akan membentuk tampilan visual sebuah halaman situs yang tertampil di layar.

Fungsi CSS Pada Website

Berikut ini adalah beberapa fungsi jika membangun website menggunakan CSS, yaitu : 

#1. Proses Desain Jadi Lebih Cepat

Membuat desain website hanya dengan HTML saja tentu akan sangat memakan waktu dan rumit. Oleh karenanya proses desain akan lebih cepat dan mudah jika dengan CSS. 

Dengan CSS kita bisa mengetikan satu kali fungsi saja untuk digunakan berbagai halaman HTML. Jadi hemat waktu, karena tanpa harus menyalin baris kode proses desain sudah bisa berjalan.

#2. Loading Halaman Lebih Cepat

Dengan CSS kita tidak perlu lagi menuliskan atribut tag HTML di setiap filenya. 

Kita cukup menulis satu aturan CSS lalu menerapkannya di berbagai file yang membutuhkan fungsi tersebut hanya dengan memanggilnya menggunakan kode tertentu. 

Nantinya satu file hanya terdapat sedikit baris kode, sehingga proses loading website menjadi lebih cepat. 

#3. Mudah di Maintenance

Karena terpisah dari HTML maka proses pemeliharaannya sangat mudah. Misalkan kita ingin update tampilan di halaman tertentu atau semua halaman website, maka tinggal ubah fungsi stylenya di file CSS saja. Otomatis pasti akan berubah. 

#4. Style Lebih Beragam

Karena memang dikhususkan untuk mendesain tampilan HTML, maka fungsinya otomatis akan lebih beragam dibandingkan kita mendesain hanya dengan kode-kode HTML saja. 

#5. Responsive di Berbagai Perangkat

Tidak usah takut ketika menggunakan CSS website kita tidak bisa responsive. Karena CSS ini sudah kompatibel dengan berbagai perangkat. 

Mengapa perintah CSS diperlukan?

Perintah CSS atau CSS functions diperlukan untuk mengatur warna, ketebalan font, dan lain sebagainya. Adapun berbagai perintah atau CSS functions ini antara lain adalah:

CSS Function	Deskripsi
attr()	Mengembangkan nilai atribut dari elemen yang dipilih
calc()	Memungkinkan pengembang untuk melakukan perhitungan atau penentuan nilai properti CSS
counter()	Mengembalikan nilai saat ini
cubic-bezier()	Mendefinisikan kurva Cubic Bezier
hsl()	Mendefinisikan warna menggunakan model Hue-Saturation-Lightness (HSL)
hsla()	Mendefinisikan warna menggunakan model Hue-Saturation-Lightness-Alpha (HSLA)
linear-gradient()	Menentukan gradien linier sebagai gambar latar belakang, umumnya minimal dua warna di atas dan bawah
radial-gradient()	Menentukan gradien radial sebagai gambar latar belakang, umumnya dua warna dari pusat ke tepi halaman
repeating-linear-gradient()	Mengulangi gradien linier
repeating-linear-gradient()	Mengulangi gradien radial
rgb()	Mendefinisikan warna menggunakan model Red-Blue-Green (RGB)
rgba()	Mendefinisikan warna menggunakan model Red-Blue-Green-Alpha (RGBA)
var()	Menyisipkan nilai properti khusus

Perintah atau CSS function ini amat penting secara umum untuk membangun desain pewarnaan halaman situs. Di sisi lain, HTML juga digunakan untuk membuat elemen yang nantinya didesain dengan CSS. Elemen ini dapat berupa paragraf atau hal lainnya yang akan diberi warna atau pertebalan jenis font. Berikut ini adalah contoh pengodean HTML dalam mendesain sebuah tulisan atau tampilan dari jenis Inline CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Inline CSS</title>
    </head>
      
    <body>
        <p style = "color:#009900; font-size:50px;
                font-style:italic; text-align:center;">
            GeeksForGeeks
        </p>
  
    </body>
</html>

Hasil: 

Contoh penulisan kode CSS dan hasilnya (Sumber: geeksforfeeks.org)

Macam CSS dalam kode HTML

Menurut GeeksforGeeks, CSS memiliki tiga tipe yang dipakai untuk mengatur style pada sebuah halaman situs yang mengandung elemen kode HTML. Proses pengodean ini nantinya akan mengatur warna latar belakang halaman situs, ukuran font, kelompok font yang dipakai, warna, dan lain sebagainya. Semua hal ini diterapkan pada properti elemen halaman web agar tampak menarik.

Adapun 3 macam CSS ini adalah sebagai berikut:

1. External CSS

CSS eksternal ini berisi dokumen CSS terpisah yang hanya mencakup style properti dengan atribut-atribut seperti class, ID, heading, dan lain sebagainya. Properti CSS jenis ini ditulis dalam dokumen terpisah dengan ekstensi “.css” dan harus ditautkan ke dokumen HTML menggunakan tag tautan. Hal ini berarti style dalam setiap elemen hanya dapat diatur sekali dan akan diterapkan di seluruh halaman web.

2. Inline CSS

Inline CSS berisi properti CSS di bagian body yang dilampirkan dengan elemen tertentu dalam bentuk sebaris. Jenis style dari CSS ini ditentukan dalam tag HTML menggunakan atribut style khusus. Contoh dari CSS jenis ini dapat dilihat dari contoh pengodean di bagian sebelumnya.

3. Internal CSS

Internal CSS juga dikenal sebagai embedded CSS yang dapat digunakan ketika satu dokumen HTML harus ditata secara unik. Kumpulan aturan CSS harus berada di dalam dokumen HTML di bagian head section. Contoh dari pengodean Internal CSS adalah sebagai berikut:

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS</title>
        <style>
            .main {
                text-align:center; 
            }
            .GFG {
                color:#009900;
                font-size:50px;
                font-weight:bold;
            }
            .geeks {
                font-style:bold;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class = "main">
            <div class ="GFG">GeeksForGeeks</div>
              
            <div class ="geeks">
                A computer science portal for geeks
            </div>
        </div>
    </body>
</html>

Hasil: 

Contoh pengodean jenis Internal CSS (Sumber: geeksforgeeks.org)

Jika disimpulkan, HTML tetaplah menjadi dasar dari pembangunan sebuah halaman web. HTML tetap digunakan untuk menyusun situs web dan aplikasi web. Sedangkan CSS digunakan untuk mengembangkan halaman web dengan menata situs web beserta aplikasinya dalam urusan desain dan penentuan warna maupun font. Pembagian tugas antara HTML dan CSS ini membuat proses pengembangan web lebih efektif dan efisien.