Pertemuan8

Pertemuman 8
CSS (Cascading Style Sheets)
Seiring dengan perkembangan teknologi HTML tersebut, berkembang pula sistem penulisan “style”
yang dinamakan CSS (Cascading Style Sheets). CSS versi pertama mulai diperkenalkan pada
Desember 1996. Sesuai dengan namanya Cascade Style Sheet, ditujukan sebagai tempat menuliskan
Style yang dipergunakan dalam halaman-halaman web.
Banyak hal dapat disiapkan dalam CSS misalnya untuk menentukan warna, jenis huruf, tata letak,
dan berbagai aspek tampilan dokumen. Dengan demikian, CSS terutama digunakan untuk
memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan
presentasi dokumen (yang ditulis dengan CSS).
Apa keuntungan penggunaan CSS ?
Keuntungan penggunaan CSS adalah sebagai berikut :
Dapat mengatur layout banyak halaman sekaligus dengan satu dokumen stylesheet.
Dapat mengatur layout halaman dengan lebih presisi.
Dapat mengaplikasikan layout yag berbeda pada jenis media yang berbeda (screen, print, dll.).
Tersedia dengan banyak teknik yang canggih.
Menghemat Bandwidth, karena stylesheet akan selalu disimpan pada cache browser dan
dipergunakan secara berulang.
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)
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.
Contoh penggunaan CSS dengan metode embedded style sheet: (simpan dgn nama CSS2.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>
• Tahukah anda bahwa setiap tag HTML dapat di beri ID.
• ID pada tag HTML berguna untuk pemanggilan tag tersebut melalui script

<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>

Contoh CSS metode embedded style sheet dengan class: (simpan dgn nama CSS3.htm)
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>
Contoh file .css: (simpan dgn nama StyleSheet4.css)
<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>
<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>

Contoh file HTML yang menggunakan file .css: (simpan dgn nama CSS4.htm)
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”
<HTML>
<Head>
<Title>Contoh Bentuk Linked</Title>
<Link rel=stylesheet href="StyleSheet4.css" type="text/css">
</Head>
<Body>
<H1 id="cth1">Judul ini berukuran 18!</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>

Cobalah buat HTML seperti berikut: (simpan dgn nama CSS5.htm)
Attribut font-size
Pada tag HTML penulisan attribut style untuk merubah ukuran font adalah font-size.
Pada script penulisan attribut style untuk merubah ukuran font adalah fontsize
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
<HTML>
<Script Language="JScript">
function ubah()
{
Kata1.style.color="green"
Kata2.style.color="purple"
Kata2.style.fontSize="30pt"
}
</Script>
<Body>
<Input type=button value="Tekan !" onclick="ubah()"><BR>
<Span ID="Kata1" style="color:blue">
Tekan Tombol di-atas, maka Warna text ini akan berubah
</Span> <BR>
<Span ID="Kata2" style="color:red ; font-size:15pt">
Percobaan, percobaan, percobaan, .....
</Span>
</Body>
</HTML>

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.
Cobalah buat HTML seperti berikut: (simpan dgn nama CSS6.htm)
<HTML>
<Style>
Span {font-size : 20pt}
</Style>
function tekan()
{
Kata2.style.color="green"
}
function lewat()
{
Kata1.style.color="red"
}
function keluar()
{
Kata1.style.color="blue"
}
</Script>
<Body>
<Span ID="Kata1" style="color:blue" onmouseover="lewat()"
onmouseout="keluar()">
watkan Mouse pada Text ini !!!
Le</Span>
<BR><BR>
<Span ID="Kata2" style="color:purple" onclick="tekan()">
Click Mouse pada Text ini !!!
</Span>
</Body>
</HTML>

Dan Cobalah buat HTML seperti berikut, serta bandingkan dengan yang sebelumnya!
(simpan dgn nama CSS7.htm)
<HTML>
<Style>
Span {cursor: hand; font-size: 18pt}
</Style>
function tekan()
{
tampung.value="Halo Semua !"
}
function lewat()
{
Kata1.style.color="red"
}
function keluar()
{
Kata1.style.color="blue"
}
</Script>
<Body>
<Span ID="Kata2" style="color:purple"
onclick="window.location.href='CSS6.htm'">
Link to Program-57
</Span><BR><BR>
<Span ID="Kata1" style="color:blue" onmouseover="lewat()"
onmouseout="keluar()" onclick="tekan()">
Lewatkan Mouse pada Text ini ! Lihat bentuk Mouse !!! <BR>
Click Text ini, maka Kotak Input dibawah ini akan risi "Halo
Semua !"
be</Span>
<BR><BR>
Kotak Input >> <input ID="tampung" Type=text>
</Body>
</HTML>

Pertemuan8

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Similar to Pertemuan8

Similar to Pertemuan8 (20)

More from Muhammad Romadhon

More from Muhammad Romadhon (11)

Pertemuan8