Memahami Dasar-Dasar Cascading Style Sheet (CSS)
Pada sesi sebelumnya, kita telah mempelajari aspek kunci dalam pengembangan website, yakni HTML. Materi yang telah kita pelajari meliputi konsep dasar, pengenalan Semantic HTML, pemanfaatan formulir input, dan penggunaan tabel untuk memperkaya funsionalitas dan konten halaman web kita.
Kini saatnya kita beralih untuk mempelajari komponen yang tidak kalah penting, yakni CSS.
Apakah kamu pernah merasa bahwa hasil dari praktik di pertemuan sebelumnya menghasilkan tampilan website yang kurang memuaskan atau kurang estetik? Mari kita flashback.
Ya, seperti itulah HTML tanpa CSS. Nampaknya penggalan lirik lagu Rhoma Irama “Hidup tanpa cinta bagai taman tak berbunga” sangatlah relevan dengan studi kasus kita kali ini. HTML tanpa CSS bagaikan aku tanpa-Nya, hampa.
Satu hal lagi yang harus selalu kamu ingat bahwa CSS bukan merupakan bahasa pemrograman, tetapi sesuai dengan namanya “Cascading Style Sheet “ yaitu bahasa stylesheet yang digunakan untuk mengatur tampilan dan gaya dari halaman web.
Tentunya pertemuan kali ini akan menjadi sangat menarik karena kita akan mempelajari seputar “styling” website. Kita akan mempelajari penggunaan dasar dari CSS, struktur penulisan sintaksis, CSS Unit, Pseudo Class dan Styling. Dengan beberapa hal tersebut kita bisa melakukan “styling” pada website kita, seperti mengatur ukuran dan warna pada setiap elemen HTML.
Sepertinya sampai sini saja basa basi berisi ini, mari kita lanjutkan pembelajaran.
Table Of Content
· Mengeksekusi Kode CSS
∘ Metode Penulisan
· Sintaksis
· Selector
∘ Simple selector
∘ Pseudo Class
∘ Menerapkan Pseudo-Class
∘ Pseudo-element
· CSS Units
∘ Unit Panjang
∘ Unit Waktu
∘ Unit Sudut
∘ Unit Posisi
∘ Unit Resolusi
∘ Unit yang Berkaitan dengan Layar
· Properti dan Nilai Styling CSS
∘ Warna
∘ Teks
∘ Box Model
∘ Layout
∘ Latar Belakang
∘ Animasi
∘ Transformasi dan Transisi
Mengeksekusi Kode CSS
Langkah awal sebelum kita mengeksekusi kode CSS adalah kita perlu memahami metode penulisannya. Secara umum, penulisan CSS dapat dilakukan melalui tiga metode, yakni :
Metode Penulisan
Internal CSS
Internal CSS adalah metode penulisan CSS yang menempatkan kode CSS di dalam tag <style> di bagian <head> dokumen HTML.
External CSS
External CSS adalah metode penulisan CSS yang menempatkan kode CSS di dalam file CSS terpisah. File CSS kemudian di-link ke dokumen HTML menggunakan tag <link>. Metode ini adalah cara yang paling umum digunakan oleh para pengembang website diluar sana.
Inline CSS
Inline CSS adalah metode penulisan CSS yang paling sederhana. Kode CSS ditulis langsung di dalam tag HTML. Inline CSS cocok digunakan untuk mengatur tampilan elemen-elemen HTML yang bersifat sementara atau hanya akan digunakan sekali.
Sintaksis
Sintaksis CSS terdiri dari aturan-aturan yang menentukan bagaimana elemen-elemen HTML harus ditampilkan. Berikut adalah contoh sintaksis dasar CSS
CSS memiliki aturan penulisan yang terdiri dari :
- Selector : memilih elemen HTML yang akan diberi gaya.
- Property : adalah atribut style yang ingin kamu atur, seperti warna atau ukuran font dan banyak lainya.
- Value : adalah nilai yang diatur untuk properti tersebut
- Declaration : adalah kombinasi dari properti dan nilai, ditempatkan di dalam kurung kurawal
Selector
Selector CSS adalah pola yang digunakan untuk memilih atau seleksi elemen HTML yang akan diberi style. Setiap selector CSS terdiri dari satu atau lebih komponen yang menentukan elemen mana yang akan dipilih.
Simple selector
Simple selector adalah selector CSS yang paling dasar. Simple selector hanya menggunakan satu komponen untuk memilih elemen HTML. Komponen yang dapat digunakan dalam simple selector adalah:
- Elemen : Elemen HTML adalah bagian-bagian dasar yang membentuk struktur suatu halaman web. Setiap elemen HTML diwakili oleh tag (tanda kurung sudut) yang mendefinisikan fungsi atau kontennya. Kita bisa seleksi elemen html di dalam css dengan langsung menuliskan nama tag-nya.
<button>Selengkapnya</button>button {
border: none;
background-color: rgb(88, 113, 201);
padding: 8px;
border-radius: 8px;
color: white;
}- ID : Dalam HTML dan CSS, pengidentifikasi ID digunakan untuk merujuk secara unik ke elemen tertentu dalam halaman web. ID ditandai dengan atribut
idpada elemen HTML, dan diakses dalam CSS menggunakan tanda pagar (#). Berikut adalah contoh penggunaan selector ID:
<div id="card">
<!-- Kode Lainnya -->
</div>#card {
padding: 24px;
border: solid black;
border-radius: 16px;
}- Class : Dalam HTML dan CSS, selain digunakan untuk identitas class selector juga digunakan untuk memberi gaya pada sekelompok elemen yang memiliki kelas yang sama. Kelas didefinisikan dengan atribut
classpada elemen HTML dan diakses dalam CSS menggunakan titik (.). Berikut adalah contoh penggunaan class selector :
<h1 class="judul tulisan-hijau garis-bawah">How To Make Lumpia</h1>
<p class="headline tulisan-hijau garis-bawah">
Tulisan Hijau
</p>.tulisan-hijau {
color: green;
}
.gari-bawah {
text-decoration: underline;
}Jika kamu penasaran dengan hasil dan kode lengkapnya, silahkan buka code editor dibawah ini :
Pseudo Class
Bayangkan Kamu berada di warung kopi. Ketika kamu sudah memesan kopi, kamu akan diberikan penanda berupa plang nomor. Hal itu akan memudahkan barista untuk mengantarkan pesanan anda. Pseudo-class misalnya :hover dalam CSS akan mirip dengan aksi penanda pesanan ketika Barista ingin mengantarkan pesanan kamu.
Ini adalah salah satu contoh penerapan Pseudo-class :hover pada halaman website.
Mari kita coba kaitkan dengan analogi warung kopi tadi. Peran Pseudo-class pada halaman website adalah memberikan style yang berbeda ketika pengguna melakukan aksi tertentu. Pada contoh diatas, bentuk dari container / pembungkus gambar akan berubah jika pengguna mengarahkan mouse pada gambar tersebut.
Pseudo-class adalah kata kunci khusus yang ditambahkan ke selector untuk menargetkan elemen berdasarkan keadaan atau kondisi tertentu, bukan hanya berdasarkan nama atau atributnya. Ini memungkinkan Anda untuk menerapkan gaya secara dinamis, menciptakan efek interaktif, dan meningkatkan keterbacaan halaman web.
Beberapa contoh pseudo-class paling sering digunakan adalah sebagai berrikut :
:hover: Menerapkan gaya saat kursor pengguna berada di atas elemen.:focus: Menerapkan gaya saat elemen memegang fokus keyboard.:checked: Menerapkan gaya pada elemen formulir yang dicentang:active: Menerapkan gaya saat elemen sedang diklik atau ditekan.
Menerapkan Pseudo-Class
Kita akan mencoba menerapkan Pseudo-class :hoverdiawali dengan selector elemen yang ingin kita terapkan. Silahkan buka code editor dibawah ini untuk praktik lengkapnya.
Catatan :
Kamu bisa menggali lebih dalam mengenai Pseudo-class pada artikel dibawah ini
- Pseudo-classes — CSS: Cascading Style Sheets | MDN
- W3School-CSS Pseudo-classes
Pseudo-element
Pseudo-element adalah fitur CSS yang memungkinkan penambahan elemen virtual ke dalam dokumen HTML untuk memberikan gaya tambahan. Dalam modul ini, kita akan fokus pada dua pseudo-element yang sering digunakan: ::before dan ::after.
::before
Pseudo-element ::before digunakan untuk menambahkan konten sebelum elemen yang dipilih.
::afterPseudo-element ::after digunakan untuk menambahkan konten setelah elemen yang dipilih.
Catatan :
Kamu bisa menggali lebih dalam mengenai Pseudo-element pada artikel dibawah ini
- Pseudo-element — CSS: Cascading Style Sheets | MDN
- W3School-CSS Pseudo-elements
CSS Units
Unit dalam CSS digunakan untuk mengukur nilai yang diterapkan pada properti CSS seperti lebar, tinggi, jarak, warna, dan sebagainya. Pemilihan unit yang tepat penting untuk menciptakan tata letak yang responsif dan tampilan yang sesuai. Beberapa unit yang umum digunakan dalam CSS termasuk:
Unit Panjang
px(pixel): Unit piksel yang umum digunakan.em: Relatif terhadap ukuran font elemen parent.rem: Relatif terhadap ukuran font elemen root (biasanya elemen<html>).%: Persentase dari nilai yang diwariskan.
Unit Waktu
s(detik): Digunakan dalam properti animasi dan transisi.
Unit Sudut
deg: Digunakan untuk properti transformasi seperti rotasi.
Unit Posisi
%: Persentase dari elemen yang sesuai.
Unit Resolusi
dpi(dots per inch): Jumlah titik dalam satu inci, umumnya digunakan dalam media cetak.dppx(dots per pixel): Jumlah piksel dalam satu inci, umumnya digunakan dalam media layar.
Unit yang Berkaitan dengan Layar
vw(viewport width): 1% dari lebar viewport.vh(viewport height): 1% dari tinggi viewport.vmin: 1% dari lebar atau tinggi viewport, yang lebih kecil.vmax: 1% dari lebar atau tinggi viewport, yang lebih besar.
Catatan :
Kamu bisa menggali lebih dalam mengenai CSS Units pada artikel dibawah ini
- Value and Units— CSS: Cascading Style Sheets | MDN
Properti dan Nilai Styling CSS
Warna
color: Warna teks.background-color: Warna latar belakang.
Teks
font-family: Jenis font.font-size: Ukuran font.font-weight: Ketebalan font.text-align: Penataan teks.text-decoration: Dekorasi teks (underline, overline, line-through, none).line-height: Tinggi baris.
Box Model
widthdanheight: Lebar dan tinggi elemen.margin: Ruang di luar elemen.padding: Ruang di dalam elemen.border: Batas elemen.box-sizing: Cara menghitung dimensi elemen (content-box, border-box).
Layout
display: Tipe tata letak elemen (block, inline, inline-block, flex, grid, hidden).position: Metode penempatan elemen (static, relative, absolute, fixed).float: Menggeser elemen ke sisi tertentu.
Latar Belakang
background-image: Gambar latar belakang.background-repeat: Pengulangan gambar latar belakang.background-position: Posisi gambar latar belakang.
Animasi
transition: Efek transisi.animation: Animasi kustom.
Transformasi dan Transisi
transform: Transformasi elemen.transition: Efek transisi.
Selamat kamu sudah mempelajari pemahaman dasar komponen penting dalam pengembangan website yaitu CSS. Tidak sampai disini saja, agar website kita lebih menarik dan responsive maka kita perlu mempelajari mengeni CSS layouting. Sayangnya, kita tidak bisa melanjutkan materi tersebut di pertemuan ini.
Sampai jumpa di pertemuan selanjutnya 🙌
