Hai Sobat Vocasia, gimana kabarnya? Semoga selalu baik dan selalu semangat untuk mengembangkan ilmu ya. Kali ini mimin mau ajak sobat buat bareng-bareng tau apa sih itu CSS, terdengar sangat asing kan? Mari simak artikel berikut ini yang akan membahas tentang Apa itu CSS, Fungsi, Jenis, Cara Kerja, dan Contoh dari CSS itu sendiri
1. Apa Itu CSS
Source : medium.com
CSS kepanjangan dari Cascading Style Sheet yang kegunaannya untuk mengatur sebuah tampilan elemen yang tertulis pada bahasa markup, seperti HTML dan XML. CSS ini memiliki fungsi untuk memisahkan konten dari tampilan visualnya pada sebuah situs. Perlu sobat ketahui juga bahwa bahasa markup sendiri sangatlah berbeda dengan bahasa pemrograman.
Pada tahun 1996, W3C (World Wide Web Consortium) membuat dan mengembangkan CSS dengan alasan yang sederhana. Pada waktu itu, HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman sebuah situs, jadi pada waktu itu sobat hanya perlu menulis markup untuk situs.
Setelah kemunculannya dan dikenal sebagai alat untuk memformat dokumen bahasa markup, CSS lantas bekerja sama dengan HTML untuk membangun sebuah halaman situs jejaring. Biasanya para Programmer menyebut HTML sebagai bahasa untuk penggambaran dari struktur halaman situs, sedangkan CSS sendiri merupakan bahasa untuk penggambaran dari halaman situs; mulai dari warna, tata letak, dan juga font.
2. Fungsi CSS
Selain berfungsi untuk mengatur tampilan halaman website berbasis HTML atau bahasa markup lainnya, CSS memiliki beberapa fungsi lainnya loh, di antaranya:
1. Membuat Loading Halaman Situs Website Lebih Cepat
Saat sobat Vocasia mengatur tampilan web dengan menggunakan CSS, kecepatan loading situs sobat akan meningkat. Hal ini dikarenakan sobat dapat menuliskan satu rangkaian kode CSS untuk beberapa halaman situs sekaligus sehingga jumlah barisan kode bisa lebih diminimalkan. Dengan begitu, beban pada saat proses loading situs sobat akan lebih sedikit.
2. Membuat Responsifitas Halaman Situs Website
Dengan menggunakan CSS, memungkinkan seorang Programmer untuk membuat responsivitas akses situs berdasarkan jenis perangkat; seperti saat dibuka di perangkat dengan layar besar (Laptop/PC), perangkat dengan layar kecil (tablet/smartphone), hingga ke mesin cetak (printer). CSS tidak lagi bergantung pada HTML dan dapat digunakan dengan bahasa markup lainnya.
3. Pengelolaan Kode Lebih Mudah
Menggunakan CSS, sobat tidak perlu repot bila ingin merubah kode di setiap halaman untuk mengganti tampilan situs. Contoh kecilnya saat sobat ingin mengubah jenis font yang digunakan untuk semua halaman website. Maka, sobat hanya cukup mengubah kode CSS terkait font dan perubahan tersebut akan diterapkan pada semua halaman.
3. Jenis CSS
CSS memiliki tiga jenis yang bisa sobat Vocasia implementasikan dalam pembuatan tampilan situs. Apa saja jenis dari CSS itu sendiri? Mari simak berikut ini:
1. Internal CSS
Internal CSS dimuat setiap kali situs sedang dalam kondisi refresh page. Untuk kekurangannya sendiri adalah waktu loading semakin lama.
Internal CSS dapat dituliskan pada bagian header file HTML. Ini berfungsi untuk menentukan tampilan sebuah halaman situs. Sebagai contoh, jika sobat ingin agar halaman memiliki background merah dan teks berukuran 35px yang berwarna putih, penulisan kode CSS-nya seperti di bawah ini:
Source: Blog Vocasia – (Kode Internal CSS)
Hasil dari kode diatas
Source : Blog Vocasia – (Hasil Internal CSS)
2. External CSS
External CSS adalah barisan kode CSS yang ditempatkan pada luar dokumen HTML sebagai file dengan ekstensi .css. External CSS berfungsi untuk mengatur semua tampilan pada halaman website yang sobat telah tentukan. Jadi, external CSS sangatlah berguna ketika sobat ingin mengatur tampilan pada beberapa halaman sekaligus.
Agar halaman situs sobat bisa menggunakan external CSS, sobat hanya perlu menambahkan kode pada bagian header code HTML. Berikut contohnya:
Source : Blog Vocasia – (Kode Eksternal CSS)
Dengan barisan kode tersebut, halaman situs sobat akan menggunakan Vocasia_CSS.css untuk mengatur tampilannya.
3. Inline CSS
Jenis CCS ketiga adalah Inline CSS. jenis CSS ini merupakan kode CSS yang dituliskan dalam tags HTML-nya langsung. Jika sobat menggunakan Inline CSS, maka yang terjadi hanyalah mempengaruhi satu baris kode HTML saja; sesuai dengan namanya Inline (dalam baris).
Sebagai contoh, sobat bisa lihat barisan kode di bawah ini:
Source : Blog Vocasia – (Kode Inline CSS)
Dan kode di atas, akan memberikan hasil seperti di bawah ini :
Source: Blog Vocasia – (Hasil Inline CSS)
Nah setelah sobat mengetahui apasaja dan bagaimana masing-masing jenis CSS dibuat serra dampaknya pada halaman situs sobat, saatnya sobat mempelajari bagaimana cara kerja CSS ketika situs sobat dimuat? Mari simak bersama penjelasannya di bawah ini.
4. Cara Kerja CSS
CSS dibuat menggunakan bahasa Inggris yang sederhana berbasis syntax, yang dilengkapi dengan kumpulan rule untuk mengaturnya. Sesuai yang telah mimin jelaskan di atas, HTML sendiri tidak dibuat untuk menerapkan elemen style; hanya untuk markup halaman saja. Serta HTML dirancang hanya untuk mendeskripsikan sebuah konten. Sebagai contoh: <p>Ayo Kursus di Vocasia</p>.
CSS akan bekerja pada saat browser sobat memuat sebuah halaman website, menetapkan pengaturan tampilan pada HTML yang telah ditentukan oleh kode CSS, dan prosesnya meliputi beberapa langkah.
Hal pertama saat sobat membuka sebuah situs, browser akan memuat file kode HTML dan CSS (apabila kodenya ditulis menggunakan external CSS). Selanjutnya, browser merubah keduanya menjadi DOM (Document Object Model).
Setelah file kode HTML dan CSS berhasil diubah menjadi DOM, maka browser sobat akan melakukan rendering. Proses rendering sendiri adalah ketika browser akan menerapkan pengaturan untuk kode CSS pada elemen-elemen yang ada di HTML sehingga akan menghasilkan halaman situs web yang tampil pada layar perangkat sobat semua.
Di bawah ini merupakan skema sederhana dari cara kerja CSS
Source : MDN Web Docs
5. Contoh CSS
Mimin berikan beberapa contoh penerapan kode CSS dengan mudah:
1. Membuat Format/Tag Paragraf
Misalnya sobat ingin semua format/tag paragraf dalam sebuah halaman situs memilki ukuran 134% dan berwarna merah, sobat cukup mengimplementasikan kode di bawah ini:
p { font-size: 134%; color: red; }
2. Merubah Warna Tautan/Link
Sobat juga dapat merubah warna tautan (link) dengan menggunakan CSS. Sebagai catatan, warna dari tautan (link) yang ditentukan oleh CSS ada empat, di antaranya:
- Normal: warna tautan/link yang belum pernah dibuka dan tidak diklik
- Visited: warna tautan/link yang sudah pernah dibuka
- Hover: warna ketika sobat meletakkan kursor di atas tautan/link
- Active: warna tautan/link ketika sobat klik
Untuk menentukan keempat warna diatas, sobat bisa menggunakan kode di bawah ini, lalu berikan warna yang sobat inginkan setelah tags color:.
a:link { color: blue; } a:visited { color: red; } a:hover { color: green; } a:active { color: teal; }
3. Membuat Format/Tag Untuk Judul/Heading
Format/Tag judul digunakan untuk membuat sebuah judul pada halaman situs. Tag heading pada HTML ada enam tingkatan, yaitu:
Source : Blog Vocasia – (Tag Heading)
Sebagai contoh, membuat heading 1 berwarna biru; cara melakukannya melibatkan kode dan penempatan yang digunakan hampir sama dengan yang digunakan untuk paragraf. Oleh karena itu, sobat cukup mengimplementasikan kode di bawah ini:
<h1 style=”color:red;”>Heading 1 paling besar</h1>
5. Menjadikan Huruf Kapital Menjadi Huruf Kecil
Membuat sebuah paragraf hanya berisi huruf kecil saja? Sobat cukup menambahkan class=”smallcaps” dengan diikuti oleh teks yang diinginkan, sebagai contoh:
<p class=”smallcaps”>VOCASIA</p>
Walapun teks di atas bertuliskan VOCASIA dengan menggunakan huruf kapital, tentu hasil saat dijalankan akan bertuliskan huruf kecil semua; dan kode di atas merupakan jenis Inline CSS.
Demikianlah Sobat Vocasia terkait pengenalan kita bersama seputar CSS ini. Sobat semuanya sudah mengenal pengertian, fungsi, dan jenis-jenis CSS. Selain itu, sobat juga sudah menyimak beberapa contoh CSS. Untuk para sobat Vocasia yang ingin belajar dan mendalami tentang Web Desain HTML dan CSS, yuk mari ikut Kursus Web Design Seri HTML dan CSS: desain web menggunakan HTML dan CSS! Dengan mengikuti kursus di Vocasia, sobat akan dipertemukan dengan para pengajar hebat, lho. Klik tombol di bawah ini untuk mengikuti kursusnya
Leave a Reply