Cascading Style Sheet (CSS) PAHRUL IRFAN, M.Kom
Pengertian Cascading Style Sheet (CSS) merupakan rangkaian instruksi yang menentukan bagiamana suatu objek akan ditampilkan pada halaman web Berfungsi untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan lain sebagainya.
contoh <html> <head> <title>CSS</title> <style type="text/css"> h2{ font-family: serif; font-size: 18px; font-style: italic; color: green; } </style> </head> <body> <h2>Font sherif , ukuran 18 pixel, style italic, dan berwarna hijau </h2> </body> </html>
Struktur Dasar
Struktur Dasar Selector merupakan lokasi penerapan property style css yang dibuat. selector dipanggil untuk mengaktifkan style yang telah didefinisikan pada objek tertentu. Jenis-jenis Selector: Selector HTML (Tag Html) Selector Class Selector ID
Selector html Digunakan untuk mendefinisikan style yang pada tag HTML, atau melakukan redefinisi tag normal HTML Syntax: tagHtml { property:value; }
Selector html (contoh) <html> <head> <style type="text/css"> div { font-family:arial; font-size : 14px; color:red; } </style> </head> <body> <div> Content berada pada tag div pertama </div> Content berada pada tag div kedua </body> </html>
Selector class Digunakan untuk mendefinisikan style yang pada tag class tertentu yang dibuat secara bebas. Syntax: .className { property:value; }
Selector class (contoh) <html> <head> <style type="text/css"> .layer1 {position:absolute; left:100;top:75;} .layer2 {position:absolute; left:130;top:120;} </style> </head> <body> <div class="layer1"> Ini adalah layer 1<br> posisi (100,100) </div> <div class="layer2"> Ini adalah layer 2<br> posisi (130,120) </body> </html>
Selector id Digunakan untuk mendefinisikan style yang berhubungan dengan suatu object memanfaatkan ID unik, biasa digunakan saat bekerja dengan layer Syntax: #IDName { property:value; }
Selector id (contoh) <html> <head> <style type="text/css"> #layer1 {position:absolute; left:100;top:75;} #layer2 {position:absolute; left:130;top:120;} </style> </head> <body> <div id="layer1"> Ini adalah layer 1<br> posisi (100,100) </div> <div id="layer2"> Ini adalah layer 2<br> posisi (130,120) </body> </html>
box model
box model
penempatan tag CSS Inline CSS Coding CSS didefinisikan dalam tag HTML (tag tunggal) dengan sebelumnya menambahkan atribut style pada tag tersebut.
Inline CSS (contoh) <html> <head> <title>Internal CSS</title> </head> <body> <div style="font-family: arial; color: red“ > Font arial dan berwarna merah </div> </body> </html>
penempatan tag CSS 2. Embeded CSS Style didefinisikan di dalam bagian <head> dan diaplikasikan untuk seluruh dokumen HTML tersebut.
Embeded CSS (contoh) <html> <head> <title>Embeded CSS</title> <style type="text/css"> div { font-family: arial; color: #FF0000; } </style> </head> <body> <div>Font arial dan berwarna merah</div> </body> </html>
penempatan tag CSS 3. External CSS CSS dibuat pada file khusus (.css) yang selanjutnya dapat digunakan oleh dokumen HTML manapun dengan memasukkan link file CSS tersebut dalam dokumen yang diinginkan.
External CSS (contoh) <html> <head> <title>external CSS</title> <link rel="stylesheet" href="file.css" type="text/css"/> </head> <body> <div>Font arial dan berwarna merah</div> </body> </html>
Pengelompokan Selector .headlines { font-family:arial; color:black; background:yellow; font-size:14pt; } .sublines font-size:12pt; .infotext font-size:10pt; .headlines, .sublines, .infotext { font-family:arial; color:black; background:yellow; } .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;}
refrensi FN. Jovan. 2007. Panduan Praktis Membuat Web dengan PHP untuk Pemula. Jakarta : Mediakita Abdul Kadir. 2008. Dasar Pemrograman Web Dinamis Menggunakan PHP. Yogyakarta : Andi Duckett, J. (2010). Beginning HTML,XHTML,CSS,and Javascript. Indianapolis. Wiley Publishing Freeman, E., & Freeman, E. (2006). Head first HTML with CSS & XHTML. Head First Series., xxxv, 667 p.
Any, Question ??