CSS
Cascading Style Sheets atau CSS adalah suatu bahasa lembar gaya yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markah. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
CSS biasanya digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markah lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.
CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh penjelajah web basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.
1. Didalam <head> (inline style)
<style type=”text/css”>
… /* css code */
</style>
2. Didalam < … > (internal style/embeded style)
Contoh :
<font style=”color:red”>Warna tulisan merah</font>
3. Terdapat di dalam 1 file tertentu (external style)
Pemanggilannya :
<link rel=”stylesheet” href=”PATH/file.css” />
LISTING PROGRAM & PENJELASAN
Tipe pertama yang akan kita buat adalah external style. Berikut ini adalah contoh scriptnya:
<html>
<head>
<link rel=”Stylesheet” type”text/css” href=”opc.css”>
<title>Contoh CSS</title>
</head>
<h1>Page Membership</h1>
<h2> Raven Chronicles</h2>
<body>
<p>Hari yang biasa, keadaan yang biasa, dan kehidupan yang biasa. “Membosankan”, setidaknya itulah yang sedang dipikirkan Refan ketika ia sedang menatap ke luar jendela. Ya, Refan hanyalah seorang mahasiswa biasa di sebuah universitas swasta. Ia memiliki kehidupan yang biasa yang menurutnya hampir menjadi sebuah formalitas.”Aku butuh sesuatu yang menarik”, ujarnya.</p>
<p>Tak lama setelah ia menatap ke langit, tiba-tiba ia melihat seberkas cahaya biru jatuh dari kejauhan. “Apa itu barusan?”, pikirnya dengan ekspresi yang agak bingung. Segera saja ia bertanya kepada teman-temannya apakah ada yang melihat cahaya tersebut, namun sepertinya hanya dia sendiri yang dapat melihatnya.</p>
<p>Setelah kelas selesai dan dosen keluar ruangan, segera saja ia menghampiri tempat jatuhnya cahaya biru yang ia lihat dari langit tersebut, yang tak lain adalah halaman kampusnya sendiri. Ia sangat terkejut saat melihat apa yang ada di depan matanya. Ia melihat sebuah figur seseorang yang terkapar. Setelah diperhatikan, ia menyadari bahwa figur tersebut adalah seorang gadis berambut hijau mengenakan setelan baju baja dan tampak terluka. “Tidak mungkin..”, hanya kata-kata itulah yang terlintas di pikirannya saat itu. </body>
</html>
Pada external style, kita menggunakan CSS yang terdapat pada file yang berbeda dengan file HTML yang kita gunakan. Untuk melakukan hal tersebut, kita gunakan perintah <link rel=”Stylesheet” type”text/css” href=”opc.css”>. Dengan perintah tersebut, maka HTML akan membaca file dengan nama “opc.css” sebagai referensi gaya tulisan. Sedangkan script untuk file tersebut adalah seperti di bawah ini:
h1 {color:maroon;border:dotted ;background-color:red}
h2 {color:blue;border:dotted ;background-color:black}
p.part1 {color:black;text-align:center;border:dotted;background-color:red}
p.part2 {color:lime;text-align:center;border:dotted;background-color:yellow}
p.part3 {color:red;text-align:center;border:dotted;background-color:maroon}
Pada script tersebut dapat kita lihat masing-masing elemen dideskripsikan pengaturan tampilannya mulai dari color, text-align, border, dan background-colornya. Masing-masing elemen dideskripsikan satu persatu dimulai dari bagian h1, h2, serta bagian paragraf dengan dimulai dari nama class part1, part2 sampai class part 3.
Untuk tipe yang kedua, tipe yang akan kita gunakan adalah embedded type. Pada tipe ini, gaya tulisan dituliskan di awal script HTML. Berikut ini adalah contoh scriptnya:
<html>
<head>
<title>Contoh CSS</title>
<style>
h1 {color:maroon;border:dotted ;background-color:red}
h2 {color:blue;border:dotted ;background-color:black}
p.part1 {color:black;text-align:center;border:dotted;background-color:red}
p.part2 {color:lime;text-align:center;border:dotted;background-color:yellow}
p.part3 {color:red;text-align:center;border:dotted;background-color:maroon}
</style>
</head>
<h1>Page Membership</h1>
<h2> Raven Chronicles</h2>
<body>
<p>Hari yang biasa, keadaan yang biasa, dan kehidupan yang biasa. “Membosankan”, setidaknya itulah yang sedang dipikirkan Refan ketika ia sedang menatap ke luar jendela. Ya, Refan hanyalah seorang mahasiswa biasa di sebuah universitas swasta. Ia memiliki kehidupan yang biasa yang menurutnya hampir menjadi sebuah formalitas.”Aku butuh sesuatu yang menarik”, ujarnya.</p>
<p>Tak lama setelah ia menatap ke langit, tiba-tiba ia melihat seberkas cahaya biru jatuh dari kejauhan. “Apa itu barusan?”, pikirnya dengan ekspresi yang agak bingung. Segera saja ia bertanya kepada teman-temannya apakah ada yang melihat cahaya tersebut, namun sepertinya hanya dia sendiri yang dapat melihatnya.</p>
<p>Setelah kelas selesai dan dosen keluar ruangan, segera saja ia menghampiri tempat jatuhnya cahaya biru yang ia lihat dari langit tersebut, yang tak lain adalah halaman kampusnya sendiri. Ia sangat terkejut saat melihat apa yang ada di depan matanya. Ia melihat sebuah figur seseorang yang terkapar. Setelah diperhatikan, ia menyadari bahwa figur tersebut adalah seorang gadis berambut hijau mengenakan setelan baju baja dan tampak terluka. “Tidak mungkin..”, hanya kata-kata itulah yang terlintas di pikirannya saat itu. </body>
</html>
Pada tipe CSS tersebut, dapat dilihat bahwa script yang ada pada CSS kita tuliskan di bagian awal HTML dimana masing-masing elemen dideskripsikan pengaturan tampilannya mulai dari color, text-align, border, dan background-colornya. Masing-masing elemen dideskripsikan satu persatu dimulai dari bagian h1, h2, serta bagian paragraf dengan dimulai dari nama class part1, part2 sampai class part 3, sehingga HTML tersebut tidak perlu lagi untuk membaca file css yang terpisah.
Tipe CSS yang ketiga adalah inline type, dimana kita menuliskan gaya tulisan pada setiap awal tag yang ingin kita ubah. Contoh dari penggunaan inline type tersebut adalah sebagai berikut:
<html>
<head>
<title>Contoh CSS</title>
</head>
<h1 style=”color:maroon;border:dotted ;background-color:red”>Page Membership</h1>
<h2 style=”color:blue;border:dotted ;background-color:black”> Raven Chronicles</h2>
<body>
<p style=”color:black;text-align:center;border:dotted;background-color:red”>Hari yang biasa, keadaan yang biasa, dan kehidupan yang biasa. “Membosankan”, setidaknya itulah yang sedang dipikirkan Refan ketika ia sedang menatap ke luar jendela. Ya, Refan hanyalah seorang mahasiswa biasa di sebuah universitas swasta. Ia memiliki kehidupan yang biasa yang menurutnya hampir menjadi sebuah formalitas.”Aku butuh sesuatu yang menarik”, ujarnya.</p>
<p style=”color:lime;text-align:center;border:dotted;background-color:yellow”>Tak lama setelah ia menatap ke langit, tiba-tiba ia melihat seberkas cahaya biru jatuh dari kejauhan. “Apa itu barusan?”, pikirnya dengan ekspresi yang agak bingung. Segera saja ia bertanya kepada teman-temannya apakah ada yang melihat cahaya tersebut, namun sepertinya hanya dia sendiri yang dapat melihatnya.</p>
<p style=”color:red;text-align:center;border:dotted;background-color:maroon”>Setelah kelas selesai dan dosen keluar ruangan, segera saja ia menghampiri tempat jatuhnya cahaya biru yang ia lihat dari langit tersebut, yang tak lain adalah halaman kampusnya sendiri. Ia sangat terkejut saat melihat apa yang ada di depan matanya. Ia melihat sebuah figur seseorang yang terkapar. Setelah diperhatikan, ia menyadari bahwa figur tersebut adalah seorang gadis berambut hijau mengenakan setelan baju baja dan tampak terluka. “Tidak mungkin..”, hanya kata-kata itulah yang terlintas di pikirannya saat itu. </body>
</html>
Pada script tersebut masing-masing elemen dideskripsikan pengaturan tampilannya langsung di dalam tag penulisannya mulai dari color, text-align, border, dan background-colornya. Masing-masing elemen dideskripsikan satu persatu dimulai dari bagian h1, h2, serta bagian paragraf dengan dimulai dari nama class part1, part2 sampai class part 3.
OUTPUT PROGRAM
Tidak ada komentar:
Posting Komentar