بِسْمِ اللّهِ
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Pada pertemuan kali ini kita akan membahas mengenai CSS (Cascading Style Sheets). CSS adalah bahasa program yang digunakan untuk merubah/mempercantik/memanipulasi tampilan dari suatu halaman Web / HTML baik itu latar, tulisan, gambar, dll. Dengan menggunakan CSS kita akan lebih menghemat waktu pekerjaan kita untuk mepercantik/memodifikasi tampilan dari satu atau beberapa halaman web. Dilihat dari sisi penempatan script/kode CSS dibedakan menjadi tiga;
1. Inline, script/kode ditempatkan diantara bari kode HTML (Seperti yang telah kita pelajari sebelumnya).
2. Internal, script/kode ditempatkan diawal scrippt/kode HTML terletak dibagian <head> dengan menggunkan script/kode <style>.
3. Eksternal, script/kode ditempatkan diluar file HTML dengan membuat file CSS tersendiri.
Sebagai awal permulaan pembelajaran Bahasa Pemrograman CSS saya akan berikan contoh mengenai tiga perbedaan CSS seperti yang telah saya sebutkan diatas.
1. Inline
Pada contoh diatas script untuk merubah tampilan/kode CSS diletakkan didalam tag <h1> dengan script style=”color:blue;” sehingga tulisan SMA ADI LUHUR ter-lihat dalam halaman web dengan warna biru.
2. Internal
Pada contoh diatas script/kode CSS diletakkan di antara tag <head> </head> dengan script/kode <style> ….. </style> sehingga warna latar halaman berubah menjadi kuning, lalu tulisan SMA ADI LUHUR yang berada pada tag heading <h1> </h1> menjadi berwarna biru dan tulisan LEMBAGA PENDIDIKAN KOMPUTER yang berada diantara element paragraf tag <p> </p> menjadi berwarna merah.
3. Eksternal
Pada contoh diatas prinsip pengkodean/script sama dengan yang Internal hanya saja letak kode/script CSS berada pada file terpisah diluar file HTML. Sehingga harus di lakukan pemanggilan script/kode CSS dari dalam HTML dengan menggunakan script/kode <link rel=”stylesheet” href=”nama file.css”> yang di letakkan diantara kode/script <head> </head>.
Sekian pertemuan kita pada kali ini, tetap semangat belajar, jaga kesehatan, dan kurangi / hindari segala aktifitas diluar rumah sebagai bentuk proteksi diri dalam memerangi pandemi CoViD-19.
*) Catatan :
Apabila aplikasi contoh CodePen tidak tampil seperti gambar dibawah ini, silahkan buka link/tautan yang ditampilkan untuk mengaktifkan aplikasi dan silahkan kembali lagi ke halaman ini.
