Belajar CSS Dasar
APA ITU CSS?
Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari sebuah halaman web. Jika kita membandingkan pembuatan sebuah website dengan membangun rumah, maka HTML adalah kerangka dan struktur dasar rumah tersebut. Sedangkan CSS adalah cat, perabotan, dan dekorasi yang membuat rumah tersebut menjadi lebih tertata rapih dan indah.
Fungsi CSS
Berikut beberapa fungsi CSS:
- CSS memungkinkan kita untuk memisahkan konten (HTML) dari tampilan (CSS). Hal ini dapat membuat kode lebih teroganisir, mudah dipelihara, dan dapat digunakan kembali.
- CSS dapat membuat tampilan lebih konsisten dengan menerapkan gaya yang sama ke seluruh elemen pada halaman web.
- CSS dapat membuat halaman website lebih responsiif dimana dapat menyesuaikan tampilannya secara otomatis berdasarkan ukuran layar perangkat.
- CSS yang ditulis dengan baik dan benar dapat meningkatkan kecepatan dalam loading halaman website.
Struktur CSS
- Selektor: Menentukan elemen HTML mana yang akan dipengaruhi oleh gaya.
- Properti: Atribut yang akan diubah pada elemen tersebut (misalnya warna font, warna latar belakang, ukuran font, dll.)
- Nilai: Nilai yang akan diberikan pada properti tersebut.
Contoh:
Keterangan:
- Pada contoh di atas, kode tersebut akan membuat semua paragraf (elemen <p>) pada halaman memiliki ukuran font sebesar 20 pixel, dengan warna font yaitu biru, dan memiliki background-color berwarna hitam.
Cara-cara Penerapan CSS
Terdapat tiga cara utama untuk menerapkan CSS, yaitu:
- Inline CSS: Cara ini berupa memasukkan gaya CSS langsung ke elemen HTML dengan menggunakan atribut style. Cara ini dinilai kurang efisien karena sulit dipelihara.
- Internal CSS: Cara ini berupa menuliskan gaya CSS di dalam tag <style> yang berada di dalam bagian <head> dari dokumen HTML. Cara ini cocok digunakan untuk gaya yang hanya berlaku pada satu halaman saja.
- External CSS: Cara ini berupa menuliskan gaya CSS dalam file terpisah dengan menggunakan ekstensi .css dan dihubungkan ke dokumen HTML menggunakan tag <link>. Cara ini dinilai paling efisien dan disarankan untuk proyek yang lebih besar.
Contoh Penggunaan CSS
Berikut beberapa contoh penggunaan CSS pada HTML dengan menggunakan tiga cara penerapannya, yaitu; Inline, Internal, dan External. Serta beberapa hal dasar lainnya yang akan dibahas di blog ini.
Membuat Inline CSS
Untuk yang pertama, kita akan belajar membuat Inline CSS atau dengan cara memasukkan gaya langsung ke elemen HTML menggunakan atribut style. Berikut contohnya:
Hasilnya:
Membuat Internal CSS
Selanjutnya yaitu membuat Internal CSS atau membuat gaya CSS di dalam tag <style> yang berada di bagian tag <head> dari dokumen HTML. Berikut Contohnya:
Hasilnya:
Membuat External CSS
Setelah itu kita coba membuat External CSS atau membuat gaya CSS di dalam file terpisah yang menggunakan ekstensi .css yang dihubungkan dengan dokumen HTML menggunakan tag <link>. Berikut contohnya:
File CSS (style.css):
Hasilnya:
Membuat Comment di CSS
Comment atau komentar di CSS adalah bagian dari kode yang tidak di eksekusi oleh browser. Fungsi komentar sendiri seperti catatan atau penjelasan yang kita tambahkan dalam kode untuk:
- Membuat kode lebih mudah dipahami, terutama saat membuat kode yang kompleks.
- Menjelaskan logika di balik sebuah gaya atau aturan tertentu.
- Menonaktifkan bagian kode tertentu untuk debugging atau percobaan.
Cara membuat komentar di CSS diawali dengan /* dan diakhiri dengan */ dimana nantinya semua teks yang berada di antara kedua tanda tersebut akan dianggap sebagai komentar.
Contoh saat kode belum ditambahkan komentar:
Hasilnya:
Lalu kita coba tambahkan komentar di CSS:
Jika ingin membuat komentar dengan cara yang cepat, kamu bisa melakukan cara lain yaitu dengan mem-blok kode yang ingin dijadikan komentar lalu klik Ctrl + /, begitu juga saat ingin menonaktifkan komentar. Berikut hasil saat kode CSS dijadikan komentar:
Dari tampilan di atas dapat disimpulkan bahwa bagian kode CSS yang dijadikan komentar tidak akan dieksekusi oleh browser.
Menggunakan ID Di CSS
ID dalam CSS adalah atribut yang berguna untuk memberikan gaya (style) secara spesifik pada halaman HTML. ID bisa dibayangkan sebagai nama unik yang hanya dimiliki oleh satu atau beberapa elemen tertentu di halaman website. Untuk menggunakan atribut id kamu bisa lebih dulu menambahkan atribut id ke dalam tag HTML yang ingin di beri gaya khusus. Dan untuk memanggil id dalam CSS menggunakan tanda pagar (#). Berikut Contohnya:
Hasilnya:
Menggunakan Class Di CSS
Class pada CSS tidak jauh berbeda dengan id. Class merupakan atribut yang memungkinkan kita untuk mengelompokkan elemen-elemen yang memiliki gaya atau tampilan yang sama. Dengan menggunakan class, kita bisa mengatur tampilan website menjadi lebih terstruktur dan efisien. Dan untuk menulis class di CSS yaitu dengan menggunakan tanda titik (.). Berikut contoh penggunaan Class pada CSS:
Hasilnya:
Multiple Class Di CSS
Multiple class adalah teknik dalam CSS dimana kita daoat memberikan lebih dari satu class pada sebuah elemen HTML. Masing-masing class akan memiliki gaya yang berbeda, dan semua aturan tersebut akan digabungkan pada elemen yang bersangkutan. Berikut contohnya:
Hasilnya:
Penggunaan Universal Selector Di CSS
Universal Selector adalah sebuah selector yang sangat umum digunakan dalam CSS. Selector ini berfungsi untuk menargetkan semua elemen HTML yang ada di dalam dokumen HTML. Dengan kata lain, setiap elemen HTML, naik itu <p>, <h1>, <div>, atau elemen lainnya akan terpengaruh dengan gaya yang diberikan pada universal selector. Universal selector biasanya ditulis menggunakan tanda bintang (*) untuk menargetkan semua elemen. Berikut contohnya:
Hasilnya:
Penggunaan Group Selector Di CSS
Group selector di CSS memungkinkan kita untuk menerapkan gaya yang sama ke beberapa elemen HTML sekaligus. Ini seperti memberikan perintah kepada banyak elemen untuk melakukan hal yang sama dalam satu baris kode. Dan untuk menggunakan group selector, kita cukup memisahkan nama-nama elemen dengan koma (,). Berikut contohnya:
Hasilnya:
Penggunaan Color Di CSS
Color atau warna dalam CSS adalah properti yang digunakan untuk menentukan warna dari berbagai elemen pada halaman website. Ada beberapa cara untuk menentukan warna dalam CSS:
- Nama warna: Kita dapat menuliskan langsung nama warna seperti red, blue, green, black, pink, dll. Contoh:
- Heksadesimal: Kita dapat menggunakan kode warna heksadesimal yang terdiri dari 6 digit angka dan huruf (0-9, A-F). Contoh:
- HSL (Hue, Saturation, Lightness): Kita dapat menggunakan kode warna HSL untuk mendefiniskan warna di CSS. Contoh:
- RGB (Red, Green, Blue): Kita dapat menggunakan kode warna RGB untuk mendefinisikan warna di CSS. Contoh:
- RGBA: Mirip dengan RGB, namun kode nilai RGBA memiliki tambahan nilai alpha untuk mengatur transparansi. Contoh:
Kita coba buat menggunakan kelima cara di atas untuk mendefinisikan warna di CSS:
Hasilnya:
Kurang lebih seperti itulah beberapa dasar-dasar CSS yang biisa saya bagikan di blog kali ini. Untuk mengetahui berbagai hal seputar CSS, teman-teman bisa mengunjungi website w3schools.com atau bisa kunjungi akun github saya elvanazlita untuk mendapatkan kode dari dasar-dasar HTML dan CSS yang sudah saya bagikan di blog ini.
Komentar
Posting Komentar