PEMROGRAMAN WEB 1 CSS
advertisement
PEMROGRAMAN WEB 1
CSS
RIO ANDRIYAT KRISDIAWAN, M.KOM
Definisi CSS
◦ CSS adalah kepanjangan dari Cascading Style Sheet dan digunakan para web
designer untuk mengatur style elemen yang ada didalam halaman web serta
untuk mempercantik halaman website, CSS dapat mengerjakan apa yang tidak
bisa dikerjakan oleh HTML, mulai dari memformat text hingga pembuatan
layout. Disamping untuk mempercantik halaman web tujuan dari penggunaan
CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen
tertentu.
◦ CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet
language) yang mengontrol format tampilan sebuah halaman web yang ditulis
dengan menggunakan penanda(markup language)
Sedikit Sejarah CSS
◦ Perkembangan CSS sendiri diawali pada tahun 1996, dimana W3C (World
Wide Web Consortiom), sebuah konsorsium standarisasi web, menyusun draft
proposal untuk membuat CSS ini akhirnya dapat berjalan. Selanjutnya pada
pertengahan tahun 1998, W3C mengembangkan CSS2 yang dapat
diperbaharui untuk kepentingan media lain tidak hanya untuk PC web
browser. Akhirnya pada tahun 2000 telah dikembangkan CSS3 oleh W3C yang
sampai saat ini masih terus diperbaharui lagi.
◦ Namun tidak semua browser dapat mendukung CSS 3 biasanya untuk IE 6 ke
bawah belum mendukung fitur dari CSS3, dan Firefox V3 kebawah belum
sepenuhnya walaupun sudah beberapa telah mendukung fitur dari CSS3
Berbagai Macam Versi CSS
Saat ini, CSS telah mencapai pada versi yang ketiga, di mana pada setiap versi
selalu ada peningkatan. Adapun perbedaan antara CSS-1, CSS-2, hingga CSS-3?
1. CSS-1, dikembangkan dan berpusat pada formatting dokumen HTML.
2. CSS-2, dikembangkan untuk bisa memenuhi kebutuhan terhadap format
dokumen supaya bisa ditampilkan di printer. Pada CSS-2 ini mendukung juga
dalam penentuan posisi konten, downloadable, font, table-layout, dan media
type untuk printer.
3. CSS-3, merupakan versi pengembangan dari sebelumnya. Pada versi ini
terdapat beberapa tambahan dan mengarah pada efek animasi. Namun, saat
ini belum semua didukung oleh web browser.
Penulisan CSS
Struktur CSS
<style type="text/css">
Script CSS;
</style>
Aturan Penulisan
selector {property_1 : value_1; …; property_ke-n : value_ke-n}
H1{color:red; }
atau
H1{color:blue; size:40;}
Penulisan CSS
Penulisan kode CSS dibuat menjadi tiga bagian, yaitu:
selector {property_1 : value_1; …; property_ke-n : value_ke-n}
1.
Selector
Selector pada CSS sama dengan tag atau komponen pada HTML yaitu yang terdapat antara
tanda < dan tanda > misalnya <h1>, <p>, <b> dll.
2.
Property
Selector pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk memberi nilai dari
selector.
3.
Value
Value adalah nilai yang kita berikan kepada property
Contoh :
Jika di HTML kita memformat paragraf dengan <p align=”right”> maka dengan CSS menjadi p
{text-align: right;}
Contoh Script HTML+CSS
Penempatan CSS
Ada 3 Cara Penempatan CSS yaitu :
1. Internal CSS
Yaitu menuliskan secara langsung script CSS kedalam file HTML
2. External CSS
External CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css dan
terpisah dari file html dan didtempatkan di folder lain atau di folder yang sama
dengan file html tersebut. browser akan menbaca file tersebut dan akan
menampilkan file html sesuai dengan format yang telah kita atur dalam file CSS.
3. Inline CSS
Yaitu menuliskan secara langsung script CSS kedalam tag HTML
Internal CSS
Eksternal CSS
Inline CSS
Class dan Id Pada CSS
1. Class di CSS
CSS dapat diterapkan dengan nama class dan nama id, class dan id digunakan
untuk mengelompokan beberapa elemen supaya memiliki style sama. Secara
umum sintaks style secara umum adalah sebagai berikut :
.nama_kelas { property: value; }
Berbeda dengan penerapa yang langsung mengacu pada tag HTML metode CSS
dengan class ini selalu menggunakan tanda '.' (titik) sebagai penanda bahwa itu
adalah sebuah CSS yang akan diterapkan di class nantinya.
Class di CSS
Contoh lengkapnya adalah :
<style type=”text/css”>
.polesteks {color: green; size: 34;}
</style>
<body>
<b class=“polesteks”>Saya adalah CSS</b>
<p class=“polesteks”>Saya Juga adalah CSS</b>
</body>
Class di CSS
Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag
elemen html yang sama. Misalnya dua type paragraf, peragraf pertama
menggunakan align-left dan yang paragraf satu lagi menggunakan align-center.
Contoh Penggunaan atribut class di dalam HTML :
<style type=”text/css”>
.left {text-align: left}
.center {text-align: center}
</style>
<p class=”left”>Paragraf ini rata kiri</p>
<p class=”left”>paragraf ini rata tengah</p>
Id Pada CSS
2. Id pada CSS
ID bentuk penulisannya selalu menggunakan tanda # (kres) sebagai penanda
bahwa CSS akan diterapkan pada elemen id.
Contoh :
<style type=”text/css”>
#polesteks {color: green; size: 34;}
</style>
<body>
<b id=”polesteks”>Saya adalah CSS</b>
<p id=”polesteks”>Saya adalah CSS</b>
</body>
Id Pada CSS
ID selector digunakan dengan tujuan mendefinisikan per-elemen
dasar.
Setiap halaman id selector hanya boleh digunakan dengan satu id
unik, itulah yang menjadi perbedaannya dengan class selector.
Dengan class selector kita dapat mendefinisikan perbedaan style
untuk tag elemen html yang sama.
Tetapi dengan id selector kita hanya diperbolehkan memanggil satu
id untuk satu elemen yang sama.
Id Pada CSS
#tebal { font-weight : bold; color : red; }
#miring { font-style : italic; color: blue; }
<p id=”tebal”>Paragraf ini ditulis dengan huruf tebal dan warna
merah</p>
<p id=”miring”>Paragraf ini ditulis dengan huruf miring dan warna
biru</p>
Contoh Class CSS
Contoh Class CSS
Contoh Id CSS
Kesimpulan
CSS digunakan untuk mendesign Style dan tampilan Halaman WEB yang lebih
menarik.
PenempatanCSS bisa dilakukan dengan 3 Cara, yaitu External, Internal dan
Inline CSS.
Penerapan Penulisan CSS dapat dilakukan dengan menngunakan Class dan Id.