Arsip Tag: attribute

Sekilas Cascading Stylesheet (Bagian 1)

Cascading Stylesheet(CSS) adalah suatu teknik untuk mengubah tampilan halaman web agar menjadi lebih menarik. Ada 3 (tiga) cara untuk memanfaatkan teknik ini, yaitu:

  1. Memisahkan skrip CSS pada sebuah file berekstensi *.css kemudian memanggilnya pada dokumen HTML 
    <link rel="stylesheet" href="namafile.css" type="text/css" />
  2. Menuliskan secara langsung pada dokumen HTML pada kalang <STYLE> 
    <style type="text/css">
    [skrip css di sini]
</style>
  3. Menuliskan secara langsung pada tag/elemen HTML tertentu pada dokumen HTML 
    <div style="[skrip css di sini]">

Jika menuliskan CSS menggunakan cara nomor 1 dan 2, maka Anda dapat memformat tampilan dari berbagai elemen dengan id dan class apapun, sementara cara nomor 3 hanya akan memformat tampilan dari elemen yang sedang dipilih.

Untuk memformat dengan cara nomor 1 dan 2, suatu skrip CSS harus merujuk kepada elemen umum atau elemen khusus (yang memiliki atribut tertentu) yang akan diformat, seperti berikut ini:

   /* Memformat dengan mengacu pada elemen */
   div {
       border: 1px solid rgb(0, 0, 0);
       color: red;
   }
   /* 
   Memformat dengan mengacu pada elemen khusus 
   yang memiliki atribut id dengan nilai "header" 
   */
   #header {
       font-size: 14px;
   }
   /* 
   Memformat dengan mengacu pada elemen khusus 
   yang memiliki atribut class dengan nilai "title" 
   */
   .title {
       fonr-weight: bold;
   }

Sebagai contoh, buatlah sebuah folder dengan nama “test-css” di alamat D:\xampp\htdocs, kemudian ketikkan skrip berikut ini pada Notepad++.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test CSS</title>
        <style type="text/css">
           /* Memformat dengan mengacu pada elemen */
           body{
               font-size: 12px;
           }
           div {
               border: 1px solid rgb(0, 0, 0);
               color: red;
           }
           /* 
           Memformat dengan mengacu pada elemen khusus 
           yang memiliki atribut id dengan nilai "header" 
           */
           #header {
               font-size: 18px;
               border: 1px solid rgb(0, 255, 0);
           }
           #content {
               font-size: 14px;
               color: black;
           }
           /* 
           Memformat dengan mengacu pada elemen khusus 
           yang memiliki atribut class dengan nilai "title" 
           */
           .title {
               font-weight: bold;
               border: 1px solid rgb(255, 0, 0);
           }
        </style>
    </head>
    <body>
        <div>
            Test Div umum, hasil:<br />
            div akan dibingkai (border) warna hitam <br />
            warna huruf merah <br />
            ukuran huruf 12px <br />
        </div>

        <div id="header">
            Test Div dengan id = header, hasil:<br />
            div akan dibingkai (border) warna hijau <br />
            warna huruf merah <br />
            ukuran huruf 18px <br />
        </div>

        <div class="title">
            Test Div dengan class = title, hasil:<br />
            div akan dibingkai (border) warna merah  <br />
            warna huruf merah <br />
            ukuran huruf 12px <br />
            format huruf tebal <br />
        </div>

        <div id="content" class="title">
            Test Div dengan id = content dan class = title, hasil:<br />
            div akan dibingkai (border) warna merah  <br />
            warna huruf hitam <br />
            ukuran huruf 14px <br />
            format huruf tebal <br />
        </div>
    </body>
</html>

Simpan dengan nama “index.htm”, uji coba pada peramban Anda dengan menuliskan: http://localhost/test-css/
Selain itu, CSS juga dapat memformat elemen yang lebih khusus lagi, seperti memformat elemen yang merupakan “anak” dari elemen tertentu, silakan modifikasi skrip sebelumnya menjadi seperti berikut ini:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test CSS</title>
        <style type="text/css">
           /* Memformat dengan mengacu pada elemen */
           body{
               font-size: 12px;
           }
           div {
               border: 1px solid rgb(0, 0, 0);
               color: red;
           }
           /* 
           Memformat dengan mengacu pada elemen khusus 
           yang memiliki atribut id dengan nilai "header" 
           */
           #header {
               font-size: 18px;
               border: 1px solid rgb(0, 255, 0);
           }
           #content {
               font-size: 14px;
               color: black;
           }
           /* 
           Memformat dengan mengacu pada elemen khusus 
           yang memiliki atribut class dengan nilai "title" 
           */
           .title {
               font-weight: bold;
               border: 1px solid rgb(255, 0, 0);
           }
           #header > span{
                background: rgb(192,192,192);
                padding: 4px;
               color: black
           }
        </style>
    </head>
    <body>
        <div>
            Test Div umum, hasil:<br />
            div akan dibingkai (border) warna hitam <br />
            warna huruf merah <br />
            ukuran huruf 12px <br />
            <span>Test span pada div</span>
        </div>

        <div id="header">
            Test Div dengan id = header, hasil:<br />
            div akan dibingkai (border) warna hijau <br />
            warna huruf merah <br />
            ukuran huruf 18px <br />
            <span>Test span pada header</span>
        </div>

        <div class="title">
            Test Div dengan class = title, hasil:<br />
            div akan dibingkai (border) warna merah  <br />
            warna huruf merah <br />
            ukuran huruf 12px <br />
            format huruf tebal <br />
            <span>Test span pada title</span>
        </div>

        <div id="content" class="title">
            Test Div dengan id = content dan class = title, hasil:<br />
            div akan dibingkai (border) warna merah  <br />
            warna huruf hitam <br />
            ukuran huruf 14px <br />
            format huruf tebal <br />
        </div>
    </body>
</html>

Silakan uji coba. Perhatikanlah bahwa elemen <SPAN> yang merupakan “anak” dari elemen div dengan id = header tampil berbeda dengan elemen pada div lainnya, akibat dari skrip:

#header > span{
    background: rgb(192,192,192);
    padding: 4px;
    color: black
}

Skrip di atas, dapat juga Anda tulis seperti berikut:

#header span{
    background: rgb(192,192,192);
    padding: 4px;
    color: black
}