pemrograman web 1 css...berbagai macam versi css saat ini, css telah mencapai pada versi yang...

PEMROGRAMAN WEB 1CSSRIO 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 sertauntuk mempercantik halaman website, CSS dapat mengerjakan apa yang tidakbisa dikerjakan oleh HTML, mulai dari memformat text hingga pembuatanlayout. Disamping untuk mempercantik halaman web tujuan dari penggunaanCSS ini adalah supaya diperoleh suatu kekonsistenan style pada elementertentu.

◦ CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheetlanguage) yang mengontrol format tampilan sebuah halaman web yang ditulisdengan 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 draftproposal untuk membuat CSS ini akhirnya dapat berjalan. Selanjutnya padapertengahan tahun 1998, W3C mengembangkan CSS2 yang dapatdiperbaharui untuk kepentingan media lain tidak hanya untuk PC webbrowser. Akhirnya pada tahun 2000 telah dikembangkan CSS3 oleh W3C yangsampai saat ini masih terus diperbaharui lagi.

◦ Namun tidak semua browser dapat mendukung CSS 3 biasanya untuk IE 6 kebawah belum mendukung fitur dari CSS3, dan Firefox V3 kebawah belumsepenuhnya walaupun sudah beberapa telah mendukung fitur dari CSS3

Berbagai Macam Versi CSSSaat ini, CSS telah mencapai pada versi yang ketiga, di mana pada setiap versiselalu 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 formatdokumen supaya bisa ditampilkan di printer. Pada CSS-2 ini mendukung jugadalam penentuan posisi konten, downloadable, font, table-layout, dan mediatype untuk printer.

3. CSS-3, merupakan versi pengembangan dari sebelumnya. Pada versi initerdapat beberapa tambahan dan mengarah pada efek animasi. Namun, saatini belum semua didukung oleh web browser.

Penulisan CSSStruktur 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 CSSPenulisan kode CSS dibuat menjadi tiga bagian, yaitu:

selector {property_1 : value_1; …; property_ke-n : value_ke-n}

1. SelectorSelector pada CSS sama dengan tag atau komponen pada HTML yaitu yang terdapat antaratanda < dan tanda > misalnya <h1>, <p>, <b> dll.

2. PropertySelector pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk memberi nilai dariselector.

3. ValueValue 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 CSSAda 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 danterpisah dari file html dan didtempatkan di folder lain atau di folder yang samadengan file html tersebut. browser akan menbaca file tersebut dan akanmenampilkan 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 CSS1. 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 ituadalah sebuah CSS yang akan diterapkan di class nantinya.

Class di CSSContoh 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 CSSDengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya dua type paragraf, peragraf pertamamenggunakan align-left dan yang paragraf satu lagi menggunakan align-center.Contoh Penggunaan atribut class di dalam HTML :


.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 CSS2. Id pada CSS

ID bentuk penulisannya selalu menggunakan tanda # (kres) sebagai penanda

bahwa CSS akan diterapkan pada elemen id.

Contoh :


#polesteks {color: green; size: 34;}

</style>

<body>

<b id=”polesteks”>Saya adalah CSS</b>

<p id=”polesteks”>Saya adalah CSS</b>

</body>

Id Pada CSSID selector digunakan dengan tujuan mendefinisikan per-elemendasar.

Setiap halaman id selector hanya boleh digunakan dengan satu idunik, itulah yang menjadi perbedaannya dengan class selector.

Dengan class selector kita dapat mendefinisikan perbedaan styleuntuk tag elemen html yang sama.

Tetapi dengan id selector kita hanya diperbolehkan memanggil satuid 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 warnamerah</p><p id=”miring”>Paragraf ini ditulis dengan huruf miring dan warnabiru</p>

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 danInline CSS.

Penerapan Penulisan CSS dapat dilakukan dengan menngunakan Class dan Id.

pemrograman web 1 css...berbagai macam versi css saat ini, css telah mencapai pada versi yang...

Documents