Materi 3 - CSS

Cascade Style Sheet
(CSS)

Euis Marlina, S.Kom
Email : euismarlina@gmail.com
http://euismarlina.edublogs.org
HP : 08179424319
Pengantar
 Cascading Style Sheet adalah suatu teknologi yang
digunakan untuk memperindah tampilan halaman
website. Singkatnya dengan menggunakan Metode CSS
ini anda dengan mudah mengubah secara keseluruhan
warna dan tampilan yang ada di situs anda, sekaligus
memformat ulang situs anda (merubah secara cepat).
 Dengan CSS, anda dapat lebih mempercantik tampilan

web. Baik dari style teks, button, textfield, tabel dan lain-
lain.
 Contoh :
<STYLE TYPE="text/css">
B { color : lime }
</STYLE>
 Artinya kode CSS di atas adalah: setiap teks yang ada di
dalam tag B pada bagian body, maka warnanya akan berubah
menjadi lime.
Ketentuan Dasar CSS
 Setiap "Style Rule" atau peraturan/perintah CSS, terdiri dari

dua elemen dasar yaitu :
 "selector" dan "declaration"
 "selector" biasanya adalah tag HTML (dalam hal ini B),
sementara "declaration" adalah satu atau beberapa
perintah/nilai dari css yang menunjukkan type bentuk yang
diaplikasikan pada selector.
 Declaration ini biasanya di tandai dengan kurung kurawal,
dan perintah/nilai css yang berbeda dipisahkan satu dengan
yang lain dengan menggunakan titik-koma.
Contoh
B {
color: lime;
text-decoration: underline;
font-family: Arial
}
</STYLE>
Jenis Penempatan CSS
 Di dalam tag HTML langsung

Contoh CSS pada tag <P> :
<P STYLE="text-align: center; font-weight: bold">
 Di dalam file HTML

Contoh :
B { color : lime }
</STYLE>
Diletakkan di bagian atas sebelum tag body.
 Di dalam file CSS tersendiri, yang mana satu file CSS ini
dapat digunakan untuk semua file HTML yang ada.
 Untuk menggunakan file CSS tersebut, tambahkan code

berikut sebagai tanda untuk memanggil file CSS.
<HEAD>
<LINK REL="stylesheet" HREF="global.css"
TYPE="text/css">
</HEAD>
Artinya code di atas yaitu, memanggil file global.css untuk
dapat digunakan pada file tersebut.
Classes
 CSS juga mengijinkan kita untuk menyatukan elemen-

elemen secara bersamaan didalam sebuah kelas(classes)
dan menerapkannya aturan Style-Sheet kedalam sebuah
class.
 Definisi class CSS ditandai dengan tanda titik sebelum
nama class-nya.
Class CSS untuk TextField
Contoh class LongText :
/*setting textfield panjang*/
.LongText
{
background-color: #3399CC;
border-width: 1;
color: #ffffff;
font-size: 9pt;
font-family: Tahoma;
border-color: #336699;
boder-style:ridge;
width:220;
height:22;
}
Class CSS untuk Button
 Contoh class dottedbutton :
/*setting button dgn border garis potong2*/
input.dottedbutton
{
font-size:10px;
font-family:Verdana,sans-serif;
font-weight:bold;
color:#FFFFFF;
width:200px;
height:30px;
background-color:#3399CC;
border-style:dotted;
}
 Untuk menggunakan CSS button tadi, letakan pada tag
button, sbb.
<input name="simpan" type="submit"

value="Simpan" class="dottedbutton">
 Sedangkan untuk menggunakan CSS textfiel tadi, letakan

pada tag textfield, sbb.
 <input name="id_prioritas" type="text"

class=“LongText">
CSS untuk Teks
.judul{
font-family:Tahoma;
font-size:10pt;
font-weight:bold;
}
.teks{
font-family:Tahoma;
color:black;
font-size:9pt;
}
Cara menggunakannya :
<td height="40" colspan="3" class="judul"></td>
<tr class="teks"></tr>

Materi 3 - CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Materi 3 - CSS

Uploaded by

Copyright:

Available Formats

Cascade Style Sheet

Euis Marlina, S.Kom

 Dengan CSS, anda dapat lebih mempercantik tampilan

 Setiap "Style Rule" atau peraturan/perintah CSS, terdiri dari

 Di dalam tag HTML langsung

 Di dalam file HTML

 Untuk menggunakan file CSS tersebut, tambahkan code

 CSS juga mengijinkan kita untuk menyatukan elemen-

<input name="simpan" type="submit"

 Sedangkan untuk menggunakan CSS textfiel tadi, letakan

 <input name="id_prioritas" type="text"

You might also like