CSS adalah elemen kunci yang mengubah struktur dasar HTML menjadi karya seni visual, memberikan nuansa dan estetika yang membuat website lebih menarik sekaligus fungsional.

Dengan CSS, kamu bisa mengontrol tampilan berbagai elemen HTML, mulai dari warna, font, sampai layout, membuat audiens mendapatkan pengalaman yang lebih berkesan. Jika HTML adalah kerangka bangunan, CSS merupakan cat dan dekorasi yang mempercantik bangunan tersebut.

Dalam artikel ini, kita akan belajar CSS secara mendalam serta bagaimana kamu bisa memanfaatkannya untuk menciptakan desain web yang menarik. Selamat membaca!

Persiapan Sebelum Belajar CSS

Sebelum memulai, kamu perlu mengetahui bahwa memahami struktur dan sintaks HTML adalah kunci untuk mempelajari CSS.

HTML menggunakan tag untuk menentukan elemen seperti paragraf, judul, gambar, dan lain-lain. Misalnya, tag < p > dipakai untuk paragraf. Sementara tag < h1 > berfungsi untuk judul utama. Jika kamu sudah mengerti bagaimana tag dan elemen HTML bekerja, kamu akan lebih mudah memahami tutorial CSS dan menerapkannya dalam proyekmu.

Sebagai web developer, kamu akan sering bekerja dengan HTML dan CSS secara bersamaan. Contohnya, saat kamu ingin mengubah tampilan teks atau gambar, kamu akan menggunakan CSS untuk melakukannya. Namun, sebelum itu, kamu perlu memastikan bahwa elemen HTML sudah ada dan ditempatkan dengan benar.

Jadi, sebelum kamu terjun ke dalam CSS tutorial, pastikan kamu sudah memiliki pemahaman yang baik tentang HTML. 

Aturan Penulisan CSS

Jika kamu sudah memahami dasar-dasar HTML dan siap melanjutkan belajar CSS, ada beberapa aturan penulisan yang perlu kamu ketahui.

Dalam CSS, ada beberapa komponen utama yang membentuk kode, yaitu selector, declaration, property, dan value. Mari kita bahas satu per satu.

• Selector: selector adalah cara untuk menargetkan elemen HTML yang ingin kamu ubah tampilannya menggunakan CSS. Di CSS, selector bisa berupa nama tag HTML, class, ID, dan berbagai jenis selector lainnya.

Sebagai contoh, untuk menargetkan semua elemen < p >, kamu akan menggunakan selector p. Namun, ini hanya beberapa contoh dari beragam selector yang tersedia di CSS. Untuk informasi lebih lengkap mengenai selector yang bisa digunakan, kamu bisa mengunjungi w3schools.

• Declaration: declaration adalah kumpulan aturan yang akan diterapkan pada elemen yang ditargetkan oleh selector. Declaration berada di dalam kurung kurawal {} setelah selector. Contoh: p { color: red; }.
• Property: Property adalah aspek spesifik dari elemen yang ingin kamu ubah. Dalam web development, property bisa berupa warna teks, jenis font, margin, padding, dan lain-lain. Di CSS, property ini akan ditemukan sebagai bagian dari declaration.
• Value: value adalah nilai yang akan diberikan pada property. Misalnya, jika property-nya adalah color, value-nya bisa berupa red, #FF0000 atau rgb(255,0,0). Value menentukan bagaimana perubahan akan terlihat pada elemen target.

Cara Menulis Kode CSS dengan Contoh Sederhana

Berikut beberapa cara menulis kode CSS disertai contohnya.

Mempercantik tampilan tombol

Untuk mempercantik tampilan tombol, kamu bisa menggunakan beberapa property CSS, seperti border, padding, dan border-radius.

Misalnya, kamu memiliki elemen HTML berikut:

Kamu bisa menulis kode CSS sebagai berikut untuk mempercantik tampilannya:

Dalam contoh di atas, border menambahkan batas sekitar tombol, padding memberikan jarak antara teks dan batas tombol, serta border-radius membuat sudut tombol menjadi bulat.

Menambahkan warna latar dan teks pada tombol

Untuk menambahkan warna latar dan warna teks pada tombol, kamu bisa menggunakan property background-color.

Contoh:

Pada contoh di atas, background-color: #007BFF; menetapkan warna latar belakang tombol menjadi biru dan color: white; menetapkan warna teks menjadi putih.

Dengan menggabungkan semua property ini, kode CSS untuk tombol akan ditampilkan sebagai berikut:

Cara Menambahkan CSS di HTML

Ada beberapa cara untuk menambahkan CSS di HTML. Namun, dua metode di bawah ini paling umum digunakan.

Menggunakan tag < link > untuk menautkan CSS eksternal

Salah satu cara menambahkan CSS ke dalam HTML adalah menggunakan tag < link >. Metode ini memungkinkan kamu menyimpan kode CSS dalam file terpisah yang biasanya memiliki ekstensi .css.

Cara Ini sangat membantu untuk memisahkan struktur (HTML) dan style (CSS), sehingga lebih mudah dikelola.

Contoh penggunaan tag < link > adalah sebagai berikut:

-->

Dalam contoh ini, href="styles.css" menunjukkan lokasi file CSS yang ingin kamu tautkan. Pastikan lokasi dan nama file sudah benar agar CSS berhasil diterapkan.

Memasukkan kode CSS langsung dalam tag < style > di HTML

Metode kedua adalah memasukkan kode CSS langsung ke dalam dokumen HTML menggunakan tag < style >. Tag ini biasanya ditempatkan di dalam elemen < head > dokumen HTML.

Contoh penggunaannya sebagai berikut:

Dalam contoh di atas, kode CSS ditempatkan di antara tag < style > dan < /style >. Kode CSS ini akan diterapkan pada elemen HTML di dalam dokumen yang sama.

Namun, pendekatan seperti ini kurang disarankan karena dapat membuat struktur dokumen HTML menjadi kurang rapi. Sebagai best practice, sebaiknya pisahkan antara penulisan HTML dan CSS.

Menggunakan CSS eksternal yang dihubungkan ke HTML melalui tag < link > tidak hanya membuat kode lebih rapi, tetapi juga memudahkan dalam pengelolaan dan pemeliharaan, karena tidak mencampur kode CSS dan HTML dalam satu file.

FAQ (Frequently Asked Question)

Apa itu inheritance dalam CSS?

Inheritance atau pewarisan dalam CSS adalah mekanisme di mana beberapa property CSS diwariskan dari elemen induk ke elemen anak. Artinya, jika kamu menetapkan suatu property, seperti font-family atau color pada elemen induk, elemen anak juga akan mewarisi property tersebut, kecuali jika kamu menetapkan nilai berbeda secara eksplisit pada elemen anak.

Pewarisan ini memudahkan pengelolaan style pada elemen yang berbeda tetapi seharusnya memiliki tampilan yang serupa.

Bagaimana cara debug kode CSS?

Debugging kode CSS bisa dilakukan dengan beberapa cara.

Salah satu metode paling umum adalah menggunakan developer tool yang disediakan oleh web browser, seperti Chrome DevTools. Dengan alat ini, kamu bisa memeriksa elemen HTML dan melihat style CSS yang diterapkan pada elemen tersebut.

Kamu juga dapat mengubah property CSS secara real-time untuk melihat perubahannya. Selain itu, pastikan untuk memeriksa urutan kode CSS kamu serta memastikan tidak ada kesalahan sintaks atau typo yang bisa menyebabkan kode tidak berjalan dengan semestinya.

Penutup

Memahami tutorial CSS menjadi langkah krusial dalam perjalananmu sebagai web developer. Dari memahami dasar-dasar HTML, aturan penulisan CSS, hingga cara mengimplementasikannya dalam dokumen HTML, setiap aspek memiliki peranannya sendiri dalam membentuk sebuah website yang tidak hanya fungsional tetapi juga estetik.