Cascading Style Sheets CSS BAB 3 Pengertian CSS
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, Selector dalam pernyataan yaitu property dan value. di atas adalah h 1, sedangkan color adalah property, dan #0789 de 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 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 7
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 8
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 9
CSS-GLOBAL : Sekali Tulis, pakai bersama l l l l Kita dapat mendefinisikan suatu file *. css yang berisi 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> File : global. css B {color: red; text-decoration: underline; font-family: Arial } I {color: blue; font-family: "Monotype Corsiva"; font-size: 20} Digunakan oleh Dan Digunakan oleh Modul -4 : CSS Css_global. html Css_global 2. html 10
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 11
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 12
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 13
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 14
Contoh class (untuk ubah ukuran huruf) Klik lihat hasil Font-size : xx-small, medium, large, x-large, xxlarge Modul -4 : CSS 15
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 16
Positioning Klik lihat hasil demo Modul -4 : CSS 17
Watermarking adalah konsep mendesaign background layar dengan gambar tertentu l Konsep ini dapat diimplementasikan melalui konsep class sebagai berikut : l <STYLE TYPE="text/css">. nama_Class {background-image: url(“namagambar"); backgroundrepeat: yes} Hasil ldemo </STYLE> </HEAD> klik l CONTOH : klik ! l Modul -4 : CSS 18
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!
- Slides: 20