Cascading Style Sheets (CSS) BAB 3
Pengertian CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website Kita dapat mengontrol isi (konten) dan tampilan secara terpisah
Sintaks dan Properti Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.
Metode Penulisan CSS Inline Style Sheet Embedded Style Sheet
Inline Style Sheet CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain
Embedded Style Sheet Pada Embedded Style Sheet, CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh efek <U>..</U> menjadi pengatur warna Tag <U>..</U> memiliki “tugas” baru disamping “tugas” lama, yaitu warna tulisan. Hasilnya sama dengan kode berikut : demo Modul -4 : CSS
Efek yang sama pada dua kode I dan U Tag <U> =under line Dan tag <I> = italic Diberi efek baru, yaitu warna merah hurufnya Tag <B> = bold, diberi efek warna hijau Klik untuk lihat hasil DEMO Modul -4 : CSS
Beberapa efek pada satu kode B Misalkan pada tag <B> akan dilekatkan efek warna, jenis huruf dan gaya huruf Perintahnya CSS-style nya B { color:lime; text-decoration: underline; font-family:Arial } Klik untuk lihat hasil Demo Modul -4 : CSS
CSS-GLOBAL :Sekali Tulis, pakai bersama File : global.css Kita dapat mendefinisikan suatu file *.css yang berisi kode-kode CSS File tersebut dapat diacu oleh setiap HTML Jika file HTML akan mengacu file CSS tersebut ditulis : <HEAD> <LINK REL="stylesheet" HREF="global.css" TYPE="text/css"> </HEAD> B {color: red; text-decoration: underline; font-family: Arial } I {color:blue; font-family:"Monotype Corsiva"; font-size:20} Digunakan oleh Css_global.html Dan Digunakan oleh Css_global2.html Modul -4 : CSS
Selanjutnya 2 file html digabung dalam 1 frame Klik lihat hasil Terlihat : Efek dari tag <B> dan tag <I> yang didefinisikan dalam STYLE di file global.css demo Modul -4 : CSS
Pewarisan Jika kita definisikan suatu CSS yang berefek pada huruf, sementara dalam HTML juga didefinisikan efek huruf, dan jika tag CSS mengapit tag HTML maka pengaruh tag CSS akan mewaris (menurun) pada tag HTMLnya Efek warna huruf sebagai pengaruh tag CSS “menurun” pada tag HTML font, yaitu warna hijau Klik lihat hasil demo Modul -4 : CSS
Class Class adalah suatu kelompok perintah CSS yang dapat digunakan pada tag tertentu HTML untuk memberi efek tambahan berdasar definisi class <STYLE TYPE="text/css"> .tanya {color: red} .jawab {color: blue} </STYLE> Pada efek HTML dapat digunakan sbb : <P CLASS=“tanya”> ini adalah teks yang terpengaruh efek class tanya</P> Efek class dapat dilekatkan paad tag HTML apa saja, seperti pada tag <B>, tag <I> dst Modul -4 : CSS
Contoh class (untuk ubah warna) Klik lihat hasil Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag <P> dan tag <b> Modul -4 : CSS
Contoh class (untuk ubah ukuran huruf) Klik lihat hasil Font-size : xx-small, x-small, small, medium, large, x-large, xx-large Modul -4 : CSS
Contoh class (untuk ubah warna) Klik lihat hasil Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag <P> dan tag <b> Modul -4 : CSS
Positioning Klik lihat hasil demo Modul -4 : CSS
Watermarking <STYLE TYPE="text/css"> Watermarking adalah konsep mendesaign background layar dengan gambar tertentu Konsep ini dapat diimplementasikan melalui konsep class sebagai berikut : <STYLE TYPE="text/css"> .nama_Class {background-image: url(“namagambar"); background-repeat: yes} </STYLE> </HEAD> CONTOH : klik ! demo Hasil klik Modul -4 : CSS
Kesimpulan CSS merupakan teknik perancangan tampilan WEB untuk melengkapi kemampuan HTML dengan mendefinisikan tag-tag baru melalui konsep class dan pewarisan Beberapa Kepraktisan dalam mengatur format teks dapat diatasi dengan CSS seperi atur model huruf, besar huruf, gaya huruf, macam huruf posisi Konsep yang sangat bagus dlama menampilkan halaman web adlah konsep watermarking yang tidak dapat diatasi dengan HTML murni dan hanya dengan class CSS <STYLE TYPE=“text/css”> . Namaklass { background-image: url(namagambar) } </STYLE> Penggunaan konsep CSS, yaitu dengan tag STYLE juga dapat langsung dimasukkan dalam tag HTML sehingga pengaruhnya lokal pada tag tersebut
Latihan Soal Buatlah sebuah HTML yang dapat menerima input data siswa mata kuliah ini (Nama, NIM, Fakultas, Prodi, TTL, Nomor HP)! Variasikan HTML tersebut dengan CSS dan buat semenarik mungkin untuk dilihat!