Cascade Style Sheet (CSS) - PowerPoint

Document Sample
Cascade Style Sheet (CSS) - PowerPoint Powered By Docstoc
					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
<STYLE TYPE="text/css">
  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 :
    <STYLE TYPE="text/css">
    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>