Last Updated on April 12, 2021 by
CSS adalah bahasa markah yang saat banyak sekali digunakan oleh para website developer untuk memanipulasi warna, font, dan layout dari berbagai elemen website. CSS juga dapat digunakan untuk menambahkan animasi atau efek pada website buatan Anda seperti menganimasi background dan efek pada tombol klik.
Namun, tahukah Anda, rupanya CSS memiliki berbagai tipe dan versi. Pada artikel ini, kami akan menjelaskan tentang berbagai jenis dan varian CSS mulai dari tipe CSS.
Table of Contents
Tiga Tipe Gaya CSS untuk Proyek Anda
Ada beberapa cara berbeda untuk mengimplementasikan kode CSS. Cara ini dikenal dengan CSS. Tiga tipe gaya CSS tersedia; Inline CSS, Eksternal CSS, dan Internal CSS. Meskipun masing-masing gaya CSS memiliki tujuan yang sama yaitu menata kode HTML, cara melakukannya berbeda untuk masing-masing. Kami akan menjelaskan berbagai gaya CSS berikut ini.
1. Internal CSS
Tipe ini juga dikenal dengan embedded CSS atau CSS yang disematkan. Internal CSS adalah tipe gaya CSS yang ditujukan untuk menambahkan kode CSS pada dokumen HTML yang berkaitan dengan halaman web tempat kita ingin menambahkan gaya CSS.
Untuk menambahkan CSS internal, seseorang perlu menambahkan tag <style> di dalam bagian <head> dari file HTML. CSS internal ini sangat berguna untuk menata satu halaman web.
Berikut ini kami tampilkan cara menggunakan internal CSS yang dapat Anda ikuti.
- Buka file HTML dan carilah tag <head>.
- Tambahkan <style type = “text / css”> di sini.
- Kemudian, tambahkan kode CSS mulai dari baris berikut.
- Tutup tag <style> menggunakan </style>.
- Simpan file HTML dan selesai.
Internal CSS juga memiliki beberapa kelebihan dan kekurangan sebagai berikut.
Kelebihan:
- Anda tidak perlu mengunggah banyak file karena kode CSS ditambahkan ke file HTML yang sama sesuai dengan halaman web.
- Selektor kelas dan ID dapat digunakan.
Kekurangan:
- Menambahkan kode CSS ke file HTML menghasilkan peningkatan ukuran halaman dan oleh karena itu, hal tersebut mengurangi kecepatan pemuatan.
- Untuk menggunakannya pada beberapa halaman web tidak efektif karena diperlukan untuk menambahkan aturan CSS yang sama untuk setiap halaman web.
- Diperlukan teks sumber untuk mendapatkan informasi terjemahan tambahan.
2. External CSS
Tipe CSS ini dilakukan dengan menautkan halaman web ke file eksternal yang berisi kode CSS. External CSS adalah metode pengaturan CSS yang sangat efektif saat mengembangkan situs web besar. Anda dapat membuat ‘file .css’ eksternal menggunakan beberapa editor teks, seperti Notepad dan Rapid CSS Editor.
Semua perubahan kecil dan besar untuk situs web yang memanfaatkan CSS eksternal dapat dilakukan hanya dengan mengedit satu file .css eksternal.
Kami merangkum cara menggunakan CSS eksternal sebagai berikut:
- Buka editor teks dan buat file baru. Tambahkan kode CSS di sini yang ingin Anda terapkan ke halaman web HTML.
- Simpan file sebagai file .css dan keluar.
- Buka dokumen HTML tempat Anda ingin menerapkan kode CSS.
- Arahkan ke bagian <head> di file HTML dan masukkan referensi ke file CSS eksternal tepat setelah tag <title>.
- Simpan file HTML.
External CSS memiliki beberapa kelebihan dan kekurangan sebagai berikut:
Kelebihan:
- Satu file CSS eksternal dapat digunakan untuk mengatur gaya beberapa halaman web.
- File HTML yang memanfaatkan CSS eksternal memiliki struktur yang lebih bersih dan ukurannya lebih kecil.
Kekurangan:
- Menautkan atau mengunggah beberapa file CSS eksternal dapat menurunkan kecepatan download web dan memengaruhi kinerjanya.
- Halaman web yang membutuhkan file CSS eksternal mungkin tidak dirender secara akurat sampai file yang sama dimuat sepenuhnya.
3. Inline CSS
Tidak seperti tipe gaya CSS sebelumnya, Inline CSS digunakan untuk menata atau mengatur elemen HTML tertentu dan bukan seluruh kode HTML. Untuk menerapkan Inline CSS, seseorang perlu menambahkan atribut style ke setiap tag HTML yang membutuhkan styling.
Mempertahankan situs web hanya dengan menggunakan Inline CSS tidaklah praktis. Hal ini dikarenakan setiap tag HTML harus diberi gaya secara terpisah jika ingin mengikuti tipe gaya Inline CSS.
Oleh karena itu, tidak disarankan untuk menggunakannya. Namun, Inline CSS cukup berguna dalam beberapa scenario pemrograman tertentu. Misalnya, Inline CSS digunakan pada saat:
- Gaya CSS harus diterapkan hanya untuk satu elemen.
- Jika akses ke file CSS tidak tersedia.
- Jenis gaya CSS ini digunakan terutama untuk melihat pratinjau / menguji perubahan serta menerapkan perbaikan cepat ke halaman web / situs web.
Cara Menggunakan Inline CSS
- Buka file HTML di mana Anda perlu menambahkan Inline CSS.
- Kemudian, arahkan ke elemen tempat Anda ingin memasukkan Inline CSS.
- Tambahkan style = “code” ke tag yang Anda inginkan untuk menggunakan Inline CSS. Di sini, kode adalah kode CSS yang perlu Anda tambahkan.
Kelebihan:
- Inline CSS memungkinkan langsung memasukkan kode CSS ke file HTML apa pun.
- Dengan menggunakan Inline CSS, developer tidak perlu membuat dan mengupload file terpisah untuk menambahkan kode CSS.
Kekurangan:
- Menambahkan kode CSS ke setiap elemen HTML sangatlah tidak efektiif dan membuang-buang waktu.
- Memberi style pada beberapa elemen memengaruhi ukuran halaman dan kecepatan pengunduhan.
- Terlalu banyak Inline CSS dapat menyebabkan struktur HTML yang berantakan.
Hal yang perlu Anda ketahui adalah, Anda dapat menggunakan masing-masing dari 3 gaya CSS dalam satu halaman web. Namun, gaya Inline CSS akan menimpa dua gaya CSS lainnya dengan kata lain gaya Inline CSS yang akan diterapkan pada laman tersebut. Prioritas untuk 3 jenis gaya CSS mengikuti urutan seperti di bawah ini.
Inline CSS> Internal CSS> Eksternal CSS
Sederhananya, skema tersebut menjelaskan. ketika gaya CSS internal dan eksternal digunakan untuk halaman web, gaya CSS internal akan menggantikan gaya CSS eksternal.
Selanjutnya kami akan membahas berbagai versi dari CSS. Hingga saat ini CSS hanya memiliki 3 versi, yaitu CSS, CSS2 dan CSS3. Berikut penjelasannya lebih lanjut:
- CSS pada awalnya dirilis pada tahun 1996 dan terdiri dari properti untuk menambahkan properti font seperti jenis huruf dan warna penekanan teks, latar belakang/ background, dan beberapa elemen lainnya. Kemudian, pada tahun 1998 CSS2 dirilis dengan gaya tambahan untuk jenis media lain sehingga dapat digunakan untuk mendesain tata letak halaman. Selanjutnya, CSS3 dirilis pada tahun 1999 dan properti gaya presentasi ditambahkan di dalamnya yang memungkinkan Anda membuat presentasi dari dokumen.
- Tidak seperti CSS2, yang terdiri dari satu dokumen, CSS3 memiliki spesifikasinya yang dibagi menjadi beberapa modul individual, yang membuat CSS3 jauh lebih mudah untuk ditangani.
- Dengan CSS3, para desainer saat ini dapat menggunakan font khusus, seperti yang tersedia di Google Fonts dan Typecast. Sebelumnya, dengan CSS dan CSS2, desainer hanya dapat menggunakan “web safe fonts” karena 100% yakin untuk menggunakan font yang akan selalu ditampilkan sama di setiap mesin.
- Sementara CSS dan CSS2 memiliki ‘simple selectors’, CSS3 menyebut komponen sebagai ‘a sequence of simple selectors’.
- CSS3 datang dengan beberapa pertimbangan desain web utama seperti rounded borders yang membantu dalam membulatkan perbatasan tanpa kerumitan. Hal ini rupanya menjadi nilai tambah yang sangat besar bagi pengembang yang berjuang dengan versi awal batas CSS.
- CSS3 memiliki kemampuan untuk membagi bagian teks menjadi beberapa kolom sehingga dapat dibaca seperti koran. Pada CSS2, pengembang mengalami kesulitan karena standar tidak dilengkapi dengan pemecah teks otomatis sehingga pas di dalam kotak.
Mana yang sebaiknya dipelajari dari 3 versi CSS di tahun 2021?
CSS adalah teknologi pengembangan web yang berdiri di belakang tampilan dan nuansa setiap halaman web. Ia terbukti mampu melakukan lebih banyak hal dengan evolusi terbarunya. Versi CSS terus menjadi lebih baik dan lebih baik seiring waktu yang pada dasarnya berarti platform pemrograman yang ditingkatkan untuk pengembang, menghasilkan desain web yang lebih efisien dan lebih cepat.
Saat kami melewati tahun 2021, bahasa visual web yang paling diminati dan penting adalah CSS3. Ini membantu Anda melibatkan pengguna situs web Anda dengan halaman web yang memuat cepat di semua browser.
CSS3 memungkinkan Anda mengontrol tampilan visual situs web Anda melalui tata letak, pelapisan, tipografi, dan efek khusus. Anda dapat dengan mudah menyesuaikan tema apa pun untuk WordPress atau dapat membuat visual untuk aplikasi atau situs Anda dengan CSS3.
Kesimpulan
CSS memiliki 3 tipe gaya yang dapat Anda gunakan. Masing-masing dari tipe gaya tersebut memiliki kekurangan dan kelebihan. Jika Anda ingin mempelajari CSS Anda dapat menggunakan tipe gaya manapun sesuai dengan kebutuhan dan kemampuan Anda.
Untuk versi CSS sendiri, Anda dapat menggunakan versi yang lebih lama apabila perangkat yang Anda gunakan tidak mendukung versi terbaru. Namun, akan lebih baik jika Anda menggunakan versi terbaru untuk memastikan Anda merasakan fitur-fitur terbarunya juga.
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
