Ad 468 X 60

Senin, April 01, 2013

Apa Itu CSS ?

Posted By Unknown , Senin, April 01, 2013 Be the first to comment!
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.



Bagaimana cara menuliskan CSS ?
Ada beberapa cara untuk menuliskan style pada sebuah halaman HTML:
1. Inline style
Inline styles digunakan bila ingin mengatur format pada satu bagian dokumen HTML saja. Inline styles diletakkan pada bagian yang ingin diatur tampilan tulisannya. Dalam hal ini style dituliskan sebagai atribut dari sebuah Tag. Penggunaan inline style Pada sebuah Tag <H1> ditambahkan style untuk menggunakan jenis font Arial. Tag <H1> yang biasanya ditulis
<h1> … </h1>
dapat ditambahkan dengan atribut style berikut jenis properti style yang ingin digunakan. Sehingga sekarang dituliskan sebagai berikut :
<h1 style=”"> … </h1>
Ditambahkan properti style, yakni font-family, berikut nilainya, yakni Arial menjadi sebagai berikut :
<h1 style=”font-family:Arial;”> … </h1>
Contoh :
<h1 style=”font-family:Arial, Helvetica, sans-serif;”> Tulisan dengan font Arial </h1>
Akan ditampilkan sebagai berikut :

Tulisan dengan font Arial

Jika ingin ditambahkan properti lain pada style tersebut, dapat dituliskan dengan menggunakan separator berupa tanda titik-koma ( ; ) Contoh :
<h1 style=”font-family:Arial, Helvetica, sans-serif; color:Green;”> Tulisan Arial berwarna Hijau </h1>
Akan ditampilkan sebagai berikut :

Tulisan Arial berwarna Hijau

CSS Cascading Style Sheet : Salah satu fasilitas yang diberikan untuk pemrograman HTML sehingga pengaturan/disain tampilan web-page menjadi lebih baik.
Dengan atribut CSS, user diberi kemampuan untuk:
- Mengatur posisi secara absolut
- Mengubah warna
- Mengubah besar font
- Mengubah margin
- Dsb.
Ada tiga metode cara penulisan CSS atribut, yaitu:
1. Inline Style Sheet
2. Embedded Style Sheet
3. Linked Style Sheet
 

INLINE STYLE SHEET

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=” …. “ didalam tag HTML tersebut.
style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
 Contoh penulisan CSS dengan metode inline style sheet: (simpan dgn nama CSS1.htm

HTML<>

<Head>
<Title>Contoh Bentuk Inline</Title>
</Head>
<Body bgcolor="#FFFFFF">
<P id="cth1">
Ini adalah contoh tag P tanpa diformat menggunakan CSS </P>
<P id="cth2" style="font-size:20pt">
tag P ini di Format dengan besar font 14 point
</p>
<P id="cth3" style="font-size:14pt ; color:red">
tag P ini di Format dengan besar font 14 point, dan menggunakan warna merah
</p>
</Body>
</HTML>
 
EMBEDDED STYLE SHEET 


CSS didefinisikan terlebih dahulu dalam tag <style> ……</style> di atas tag <body>.
Pada pendefinisian ini disebutkan atribut – atribut CSS yang akan digunakan untuk tag-tag HTML yang selanjutnya tinggal digunakan oleh tag HTML yang bersangkutan.
 
• Tahukah anda bahwa setiap tag HTML dapat di beri ID.
• ID pada tag HTML berguna untuk pemanggilan tag tersebut melalui script 


Contoh penggunaan CSS dengan metode embedded style sheet: (simpan dgn nama CSS2.htm)


<HTML>
<Head>
<Title>Contoh Bentuk Embedded</Title>
</Head>
<Style>
Body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
H1 {font-size:18pt; color:#FF0000}
P {font-size:12pt; font-family:arial; text-indent:0.5in}
</Style>
<Body>
<H1 id="cth1">Judul ini berukuran 18 dengan warna merah!</H1>
<P id="cth2">
Tag P ini di Format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch
</p>
<P id="cth3">
Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru
</p>
</Body>
</HTML>
 
<Style>
Body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
H1 {font-size:18pt; color:#FF0000}
P {font-size:12pt; font-family:arial; text-indent:0.5in}
</Style>
<Body>

<H1 id="cth1">Judul ini berukuran 18 dengan warna merah!</H1>
<P id="cth2">
Tag P ini di Format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch
</p>
<P id="cth3">
Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru
</p>
</Body>
</HTML> 


Contoh CSS metode embedded style sheet dengan class: (simpan dgn nama CSS3.htm)

<HTML>
<Head>
<Title>Contoh Bentuk Embedded dengan Class</Title>
</Head>
<Style>
P.merah {font-size:12pt; color:red}
P.biru {font-size:12pt; color:blue}

</Style>
<Body>
<P id="cth1"> Ini adalah tag P Standard</P>
<P id="cth2" Class="biru"> Tag P ini adalah Class Biru</p>
<P id="cth3" Class="Merah"> Tag P ini adalah Class Merah</p>
</Body>
</HTML> 
 














LINKED STYLE SHEET

Metode ini hampir sama dengan metode embedded style sheet, hanya saja pendefinisian tag <style> …. </style> dibuat pada file terpisah dari file HTML yang membutuhkan CSS tersebut. File lain tersebut di simpan dalam format .css
Pada file HTML yang akan menggunakan file CSS tersebut harus dibuat tag <link> yang dituliskan diantara tag <head> … </head>

<Style>

Body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
H1 {font-size:18pt; color:#FF0000}
P {font-size:12pt; font-family:arial; text-indent:0.5in}
</Style>
 

ISI ELEMEN STYLE YG DINAMIS 

Sekarang kita akan mempelajari cara merubah attribut style suatu CSS pada saat run-time. Hal ini dapat dilakukan dengan metode scripting, yaitu pengubahan attribut style dengan menggunakan script.
Jangan lupa untuk selalu memberikan attribut ID pada setiap tag HTML, yang nantinya program script akan mengakses tag HTML tersebut dengan menyebutkan ID -nya.

Attribut color

Perhatikan potongan HTML berikut:
<P ID=”Coba” style=”color:blue”>coba-coba</P>
Tag <P> pada potongan HTML di atas memiliki ID = coba, sehingga nantinya pada script. Apabila kita ingin mengubah warna tulisan coba-coba menjadi merah, dapat dilakukan dengan script sebagai berikut:
Coba.style.color=”red”

EVENT – EVENT UNTUK TAG HTML
Beberapa event untuk tag HTML dapat dimanfaatkan untuk membuat page terlihat lebih baik. Berikut ini adalah event – event tersebut:
- onMouseOver
Jika mouse sedang digerakkan dan berada pada daerah <span>
- onMouseOut
Jika mouse keluar dari daerah <span>
- onClick
Jika mouse di click pada daerah <span>.

Event – event tersebut di atas dapat dimanfaatkan untuk memanggil fungsi pada script, hal ini memberikan fleksibilitas bagi user untuk memperindah tampilan page-nya agar menjadi dinamis.

Get Free Email Updates Daily!

0 komentar:

Langganan: Posting Komentar (Atom)