Pengertian CSS dan Contohnya

-

Pengertian CSS dan Contohnya


oleh : Radarbolang

Sudah pernah dengar CSS atau malah sudah pernah mempelajarinya. Kalo belum kuy kita belajar bareng-bareng,,.

 Apa itu CSS?
CSS atau Cascading Style Sheet merupakan sebuah script untuk memformat atau membuat layout halaman web menjadi lebih menarik dan mudah dikelola.
Didalam CSS terdapat banyak style.
CSS dapat dituliskan dibagian <body>,<head>,  suatu dokumen HTML atau sebuah file Eksternal.
Perintah-perintah CSS dibatasi oleh tag <style> dan </style>

Struktur Penulisan CSS

Dalam menggunakan CSS terdapat struktur yang harus anda ikuti, struktur ini digunakan agar browser mengerti apa yang kita ketikkan,
Berikut adalah struktur penulisan CSS


SELECTOR

Adalah nama yang diberikan untuk setiap style berbeda yang dibuat.
Di dalam style didefinisikan bagaimana setiap selector akan bekerja (font, color dan lain-lain.). Kemudian di dalam bagian body halaman web, selector tersebut dipanggil untuk mengaktifkan style yang telah didefinisikan.

Jenis-jenis selector:Selector HTMLSelector ClassSelector ID

  • Selector HTML
Digunakan untuk mendefinisikan style yang berhubungan dengan tag HTML, melakukan redefinisi tag normal HTML
Syntax: SelectorHTML {Properti:Nilai;}

Script HTML: Coba Contoh Berikut!

<html>
  <head>
     <title>Selector HTML</title>
     <style type="text/css">
         b {font-family:arial; font-size:14px; color:red}
     </style>
  </head>
  <body>

  1.      <b>Tulisan ini tebal karena menggunakan style CSS</b>
  </body>
</html>




  • Selector CLASS
Digunakan untuk mendefinisikan style yang dapat dipakai tanpa melakukan redefinisi tag HTML.
Syntax: ClassSelector {Properti:Nilai;}

Script HTML: Coba Contoh Berikut!

<html>
  <head>
     <title>Selector Class</title>
     <style type="text/css">
                .headline {font-family:papyrus; font-size:14px; color:blue;}
     </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>




  • Selector ID
Digunakan untuk mendefinisikan style yang berhubungan dengan suatu object memanfaatkan ID unik, biasa digunakan saat bekerja dengan layer
Syntax: #IDSelector {Properti:Nilai;}

Script HTML: Coba Contoh Berikut!

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

semoga bermanfaat
dan selamat mencoba
Salam Radar :)

Komentar

Posting Komentar