Apa itu CSS : Pengertian, Peran, Fungsi dan Macamnya

Apa itu CSS : Pengertian, Peran, Fungsi dan Macamnya

Apa itu CSS : Pengertian, Peran, Fungsi dan Macamnya
Apa itu CSS : Pengertian, Peran, Fungsi dan Macamnya


Hallo sahabat ruangcoder, artikel kali ini tentang Apa itu CSS : Pengertian, Peran, Fungsi dan Macamnya sahabat ruang coder Ingin mulai belajar CSS? tetapi bingung harus memulai dari mana? Sobat bisa memulainya dengan membaca artikel yang admin ketik  ini. Di sini admin akan bahas segala sesuatu tentang CSS. Sobat tidak perlu khawatir, pembahasan dalam artikel yang ditulis ini dimulai dari hal-hal yang basic tentunya. seperti mengenai pengertian dan peran dari CSS. Tanpa banyak basa - basi lagi, mari mulai mengenal dan belajar CSS.

Pengertian CSS

Nah saat belajar CSS sobat perlu tahu dong apa itu CSS? sobat tentu harus paham betul tentang pengertiannya. Sebenarnya apa sih CSS? Jadi sobat, CSS adalah singkatan dari Cascading Style Sheets. Maka jika diterjemahkan ke bahasa Indonesia secara harfiah, CSS yang berarti “lembar penataan menurun”. Namun secara konteks, Cascading Style Sheets adalah suatu kumpulan perintah yang digunakan untuk menjelaskan sebuah tampilan dari halaman situs web dalam mark-up language. Mark-up language atau suatu bahasa markah adalah bahasa pemrograman yang biasanya digunakan untuk membuat sebuah website.

Kalau sobat sudah mengenal HTML, nah itulah salah satu contoh bahasa mereka jika sobat belum mengenal HTML sobat bisa baca disini. HTML atau singkatan dari Hypertext Mark Up Language. HTML ini istilahnya ada di “balik layar” tampilan halaman web yang sobat akses. Tatanan sebuah situs web akan berantakan tanpa adanya HTML

CSS dan HTML

Nah sobat apakah tau, apa hubungannya HTML dengan CSS? Keduanya sangat berhubungan erat tentunya. CSS adalah kode-kode yang dipakai untuk mendesain suatu halaman HTML. Jika HTML diibaratkan sebagai seorang manusia, maka CSS adalah sebuah pakaian yang membuat penampilan menjadi semakin menarik atau biasa admin sebut dengan style trendy. CSS itu sendiri akan membantu para web designer untuk mengubah tampilan teks (baik dari bentuk dan ukuran font maupun warnanya) singkatnya untuk mendesign layout, menambahkan gambar, hingga mengubah latar belakang sebuah halaman HTML.

Keberadaan CSS bisa sobat lihat dengan adanya atribut warna teks. Perlu sobat tahu disini CSS memberi suatu perintah berupa teks berwarna biru melalui sebuah tag <span> dengan atribut yang berisi class=”warna”. Jadi setiap tag <span> muncul, teks yang mengikutinya akan menjadi berwarna biru. Begitu juga demikian saat sobat ingin mengganti warnanya. Tinggal mengganti CSS pada tag <style> dari “blue” ke warna lain, maka teks yang awalnya berwarna biru akan berubah warna.

Setelah sobat memahami hubungan antara CSS dengan HTML, mari sobat lanjutkan belajar CSS ke point selanjutnya yaitu tentang fungsinya.

Belajar CSS lebih mudah dengan mengetahui sebuah fungsinya

Sebenarnya untuk fungsi CSS sobat sudah bisa mengetahuinya dari penjelasan yang admin ketikkan sebelumnya. Pada dasarnya,Sebuah CSS berfungsi untuk mendesain, membentuk, serta mengubah tampilan halaman suatu website. CSS juga dapat bekerja dan berlaku melalui tag HTML. Dengan adanya CSS, tag HTML yang sederhana dapat sobat ubah sehingga tampilan laman website pun akan menjadi terlihat lebih menarik dan efisien.

Cara kerja CSS

Untuk cara kerjanya sendiri sobat bisa melihat CSS akan beroperasi melalui sebuah tag <style> dengan atribut class warna. Dengan adanya suatu CSS pada HTML tersebut maka pengaturan warna teks akan menjadi lebih mudah. Saat sobat ingin mengganti warna suatu teks cukup mengetikkan tag <span> tanpa sobat harus menulis ulang perintah.  Jadi bisa disimpulkan bahwa CSS akan menghemat waktu sobat dalam menggunakan perintah-perintah yang efisien.

Hal ini pun bisa terjadi karena CSS sendiri dikembangkan untuk bisa mengubah tampilan laman website sobat tanpa harus mengganti isi konten dari laman website sobat. Jika sobat kembali pada perumpamaan manusia dan pakaian di point sebelumnya, dengan CSS sobat tidak mengubah bentuk manusianya tapi hanya mengganti pakaiannya. Dengan begitu untuk mengubah dan memprogram ulang tampilan website pun sobat bisa lakukan dalam waktu yang relative lebih cepat.

Peran CSS

Dari sini sobat bisa menyimpulkan bahwa suatu peran CSS untuk sebuah website sangatlah begitu penting. Tanpa adanya CSS, tampilan sebuah website akan terlihat membosankan atau bahkan membutuhkan waktu lama untuk loading. Bayangkan saja ketika sobat hanya bisa bergantung pada HTML untuk membuat sebuah situs. Bukan cuma tampilan situs akan “hambar” hampa kek hatimu, tapi sobat juga butuh waktu lebih lama karena harus berulang kali mengetikkan suatu perintah.

Keuntungan belajar CSS

Dengan belajar CSS sobat (sebagai seorang web designer) bahkan bisa lebih mudah mengendalikan website. Sobat tentu tidak harus pusing-pusing mengutak-atik HTML saat sobat harus memprogram ulang tampilan laman. Bahkan pada CSS tingkat lanjut, sobat bisa mengatur suatu website lewat medium yang lain seperti suara. Keuntungan lain dari belajar CSS adalah tingkat compatibility yang begitu tinggi. Sehingga CSS kompatibel dengan kebanyakan browsers dan sangat user-friendly.

Menurut kutipan dari website teknologi informasi Amerika Serikat, Lifewire, menguasai CSS bahkan bisa mendapatkan pemasukan tambahan. Sobat bisa menjadi seorang freelance web designer atau bahkan menjual jasa sobat pada pihak yang membutuhkan. Terlebih lagi, CSS juga akan melatih sobat untuk membuat website yang beragam. Jadi sobat bisa membuat bervariasi website tanpa sobat sendiri harus menghabiskan waktu untuk belajar ulang.

Macam-macam CSS

Saat belajar CSS sobat perlu mengetahui bahwa CSS itu sendiri dibagi menjadi beberapa macam dengan penggunaan yang berbeda-beda tentunya. Hal ini dimaksudkan agar sobat mencoba mempraktikkan teori yang sudah sobat pelajari tidak mengalami kekeliruan. Setidaknya perlu sobat ketahui bahwa ada tiga macam CSS yang sering digunakan oleh web designer. Berikut penjelasannya.



  1. Inline style sheet 
  2. Pertama perlu sobat ketahui ada inline style sheet. Sederhananya, Dimana CSS model ini adalah CSS dengan perintah pemrograman yang letaknya ada pada objek. Misalnya sobat ingin mengubah sebuah tulisan pada laman tertentu di website milik sobat, inline style sheet CSS harus menempel pada elemen tulisan tersebut. Sobat cukup menambahkan tag <style> saja untuk menerapkan CSS ini.

  3. External style sheet 
  4. Selain inline style sheet yang di ketikkan sebelumnya ada juga external style sheet. Dimana CSS ini letaknya berbeda dengan laman yang akan diubah. Cara ini lebih praktis daripada inline style sheet karena sobat sendiri bisa menghemat ruang dan bisa digunakan berulang-ulang untuk laman web yang berbeda. Sobat bisa mengenali CSS tipe ini lewat sebuah tag <link rel> Tag ini akan menghubungkan halaman coding sobat pada external style sheet CSS yang terpisah.

  5. Embedded style sheet 
  6. Dan yang perlu sobat ketahui Terakhir ada embedded style sheet. Dimana CSS model ini sama seperti inline style sheet, sama-sama berada pada satu laman coding. Maka tidak sobat jangan heran jika embedded style sheet terkadang disebut dengan internal style sheet. Dan biasanya CSS ini diapit oleh tag <head> </head> dan diawali dengan tag <style> Embedded style sheet sering digunakan untuk mengatur suatu laman web dengan tampilan yang unik. Misalnya dalam satu paragraf bertuliskan ada kalimat yang berbeda dan hal tersebut terus berulang.

Penutup

Pada kesimpulannya CSS berperan penting dalam mendesign sebuah layout dari halaman website agar tidak terlihat monoton ataupun hampa seperti hati kalian, jadi pada artikel kali ini sekian sampai disini saja, semoga bermanfaat buat kalian , apabila ada pengetikan artikel yang kurang mohon dimaafkan, sekiranya artikel ini bermanfaat jangan lupa di share ya, sampai jumpa di artikel yang akan mendatang.

Anda mungkin menyukai postingan ini