Sabtu, 30 Juni 2012

Pengenalan Awal CSS

Kali ini aku akan posting materi CSS yang telah aku dapat di SMK TELKOM pada saat kelas X semester 2. Penasaran ?? langsung aja wes :)


CSS adalah singkatan dari Cascading Style Sheets
Merupakan suatu cara untuk memformat atau membuat layout halaman web menjadi lebih menarik dan mudah dikelola. 
Dapat digunakan untuk :
- Merubah ukuran font
- Merubah warna background
- Mengatur perataan paragraf
dll

Cara menambahkan CSS ke dalam HTML
1. Linked/External Style Sheets
External style sheets merupakan dokumen css yang disimpan dalam file berbeda dengan file HTML. 
File ini berekstension .css. Untuk menyertakan file css, letakkan tag berikut ke dalam <head>…</head>
                       <link rel="stylesheet" type="text/css" href=“namafile.css" />
Biasa dipakai jika beberapa halaman akan menggunakan style yang sama.
CSS dapat didefinisikan untuk semua halaman hanya dengan menulis definisi CSS di dalam sebuah file teks yang selanjutnya dirujuk oleh setiap halaman web yang akan menggunakannya.
Dengan demikian jika suatu saat ingin dilakukan perubahan style yang berlaku untuk semua halaman Web maka yang diubah ada file teks eksternal tersebut.
Contoh :
ini file eksternalnya :
.headlines, .sublines, .infotext
  {
  font-family:arial;
  color:blue;
  background:cyan;
  font-weight:bold;
  }
  .headlines {font-size:14pt;}
  .sublines {font-size:12pt;}
  .infotext {font-size:10pt;}

ini script HTML nya
<html>
  <head>
     <title>Penggunaan CSS Eksternal</title>
     <link rel=stylesheet href="style.css" type="text/css">
  </head>
  <body>
     <span class="headlines">Selamat Datang</span><br>
     <div class="sublines">
          Ini adalah contoh penggunaan web yang menggunakan CSS.<br>
          Contoh ini menggunakan CSS Eksternal.<br>
           Pendefinisian pemanggilan style dilakukan dengan menggunakan tag link.<br>
     </div>
     <table border="2"><tr>
  <td class="sublines">
  Style juga dapat dilakukan dalam elemen table.
  </td></tr>
     </table>
     <hr>
     <div class="infotext">contoh penggunaan CSS eksternal</div>
     <hr>
  </body>
</html>





2. Internal Style
CSS dapat didefinisikan untuk satu halaman secara keseluruhan hanya dengan menambahkan suatu definisi style pada bagian head dokumen HTML.
contoh :
<html>
  <head>
     <title>Penggunaan CSS untuk satu halaman Web</title>
     <style type="text/css">
  .headlines, .sublines, .infotext {
  font-family:arial;
  color:blue;
  background:cyan;
  font-weight:bold;}
  .headlines {font-size:14pt;}
  .sublines {font-size:12pt;}
  .infotext {font-size:10pt;}
     </style>
  </head>
  <body>
     <span class="headlines">Selamat Datang</span><br>
     <div class="sublines"> Ini adalah contoh penggunaan web yang menggunakan CSS.<br>
  Contoh ini menggunakan CSS untuk satu halaman Web.<br>
  Pendefinisian style cukup dilakukan di tag head.<br>
     </div>
     <br>
     <table border="2"><tr>
  <td class="sublines"> Style juga dapat dilakukan dalam elemen table. </td></tr>
     </table>
     <br>
     <hr>
     <div class="infotext"> contoh penggunaan CSS untuk satu halaman
     </div>
     <hr>
  </body>
</html>

3. Inline Style 
CSS mendefinisikan tag tunggalnya hanya dengan menambahkan style seperti style="styledefinition:styleattribute;"
contoh :
<html>
  <head>
    <title>Penggunaan CSS Tag Tunggal</title>
  </head>
  <body>
     Ini adalah contoh
     <b style="font-size:16px;color:blue;"bold </b>
     dengan menggunakan CSS.
  </body>
</html>

Istilah dalam CSS
Style rule

Pendeklarasian : 

 selector { property1: value; property2:value, . . .}

contoh :

H1{ color:green; background-color:orange}

Style sheets terdiri dari dua bagian:

1. Selector

    Bagian pertama sebelum tanda “{}” disebut selector

2. Declaration

    Terdiri dari property dan value

 Antara property yang satu dan yang lainnya dipisahkan dengan tanda ; (titik koma)


Komentar dalam CSS
- Komentar biasa digunakan untuk memberi keterangan pada css yang dibuat.
Komentar tidak akan ditampilkan pada browser
Komentar dalam CSS dibuat dengan
     /* tulis komentar di sini */

HTML Selector
Diawali dengan tag html yang akan diberikan style
namatag {….}
Digunakan agar sebuah TAG bisa menggunakan deklarasi CSS tersebut
Misalnya P{font-color:red;}
Artinya paragraf tersebut akan di redefinisi menjadi warna merah
Contoh :

<html>
  <head>
     <title>Selector HTML</title>
     <style type="text/css">
         b {font-family:arial; font-size:14px; color:red}
     </style>
  </head>
  <body>
     <!-- memanggil selector b yang me-redefinisi-kan <b> -->
     <b>Tulisan ini tebal karena menggunakan style CSS</b>
  </body>
</html>

Class Selector
Diawali dengan tanda titik (.) dan diikuti nama class
.namakelas {….}
Digunakan agar sebuah objek bisa menggunakan deklarasi CSS tersebut
Misalnya <p class=‘judul’>…</p>
Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam class selector judul
Contoh : 
<html>
  <head>
     <title>Selector Class</title>
     <style type="text/css">
  .headline {font-family:arial; font-size:14px; color:red}
     </style>
  </head>
  <body>
       <b class="headline">
       Tulisan ini tebal karena pengaruh selector class headline 
       </b><br>
      <i class="headline"
      Tulisan ini dicetak miring karena selector class headline 
      </i>
  </body>
</html>

ID Selector
Diawali dengan tanda titik (#) dan diikuti nama id
#namaid {….}
Digunakan agar sebuah objek bisa menggunakan deklarasi CSS tersebut dan biasanya bersifat unik dalam sebuah halaman
Misalnya <p id=‘header’>…</p>
Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam id selector header
Contoh :
<html>
  <head>
     <title>Selector ID</title>
     <style type="text/css">
  #layer1 {position:absolute; left:100;top:75; z-index:2}
  #layer2 {position:absolute; left:130;top:120; z-index:1}
     </style>
  </head>
  <body>
     <div id="layer1">
  <table border="1" bgcolor="cyan">
  <tr> <td>Ini adalah layer 1<br>Diletakkan pada posisi (100,100)</td></tr>
  </table>
     </div>
     <div id="layer2">
  <table border="1" bgcolor="yellow">
  <tr><td>Ini adalah layer 2<br>Diletakkan pada posisi (130,120)</td></tr>
  </table>
     </div>
  </body>
</html>

Pengelompokkan Selector
Untuk beberapa style yang sebagian properti-nya memiliki nilai yang sama, misalnya jenis font yang sama;
mendefinisikan font tidak perlu dilakukan satu demi satu untuk setiap selector. Pendefinisian dapat
dikelompokkan, dengan cara melewatkan font ke semua selector dalam satu kali.
Contoh :
Sebelum pengelompokkan 
.headlines
  {
  font-family:arial;
  color:black;
  background:yellow;
  font-size:14pt;
  }
.sublines
  {
  font-family:arial;
  color:black;
  background:yellow;
  font-size:12pt;
  }
.infotext
  {
  font-family:arial;
  color:black;
  background:yellow;
  font-size:10pt;
  }

Setelah pengelompokkan 
.headlines, .sublines, .infotext
  {
  font-family:arial;
  color:black;
  background:yellow;
  }
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
































Tidak ada komentar:

Posting Komentar