Dalam pelajaran ini, kami mengenalkan Anda pada lembaran gaya cascading (CSS), yang sangat umum di World Wide Web. Kami sebentar akan membahas apa itu dan jenis apa di luar sana dan juga menunjukkan beberapa contoh umum.
Apa itu CSS?
Sebagian besar halaman web dibuat dari HTML, atau bahasa markup hypertext. Ini adalah cara standar untuk menghiasi teks web biasa dengan font, warna, doodads grafis, dan hyperlink (teks yang dapat diklik yang secara ajaib mengangkut pengguna ke tempat lain). Tapi situs web bisa menjadi sangat besar. Bila itu terjadi, HTML adalah cara yang sangat sulit untuk melakukan hal yang sangat mudah. CSS (cascading style sheets) bisa membuat hiasan situs web mudah lagi!
Pikirkan CSS sebagai semacam kode berpakaian komputer. CSS terutama hanya satu hal: ini menggambarkan bagaimana tampilan halaman web. Bahkan lebih baik lagi, CSS bisa dengan mudah dipisahkan dari HTML, sehingga kode dress mudah ditemukan, mudah dimodifikasi, dan bisa dengan cepat mengubah keseluruhan tampilan situs web Anda. Seperti kode berpakaian di sekolah, Anda bisa mengubah CSS Anda dan tampilan siswa Anda akan berubah dengannya. Lembar gaya memungkinkan Anda untuk dengan cepat mengubah seluruh situs web sesuka Anda, seperti kegemaran mode yang memungkinkan orang berubah seiring waktu namun tetap menjadi orang yang sama.
Sebuah hal yang sangat rapi tentang CSS, adalah bahwa hal itu mengalir. Setiap gaya yang Anda tentukan menambah keseluruhan tema, namun Anda dapat membuat gaya terbaru menggantikan gaya sebelumnya. Misalnya, dengan CSS kita bisa mulai dengan mengatakan kita menginginkan semua teks kita 12px (12 unit) tinggi. Nanti kita bisa bilang kita juga ingin merah juga. Masih nanti, kita bisa mengatakan bahwa kita menginginkan satu kalimat dicetak tebal atau miring, atau biru dan bukan merah.
Tiga Jenis CSS
CSS hadir dalam tiga tipe:
Dalam file terpisah (eksternal)
Di bagian atas dokumen halaman web (internal)
Tepat di sebelah teks yang dihiasnya (inline)
Lembar gaya eksternal adalah file terpisah yang berisi petunjuk CSS (dengan ekstensi file .css). Bila halaman web menyertakan stylesheet eksternal, tampilan dan nuansanya akan dikontrol oleh file CSS ini (kecuali jika Anda memutuskan untuk mengganti gaya menggunakan salah satu dari kedua jenis berikut). Beginilah cara Anda mengubah keseluruhan situs sekaligus. Dan itu sempurna jika Anda ingin mengikuti mode terbaru di halaman web tanpa menulis ulang setiap halaman!
Gaya internal ditempatkan di bagian atas setiap dokumen halaman web, sebelum konten apapun terdaftar. Ini adalah hal terbaik berikutnya ke eksternal, karena mudah ditemukan, namun memungkinkan Anda untuk 'mengganti' lembar gaya eksternal - untuk halaman khusus yang ingin menjadi nonkonformis!
Gaya inline ditempatkan tepat di tempat Anda membutuhkannya, di samping teks atau gambar yang ingin Anda hiasi. Anda dapat menyisipkan gaya sebaris di manapun di tengah kode HTML Anda, memberi Anda kebebasan nyata untuk menentukan setiap elemen halaman web. Di sisi lain, ini bisa membuat halaman web tetap menjadi tugas yang nyata!
Instruksi CSS
Sebelum kita mengenalkan CSS, mari kita mengulas HTML secara singkat. Sebuah halaman web sederhana terbuat dari tag. Semuanya harus pergi antara tag pembuka dan penutup <html>. Bagian <head> berisi petunjuk tak terlihat yang disebut informasi meta. Bagian <body> adalah tempat kita meletakkan semua barang yang terlihat. Berikut adalah contoh HTML super sederhana:
CSS eksternal
Sekarang di sini adalah contoh CSS singkat dan sederhana yang menggunakan file eksternal (kami akan menyebutnya 'stylish.css'). Kami akan memberi tahu halaman web kami untuk menjadi putih dan untuk membuat judul kami, yang dicatat dalam contoh HTML sederhana kami seperti 'John Adams', tampil merah setinggi 24 unit:
Kode CSS sebagai Separate, External File
kode css eksternal
Dalam contoh file, baris teratas adalah komentar dan tidak melakukan apapun. Bagian selanjutnya (disebut body) memberi tahu halaman web apa warna background yang akan digunakan untuk bagian body. Tepat setelah itu, bagian h1 mengatakan bahwa kita ingin heading terbesar kita (h1) menjadi warna merah dan ukuran fontnya menjadi 24 unit tinggi.
Sekarang, untuk menyertakan file CSS eksternal ini ('stylish.css'), kita harus menyertakan tautan untuknya di bagian <head> pada halaman web kosong kita, seperti yang ditunjukkan di layar:
EmoticonEmoticon