Anak Males – Kali ini kita akan belajar CSS, kita mulai dari dasar dasarnya terlebih dahulu, seperti apa itu pemrograman CSS dan lain lain.
Jadi, jika kamu ingin fokus pada pengembangan web bagian depan (front-end), maka pemahaman tentang CSS sangat penting.
Namun, jika kamu lebih tertarik pada pengembangan web bagian belakang (back-end), cukup tahu saja sudah cukup.
Biasanya, tugas seorang front-end developer adalah membuat halaman web sesuai dengan desain yang dibuat oleh seorang desainer.
Jadi, tanpa CSS, kita tidak akan bisa membuat web sesuai dengan desain yang diinginkan. Oleh karena itu, belajar CSS sangat penting.
Di tutorial ini, kita akan mempelajari CSS dari dasar, mulai dari sejarahnya hingga bisa membuat CSS sendiri. Oke, mari kita mulai belajar!
Apa Itu CSS ?
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur bagaimana sebuah dokumen HTML atau XML terlihat.
Dengan CSS, kamu bisa mengatur hal-hal seperti warna, font, tata letak, dan banyak lagi pada sebuah dokumen web tanpa harus merubah isi dokumen tersebut.
Ini berarti kamu bisa dengan mudah mengubah tampilan seluruh situs web hanya dengan mengubah satu file CSS, tanpa perlu mengubah setiap halaman secara individual.
Selain itu, CSS juga memungkinkan kamu untuk memisahkan konten dari presentasi, sehingga lebih mudah untuk memelihara dan mengembangkan situs web.
Sejarah CSS
Sejarah CSS dimulai pada tahun 1980-an, ketika Tim Berners-Lee, salah satu pendiri World Wide Web (WWW), mulai memikirkan cara untuk membuat dokumen web lebih mudah dibaca oleh manusia.
Pada awalnya, dokumen web hanya terdiri dari teks yang ditampilkan dalam warna hitam di layar monitor. Namun, dengan berkembangnya teknologi, manusia mulai ingin menampilkan dokumen web dengan cara yang lebih estetis dan mudah dipahami.
Untuk mencapai hal ini, Tim Berners-Lee dan kawan-kawannya mulai mengembangkan bahasa markup (HTML) yang memungkinkan pengguna untuk menambahkan tag ke dalam dokumen web untuk mengatur tampilan dan gaya dari teks yang ditampilkan.
Namun, dengan menggunakan HTML saja, presentasi dan konten dari dokumen web tercampur satu sama lain, sehingga sulit untuk dikelola dan diperbaharui.
Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) merilis CSS pada tahun 1996 sebagai cara untuk memisahkan presentasi dari konten dalam dokumen web.
Dengan menggunakan CSS, pengguna dapat menulis style sheet yang terpisah dari dokumen HTML, yang kemudian dapat diterapkan ke dokumen HTML dengan cara yang lebih mudah dan terstruktur.
Ini membuat proses pemeliharaan dan pengembangan situs web menjadi lebih mudah, karena Anda dapat dengan mudah mengubah tampilan seluruh situs web dengan cara mengubah satu file CSS, tanpa perlu mengubah setiap halaman web secara individual.
Sejak pertama kali diperkenalkan, CSS telah mengalami banyak pembaharuan dan perkembangan, dengan versi-versi baru yang dirilis secara berkala oleh W3C.
Perkembangan Versi CSS
Berikut adalah sejarah CSS yang dapat memberikan gambaran mengenai perkembangan CSS sejak pertama kali diperkenalkan:
- Tahun 1996: World Wide Web Consortium (W3C) merilis CSS1 sebagai standar pertama untuk mengatur tampilan dan gaya dari dokumen web. CSS1 memungkinkan pengguna untuk mengatur aspek-aspek seperti warna, font, margin, padding, dan banyak lagi dari sebuah dokumen web.
- Tahun 1998: W3C merilis CSS2, yang merupakan pembaharuan dari CSS1 dengan menambahkan fitur-fitur baru seperti layering, positioning, dan pembuatan tabel.
- Tahun 2011: W3C merilis CSS2.1, yang merupakan pembaharuan dari CSS2 dengan memperbaiki beberapa bug dan kekurangan dari versi sebelumnya.
- Tahun 2012: W3C merilis CSS3, yang merupakan pembaharuan besar dari CSS2 dengan menambahkan fitur-fitur baru seperti media queries, font effects, dan banyak lagi. CSS3 juga dibagi menjadi beberapa modul yang terpisah, sehingga pengguna dapat memilih untuk menggunakan fitur-fitur yang diinginkan saja.
Saat ini, CSS telah menjadi standar industri yang umum digunakan untuk mengatur tampilan dan gaya dari dokumen web. CSS dapat digunakan di sebagian besar browser web yang ada, sehingga memungkinkan pengguna untuk menampilkan dokumen web dengan cara yang sesuai dengan keinginan mereka.
CSS juga merupakan bagian dari teknologi responsive web design, yang memungkinkan situs web untuk menampilkan dengan baik di berbagai perangkat seperti smartphone, tablet, dan desktop.
Tips Belajar CSS
Berikut beberapa saran yang bisa membantumu belajar CSS:
1. Belajar Dari Dasar Dasar CSS
Pertama, mulailah dengan memahami dasar-dasar CSS (Cascading Style Sheets), termasuk cara menyisipkan CSS ke dalam halaman HTML.
Dasar-dasar dari CSS adalah sebuah bahasa yang digunakan untuk mengontrol tampilan elemen HTML dalam sebuah halaman web.
CSS dapat digunakan untuk mengatur segala sesuatu, mulai dari warna teks, ukuran font, dan jarak antar elemen HTML, hingga layout halaman web secara keseluruhan.
Nanti kedepannya, kita akan belajar itu semua. Santai.
2. Cari Tutorial Online
Kamu bisa belajar melalui tutorial online atau membaca dokumentasi untuk mempelajari css. Tutorial adalah artikel atau video yang menjelaskan bagaimana cara menggunakan CSS dalam bahasa yang mudah dipahami.
Tutorial ini biasanya memiliki contoh kode yang dapat Anda ikuti dan mencoba sendiri untuk memahami bagaimana CSS bekerja.
Sedangkan dokumentasi resmi adalah sumber daya yang diterbitkan oleh pengembang CSS yang menjelaskan secara rinci tentang setiap elemen dan properti yang tersedia dalam CSS.
Dokumentasi ini biasanya lebih teknis dan terperinci dibandingkan tutorial, namun sangat bermanfaat untuk memahami spesifikasi CSS secara lebih mendetail.
Beberapa situs yang dapat membantu Anda dalam mempelajari CSS adalah anakmales.com dan w3schools.com.
Kedua situs ini menyediakan tutorial dan dokumentasi resmi yang bermanfaat bagi pemula maupun yang sudah berpengalaman dalam mempelajari CSS.
3. Praktik
Point ketiga menyarankan untuk belajar dengan mempraktikkan. Ini berarti setelah kita memahami dasar dasar CSS, kita harus mencoba menerapkannya dengan membuat halaman web sederhana.
Praktik ini penting karena membantu kita memahami bagaimana CSS bekerja dan bagaimana kita dapat menggunakannya untuk mengontrol tampilan halaman web.
Jadi, setelah kita tahu bagaimana cara menuliskan aturan CSS dan bagaimana cara menyisipkannya ke dalam halaman HTML, cobalah buat halaman web sederhana dengan mengubah warna, ukuran font, dan lain-lain.
Ini juga akan membantu kita untuk terbiasa dengan sintaks CSS dan mengembangkan intuisi kita dalam menuliskan aturan CSS yang efektif.
Jadi, sebaiknya jangan hanya membaca teori saja, tapi cobalah terapkan apa yang sudah kita pelajari dengan membuat halaman web sederhana.
4. Manfaatkan Inpect Elemen
“Inspect Element” adalah fitur yang terdapat di browser seperti Google Chrome, Mozilla Firefox, dan lainnya yang memungkinkan kamu meneliti bagaimana sebuah halaman web dibuat dan ditampilkan di browser.
Fitur ini sangat berguna bagi para web developer atau desainer web yang ingin memahami bagaimana sebuah halaman web dibuat dan bagaimana elemen HTML dan CSS yang digunakan mempengaruhi tampilan akhir.
Untuk menggunakan fitur “Inspect Element”, kamu bisa mengklik kanan pada elemen yang ingin kamu tinjau di halaman web, lalu pilih “Inspect” atau “Inspect Element” dari menu yang muncul.
Ini akan membuka panel “Inspector” di bagian bawah browser yang menampilkan kode HTML dan CSS yang dipakai untuk menampilkan elemen tersebut.
Kamu bisa meneliti bagaimana elemen terkait dengan aturan-aturan CSS yang mendasari dan mengubah nilai-nilai dari aturan-aturan tersebut untuk melihat bagaimana perubahan tersebut mempengaruhi tampilan elemen.
Manfaat Belajar CSS
Berikut ini adalah beberapa manfaat ketika kita belajar dasar dasar CSS:
Mempermudah pengelolaan tampilan website
Dengan CSS, kamu bisa mudah mengatur tampilan seluruh halaman web dari satu tempat. Misalnya, jika kamu ingin mengubah warna atau ukuran font di seluruh halaman web, kamu hanya perlu mengubah aturan CSS yang tepat di file CSS eksternal atau di dalam style tag di head tag HTML. Ini lebih efisien daripada harus merubah masing-masing elemen HTML secara terpisah.
Memudahkan pemeliharaan website
Dengan CSS, kamu bisa memisahkan kode HTML yang bertanggung jawab atas struktur dan isi halaman web dengan kode CSS yang bertanggung jawab atas tampilan halaman web. Ini memudahkan pemeliharaan website karena kamu bisa mudah mengubah tampilan website tanpa perlu menyentuh kode HTML yang mungkin sudah rumit.
Mempercepat loading website
CSS yang disimpan di file eksternal hanya akan dimuat sekali oleh browser, sehingga halaman web yang menggunakan file CSS eksternal akan lebih cepat dimuat dibandingkan dengan halaman web yang menggunakan banyak atribut style di dalam elemen HTML. Ini akan mempercepat loading website dan meningkatkan pengalaman pengguna.
Mempermudah penggunaan gaya yang sama di beberapa halaman web
Dengan menggunakan file CSS eksternal, kamu bisa dengan mudah menerapkan gaya yang sama di beberapa halaman web dengan hanya menyertakan file CSS eksternal yang sama di dalam masing-masing halaman. Ini akan menghemat waktu dan usaha dibandingkan dengan harus menuliskan aturan CSS yang sama di setiap halaman secara terpisah.
Mempercantik tampilan website
Dengan CSS, kamu bisa dengan mudah mengatur tampilan website sesuai keinginanmu. Kamu bisa mengubah warna, ukuran font, jarak antar elemen, dan lain-lain untuk mempercantik tampilan website. CSS juga memungkinkan kamu untuk menggunakan efek visual seperti gradien, transisi, dan animasi untuk memberikan tampilan yang lebih menarik pada websitemu.
Penutup
Baiklah, mungkin kita cukupkan untuk tutorial css dasar kali ini sampai jumpa di tutorial selanjutnya.