Ingin menguasai website tapi masih bingung dengan istilah apa itu css? Selain HTML dan JavaScript, CSS adalah ilmu yang wajib dikuasai oleh seorang web-developer.
Untung saja kamu berkunjung ke laman ini, tim Panuwun akan menyediakan berbagai info penting mengenai CSS.
Mulai dari pengertian apa itu CSS, contoh CSS, fungsi CSS hingga kegunaan dan cara kerjanya akan dibahas tuntas di artikel Panuwun berikut.
apa itu css via freepik / css /
Apa Itu CSS?
CSS adalah singkatan dari istilah Bahasa Inggris “Cascading Style Sheet“. Istilah tersebut bisa diartikan sebagai “lembar penataan menurun”.
Pengertian css menurut para ahli:
CSS adalah bahasa markup atau kode khusus yang dipakai untuk mengatur dan mempercantik tampilan elemen sebuah situs.
Dalam hal bentuk, CSS hampir sama dengan HTML yakni berupa bahasa markup atau kode pemrograman.
Hanaya saja, kedua bahasa tersebut memiliki fungsi yang berbeda.
Apa Perbedaan CSS dan HTML?
CSS dan HTML sebetulnya sangat berkaitan satu sama lain. Namun, kedua kode pemrograman ini tidak sepenuhnya sama.
Keduanya dibedakan dari fungsinya terhadap website.
Jika HTML berfungsi dalam pembuatan website secara keseluruhan, css lebih fokus pada aspek untuk memformat halaman.
HTML dan css juga bertugas untuk saling melengkapi.
Ketika HTML tidak bisa digunakan untuk mengelola aspek seperti background, warna dan font.
CSS lebih unggul karena dapat memperbaiki style website. Tak hanya itu, css juga dapat menyeempurnakan tampilan font, background, dll dengan sangat baik.
Bagaimana kamu bisa melihat adanya penggunaan css dalam suatu website?
Selain dari tampilan situs yang estetik. Keberadaan kode CSS bisa diihat melalui atribut berupa warna teks.
Bagaimana Sejarah CSS & Perkembangannya?
Sejarah css berawal ketika pertama kali diciptakan pada tahun 1996.
CSS merupakan teknologi internet yang menjadi slaah stau proyek dari konsorsium WWW atau W3C.
Teknologi tersebut kemudian dikembangkan 5 tahun kemudian di SGML. Perkembangan css dapat dilihat melalui versi nya berikut ini.
Level 1 CSS (CSS1)
CSS Level 1 atau CSS1 diperkenalkan oleh W3C pada 1996.
Untuk versi ini, beberapa aspek yang sudah dapat didukung oleh CSS1 yakni:
- Format
- Warna font teks
- Dll
Level 2 CSS (CSS2)
Pada Mei 1998, W3C mempublikasikan CSS versi 2 yang dinamai CSS2.
CSS2 memiliki penambahan fungsi untuk peletakkan elemen.
Baru-baru ini W3C memperbaiki versi tersebut dan menciptakan CSS3 dengan kemampuan yang lebih lengkap.
Perbedaan css2 dan css3 terletak pada fitur penggunaan serta elemen yang lebih banyak.
Apa Fungsi CSS?
Mungkin kamu sudah sedikit menangkap apa itu fungsi css dari penjabaran di atas bukan?
Yups, css memiliki fungsi utama untuk mendesian, mengubah tampilan serta menghias sebuah halaman situs/website.
Apakah hanya itu manfaat css? Tentu tidak.
Manfaat css lainnya adalah untuk memisahkan konten website dari tampilan visual pada sebuah situs.
Bagaimana Cara Kerja CSS?
Belajar css akan lebih baik ketika kamu memahami cara kerja kode pemrograman tersebut.
Lantas, bagaimana css bekerja?
Sederhananya, css terdiri dari 2 aspek utama yaitu selector & declaration block.
Kamu bisa memilih elemen yang dikehendaki lalu mengambil tindakan deklarasi untuk elemen tersebut.
Selector bertugas mengarahkan elemen menuju HTML yang akan dirubah tampilannya.
Sementara declaration block akan memisahkannya menggunakan tanda ; (titik koma).
Secara umum, ada 3 teknik untuk menggunakan kode css yang bisa diaplikasikan pada situs kamu.
- sebagai elemen / atribut dari HTML
- sebagai bagian dari tag (biasanya diletakkan di antara tag)
- sebagai file terpisah (biasanya di bawah elemen title di HTML).
Apa Kelebihan CSS?
Kelebihan CSS dapat dilihat langsung pada website yang memakai fitur tersebut.
Salah satunya adalah css memberi tampilan warna yang lebih estetik dan cantik.
Jika kamu menemukan situs dengan tampilan warna hitam/putih, sudah jelas situs tersebut hanya memakai HTML. Tanpa menggunakan CSS.
Kelebihan css adalah dapat mengatur tampilan dan style seluruh aspek pada sebuah situs.
Dengan adanya CSS, kamu tidak perlu lagi mendeskripsikan setiap tampilan dari seluruh elemen secara berulang.
Kode CSS dapat meminimalisir serta mempersingkat proses tersebut.
Kelebihan lain CSS adalah pilihan kustomisasi yang sangat banyak.
Hal ini memungkinkan kamu untuk mengaplikasikan berbagai style pada sebuah halaman HTML.
Tipe CSS dan Kegunannya
Gimana? Sudah paham kegunaan css? Penjelasan di atas mungkin masih cukup umum ya.
Untuk lebih memudahkan, kamu perlu mengetahui beberapa tipe css dengan kegunaannya.
Ya, beda kode css juga memiliki kegunaan yang berbeda pula. Berikut tipe css dengan kegunaan masing-masing.
1. Inline Style Sheet
CSS tipe ini dapat ditemukan pada objek karena memiliki perintah pemrograman yang diterapkan langsung di objek tampilan.
Kode css ini harus ditempelkan pada elemen atau tulisan tertentu agar dapat digunakan.
Contohnya adalah ketika sebuah teks biasa yang hendak diganti warna.
Seperti apa contoh css tipe ini?
Penggunaannya cukup mudah, yakni dengan menambahkan tag <style>.
2. External Style Sheet
Berbeda dengan tipe inline, CSS ini tipe external style letaknya berada di luar objek.
Artinya, kode css yang akan digunakan harus diletakkan di laman yang berbeda.
Cara ini dianggap lebih mudha dan praktis dibanding inline style shtee, sebab dapat menimilasir penggunaan ruang.
Tak hanya itu, tipe ini juga bisa digunakan lebih dari satu kali untuk berbagai objek bahkan untuk halaman situs yang berbeda-beda.
Bagaimana cara kita mengetahui css tipe eksternal ini?
Eksternal Style Sheet bisa dikenali melalui tag <linkrel>.
Tag tersebut dapat menghubungkan laman coding dengan tipe css yang tidak berada pada satu area.
3. Embedded Style Sheet
CSS tipe ini bisa dibilang sama dengan tipe inline style sheet. Yang membuatnya sama adalah karena berada di satu halaman coding.
Hal ini membuat web developer kesulitan untuk membedakan kedua tipe css tersebut.
Namun, tidak sulit untuk membedakan antara inline dengan embedded style.
CSS embedded style sheet biasanya diawali oleh tag html >style> dan diapit dengan tag html berupa <head> </head>.
Apa fungsi css tipe ini? Embedded style sheet digunakan untuk mengatur halaman situs agar memiliki tampilan yang unik.
Kesimpulan
Dari uraian di atas dapat disimpulkan bahwa css adalah bahasa markup yang fungsi utamanya adalah untuk mengatur tampilan sebuah halaman web/situs.
Dengan fungsi tersebut, css memiliki peran yang sangat besar dalam proses pembuatan website, selain HTML dan javascript.
Memahami apa itu css dan bagaimana cara kerjanya semoga dapat membantu kamu untuk menciptakan situs yang baik dan menarik.
Jangan lupa untuk memaksimalkan penggunaan css pada website. Untuk apa? Tentunya agar website kamu cantik dan nyaman digunakan oleh pengunjung.