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.