CSS

Cascading Style
Sheets

Insan Taufik, M.Kom

Note : Halaman berwarna abu-abu harus dipraktikkan.

Istilah
Cascading Style Sheets (CSS) adalah bahasa pemrograman yang digunakan untuk
mengendalikan tampilan dan format halaman web. Ini memungkinkan pengembang web
untuk mengatur tampilan elemen-elemen HTML pada halaman web, seperti teks,
gambar, dan layout.
 Timeline
Awal Mula
(1990-an)
Pada awalnya, desain web
dibuat dengan menggunakan
elemen HTML saja. Ini
membuat pengembangan
tampilan yang konsisten dan
menarik menjadi sulit. Pada
tahun-tahun awal web,
muncul beberapa usaha
untuk mengatasi masalah ini,
seperti HTML+ dan browser
spesifik seperti "font" dan
"color" tags di Netscape.
CSS4
CSS3 (Awal
(Kemungkinan di
CSS2.1 (2004) 2000-an -
CSS1 (1996) CSS2 (1998) Masa Depan)
sekarang)
World Wide Web CSS2 dirilis pada tahun Ini adalah revisi dari CSS3 adalah evolusi selanjutnya
Consortium (W3C) mulai
mengembangkan
Cascading Style Sheets
1998 dan membawa
lebih banyak
kemampuan
CSS2 dan adalah versi
yang lebih stabil dan
lebih baik didukung
dari bahasa ini. Ini tidak hanya
mencakup peningkatan lebih
lanjut pada tampilan dan efek,
?
pada tahun 1996. CSS1 pemrograman oleh browser. CSS2.1 tetapi juga modul-modul yang
dirilis sebagai tampilan ke dalam menjadi standar W3C bisa diimplementasikan secara
rekomendasi pertama bahasa ini. Ini pada tahun 2004. terpisah, sehingga developer
pada Desember 1996. termasuk dukungan dapat menggunakan fitur-fitur
Ini memungkinkan untuk posisi elemen, tertentu tanpa harus
pengembang web untuk lapisan, dan pseudo- menggunakan keseluruhan CSS3.
mengendalikan font, class. CSS3 mencakup banyak fitur
warna, margin, dan menarik seperti animasi, transisi,
beberapa tampilan transformasi, dan banyak lagi.
dasar lainnya.
Kenapa produk ini diistilahkan CSS?
Nama "Cascading Style Sheets" (CSS) dipilih untuk mencerminkan sifat dan
tujuan bahasa pemrograman tersebut. Berikut adalah beberapa alasan
mengapa nama CSS dipilih:

C
(cascading/bertingkat) Kata "Cascading" mengacu pada kemampuan CSS untuk mengatur tampilan elemen-elemen HTML
dengan hierarki atau bertingkat. Ini berarti Anda dapat mengatur gaya untuk elemen-elemen di tingkat yang lebih tinggi, dan
gaya tersebut akan diturunkan ke elemen-elemen yang ada di bawahnya dalam hierarki. Ini memungkinkan pengembang
untuk menciptakan konsistensi dalam tampilan halaman web dengan cara yang efisien.

S
(style/gaya) Ini merujuk pada kemampuan CSS untuk mengontrol gaya atau tampilan elemen-elemen HTML. Dengan CSS,
Anda dapat mengatur properti seperti font, warna, margin, padding, dan banyak lagi, sehingga Anda dapat merancang
tampilan yang kreatif dan menarik untuk halaman web Anda.

S
(sheets/lembaran) Kata "Sheets" mengacu pada fakta bahwa CSS menyediakan lembaran gaya terpisah yang dapat
diterapkan pada halaman web. Ini memisahkan tampilan dari konten halaman web itu sendiri, memungkinkan pengembang
untuk dengan mudah mengubah tampilan situs web dengan mengedit lembaran gaya tanpa harus menyentuh konten HTML
asli.
Apa saja kegunaan CSS?
Berikut adalah beberapa penggunaan utama CSS:

1. Mengatur Tampilan dan Gaya

2. Layout Halaman
3. Responsif Web Design
4. Animasi dan Transisi
5. Efek Visual (shadow, transparent, gradient)
6. Gaya untuk Cetak (Print Media)
7. Custom UI (Antarmuka Pengguna Kustom)
8. Mengatur Animasi Keyframe
9. Mengubah Gaya Berdasarkan Pseudo-class
10. Mengatur Multi-Kolom
Bentuk Umum CSS
1. Komentar CSS: Komentar dimulai dengan /* dan
diakhiri dengan */. Mereka digunakan untuk
memberikan penjelasan pada kode CSS, tetapi
tidak memengaruhi tampilan halaman web.
2. Selektor: Selektor adalah pola yang digunakan
untuk memilih elemen HTML yang akan diubah
tampilannya. Contoh selektor adalah p untuk
memilih semua elemen <p>.
3. Deklarasi Properti CSS: Deklarasi properti CSS
mengatur gaya elemen yang dipilih. Properti
dipisahkan dari nilainya oleh titik dua : dan setiap
deklarasi diakhiri dengan tanda titik koma ;.
4. Blok CSS: Blok CSS adalah sekumpulan aturan
gaya yang diberlakukan pada elemen yang dipilih.
Setiap aturan gaya terdiri dari selektor yang
mengidentifikasi elemen yang akan diubah dan
daftar properti dan nilainya yang menggambarkan
perubahan yang diberlakukan.
Contoh Kode CSS
Kategori Kode CSS
Kode CSS dapat dikelompokkan menjadi beberapa kategori berdasarkan
fungsi dan tujuannya. Berikut adalah beberapa kategori umum untuk fungsi-
fungsi CSS:
1. Pengaturan Dasar (Basic Styling):
Mengatur font dan ukuran teks.
Mengatur warna teks dan latar
belakang.
Mengatur margin dan padding
elemen.
Mengubah jenis tampilan elemen
(inline, block, inline-block).
2. Tata Letak (Layout):
Mengatur posisi elemen (absolute,
relative, fixed).
Mengontrol lebar dan tinggi elemen.
Menerapkan float dan clear untuk
mengatur tata letak.
Menggunakan grid atau flexbox untuk
mengatur tata letak halaman.
3. Responsif (Responsive Design):
Menggunakan media queries untuk
menyesuaikan tampilan pada berbagai
perangkat.
Mengatur elemen menjadi terlihat atau
tersembunyi pada resolusi tertentu.
Mengatur ukuran teks dan elemen
berdasarkan layar.
4. Animasi dan Transisi (Animation and
Transition):
Menerapkan animasi elemen
menggunakan keyframes.
Mengontrol durasi, perubahan, dan
kecepatan animasi.
Menerapkan transisi lembut pada
perubahan properti.
5. Efek Visual (Visual Effects):
Menggunakan bayangan (box shadow)
untuk memberikan kedalaman elemen.
Menggunakan gradien (gradient) untuk
mengubah latar belakang elemen.
Mengatur efek hover untuk memberikan
respons saat elemen dihover.
6. Gaya untuk Cetak (Print Styles):
Mengatur tampilan halaman ketika
dicetak, seperti menghilangkan elemen
yang tidak perlu dan mengatur tampilan
teks cetak.
Mengontrol orientasi halaman cetak
(portrait atau landscape).
7. Antarmuka Pengguna Kustom (Custom UI):
Mengkustomisasi tampilan tombol,
formulir, dan elemen interaktif lainnya.
Menggunakan pseudo-class untuk
mengubah tampilan elemen berdasarkan
interaksi pengguna.
8. Multi-Kolom (Multi-column Layout):
Mengatur tampilan teks dalam beberapa
kolom.
Mengendalikan lebar, jarak antar kolom,
dan aliran konten dalam kolom.
9. Mengatur Tampilan Berdasarkan Keadaan
(State-Based Styling):
Menggunakan pseudo-class seperti :hover,
:active, :focus untuk mengubah tampilan
elemen berdasarkan keadaan tertentu.
10. Mengatur Tampilan Berdasarkan Posisi
(Position-Based Styling):
Menggunakan pseudo-class seperti :first-
child, :last-child untuk mengubah tampilan
elemen berdasarkan posisi mereka dalam
dokumen.
11. Mengatur Tampilan Berdasarkan Navigasi
(Navigation-Based Styling):
Menggunakan pseudo-class seperti
:visited, :not(:visited) untuk mengubah
tampilan tautan yang telah atau belum
dikunjungi oleh pengguna.
12. Menggunakan Vendor Prefixes (Prefixes for
Cross-Browser Compatibility):
Menambahkan awalan vendor seperti -
webkit-, -moz-, atau -ms- untuk
memastikan kompatibilitas dengan
berbagai browser.
Cara Menerapkan CSS
Ada beberapa cara yang berbeda untuk menerapkan CSS ke dokumen HTML.
Berikut adalah beberapa metode yang umum digunakan:
1. Inline CSS:
Ini adalah cara termudah untuk menerapkan CSS secara langsung pada
elemen HTML.
CSS ditulis dalam atribut style pada elemen HTML yang ingin Anda
gayakan.
Contoh:
2. Internal CSS:
Internal CSS ditempatkan dalam elemen <style> yang terletak dalam
bagian <head> dari halaman HTML.
Ini memungkinkan Anda untuk menggaya beberapa elemen dalam
dokumen yang sama.
Contoh:
3. External CSS:
External CSS adalah cara yang paling umum digunakan dalam
pengembangan web.
Anda membuat file CSS terpisah dengan ekstensi .css yang berisi semua
aturan gaya.
Kemudian Anda menghubungkan file CSS eksternal ini dengan dokumen
HTML menggunakan elemen <link>.
Contoh:
4. CSS dalam Tag <style> dengan @import:
Anda juga dapat menulis CSS dalam elemen <style> dalam dokumen
HTML, tetapi menggunakan pernyataan @import untuk menghubungkan
file CSS eksternal.
Contoh:
5. CSS Preprocessor:
Anda dapat menggunakan preprocessor CSS seperti Sass atau Less untuk
mengatur gaya dalam kode yang lebih terstruktur dan modular.
Setelah menulis kode dalam preprocessor, Anda mengkompilasinya
menjadi file CSS biasa yang dapat digunakan dalam HTML.
Selektor CSS
Selektor CSS adalah pola yang digunakan untuk memilih elemen-elemen
HTML yang akan diubah tampilannya dengan gaya CSS.
1. Selektor Elemen (Element Selector):
Ini adalah selektor dasar yang
memilih elemen HTML berdasarkan
nama elemennya.
Contoh: p akan memilih semua
elemen <p> dalam dokumen.
2. Selektor Kelas (Class Selector):
Ini digunakan untuk memilih
elemen berdasarkan atribut class.
Contoh: .judul akan memilih semua
elemen yang memiliki atribut
class="judul".
3. Selektor ID (ID Selector):
Ini digunakan untuk memilih elemen
berdasarkan atribut id.
Contoh: #header akan memilih elemen
dengan atribut id="header".
4. Selektor Universal (Universal
Selector):
Ini memilih semua elemen dalam
dokumen.
Contoh: * akan memilih semua
elemen dalam dokumen.
5. Selektor Grup (Grouping Selector):
Anda dapat mengelompokkan
beberapa selektor dalam satu
aturan CSS.
Contoh: h1, h2, h3 akan memilih
semua elemen <h1>, <h2>, dan
<h3>.
Boleh menggunakan tag, class, id
atau kombinasi
Penggunaan CSS yang Buruk
1. Penyelipan CSS Inline yang Berlebihan
2. Menggunakan Selektor Universal dengan Properti Berlebihan 3
3. Selektor Terlalu Spesifik
4. Duplikasi Kode CSS
5. Tidak Menggunakan Komentar
6. Tidak Menggunakan Kode CSS yang Efisien
7. Penggunaan !important yang Berlebihan
8. Ketidakpatuhan Terhadap Prinsip Responsif
9. Tidak Mengelola Vendor Prefix Dengan Benar
10. Kurangnya Struktur dan Organisasi File CSS