Tuesday, October 4, 2011

Contoh Penggunaan CSS

  No comments
CSS ( Cascading Style Sheets) adalah merupakan bahasa pemrograman yang dipergunakan untuk membuat halaman web yang ditulis dengan kode HTML atau XHTML. Sesuai dengan namanya, CSS digunakan untuk mengatur Style atau tampilan dari sebuah website seperti pengaturan font, warna dan bentuk font, background, dsb. Kelebihan CSS adalah memungkinkan Anda untuk mengontrol tampilan halaman situs secara bersamaan dari satu file (file .css).

Gimana seh cara menggunakan CSS ?? Misalkan kita akan membuat tabel daftar nilai menggunakan CSS maka yang pertama adalah kita buat dulu html-nya setelah itu baru dibuat CSS-nya lihat coding dibawah ini :




<body>
    <table align = "center" border = "1">
       <tr>
        <td>
            <div id="headerTabel">
                <div>Hasil Studi Semester III Tahun Akademik 2010-2011</div>
                <div><u>Universitas Kristen Satya Wacana</u></div>
            </div>
      
            <div id = "headerTabel2">
                <p>
                    <div >
                        Nama     : NAMA ANDA
                    </div>
                    <div >
                        NIM      : NIM ANDA
                    </div>
                    <div >
                        Fakultas : FAKULTAS ANDA
                    </div>
                </p>
            </div>

                <table id = "hasilStudi" border ="1">
                    <tr class = "alt3">
                        <th>No.</th>
                        <th>Kode</th>
                        <th>Mata Kuliah</th>
                        <th>B/U</th>
                        <th>SKS</th>
                        <th>Nilai</th>
                        <th>AK</th>
                    </tr>
      
                    <tr class = "alt2">
                        <td>1</td>
                        <td>IT112E</td>
                        <td>Aljabar Linear dan Matriks</td>
                        <td>B</td>
                        <td>3</td>
                        <td>BC</td>
                        <td>7.5</td>
                    </tr>
      
                    <tr class = "alt">
                        <td>2</td>
                        <td>IT114P</td>
                        <td>Bahasa Inggris Profesi 2</td>
                        <td>B</td>
                        <td>2</td>
                        <td>B</td>
                        <td>6.0</td>
                    </tr>

                    <tr class = "alt2">
                        <td>3</td>
                        <td>IT250F</td>
                        <td>Algoritma dan Struktur Data Lanjutan</td>
                        <td>B</td>
                        <td>3</td>
                        <td>A</td>
                        <td>12.0</td>
                    </tr>
      
                    <tr class = "alt">
                        <td>4</td>
                        <td>IT209E</td>
                        <td>Pemrograman Berorientasi Objek</td>
                        <td>B</td>
                        <td>3</td>
                        <td>A</td>
                        <td>12.0</td>
                    </tr>
      
                    <tr class = "alt2">
                        <td>5</td>
                        <td>IT113J</td>
                        <td>Pendidikan Pancasila</td>
                        <td>B</td>
                        <td>2</td>
                        <td>B</td>
                        <td>6.0</td>
                    </tr>
      
                    <tr class = "alt">
                        <td>6</td>
                        <td>IT233L</td>
                        <td>Organisasi dan Ars. Komputer</td>
                        <td>B</td>
                        <td>2</td>
                        <td>A</td>
                        <td>8.0</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>


</body>
</html>

Nah jika sudah buat HTML-nya sekarang kita buat CSS-nya, oh iya  teman-teman untuk pemanggilan CSS ini jika dibuat #header misalnya maka pemanggilan CSS header harus menggunakan id ="header"kalau menggunakan .header pemanggilan nya menggunakan class = "header".
CSS untuk code diatas :
#hasilStudi {
            font-family : "Arial"; width  : 100%; color  : black;
            text-align : center; border-collapse : collapse; border : 1px solid #000000;    
        }
 
        #hasilStudi td {
         font-size : 12; color:blue;
        }
        
        #hasilStudi tr.alt td {
            color:blue; background-color:#EAF2D3;
        }
        
        #hasilStudi tr.alt2 td {
            color:green;        
        }
        
        #hasilStudi tr.alt3 th {
            color : black; background-color: yellow; text-align : center; font-size  : 12;
        }
            
        #headerTabel {
        font-family : "Times New Roman"; font-size  : 15;
        color       : black;   text-align :center;
        }
        
        #headerTabel2 { align : justify; font-family :"Cambria"; font-size : 11;}
        
        #tabelLuar { table-align : center;}



Selamat mencoba... GBU

No comments :