Tutorial Cascading Style Sheet ( CSS ) Dasar

Pada pembahasan materi kali ini kita akan mempelajari tentang Cascading Style Sheet atau biasa disebut CSS .
CSS merupakan kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML.

alt

Struktur Style pada CSS

alt

Selector digunakan untuk menentukan pada elemen apa style tersebut diterapkan.Selector dapat berupa nama id elemen atau nama class.
Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik.Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“.contoh penggunaan selector id

#huruf
    {
        text-align  :center;
        color       :red;
        font-family : arial;
    }

Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama .selector class didefinisikan dengan “.”
contoh penggunaan class.

.image
    {
        margin      : 12px;
        margin-left : 32px;
        width       : 150;
        height      : 50;
    }

Bagian deklarasi menerangkan style yang akan dibuat.
Properti digunakan untuk mengisi atribut dari selector seperti jenis warna, ukuran, perataan margin dll .
Sedangkan value diisi dengan nilai dari propertinya, misalnya red untuk warna dll.Setiap akhir penulisan properti dan value harus diakhiri dengan tanda titik koma (semicolon). Tanda ini juga digunakan sebagai pemisah antar satu properti dengan properti lain.
Coment pada Css digunakan untuk memberikan keterangan pada syntax css . komentar CSS diawali dengan /* dan diakhiri dengan */ .

/*This is a comment*/

Penerapan Css pada HTML memeliki beberapa cara sebagai berikut :
Eksternal style sheet

<html>  
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
     <body>
     </body>
</html>  

Untuk lebih memahami penerapan CSS berikut contoh penggunaan form dengan css :
alt

Berikut Source Code lengkapnya :

<!DOCTYPE html>  
<html>  
<head>  
    <title>Form dengan CSS</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body class="background">  
    <form name="page">
        <h3 align="center" >Form Menggunakan CSS </h3>
        <table border="1" cellpadding="10" cellspacing="2" align="center">
            <tr>
                <td> Nama </td>
                <td><input type="input" name="nama" class="inputText" ></td>
            </tr>
            <tr>
                <td> Alamat </td>
                <td><input type="input" name="alamat" class="inputText"></td>
            </tr>
            <tr>
                <td> Umur </td>
                <td><input type="input" name="umur" class="inputText"></td>
            </tr>
            <tr>
                <td></td>
                <td align="center">
                <input  type="button" value="kirim" size="20px" onclick="data()">
                <input  type="reset" value="ulang">
                </td>
            </tr>
        </table>
    </form>
</body>  
</html>  

Penjelasan Source Code

<link rel="stylesheet" href="style.css" /> Merupakan syntak untuk mendeklarasikan css .
style.css merupakan file yang akan menampung perintah css . isi style.css sebagai berikut :

.inputText { 
      color: #FFFFFF; 
      font-family: arial; 
      background: #FF0000; 
      font-weight: bold; 
 }

.background{
    background: #7CF016
} 

<td><input type="input" name="nama" class="inputText" ></td> class="inputText" akan meload selector id yang dideklarasikan dengaan inputText pada file style.css

<body class="background"> class="background" akan meload selector id yang dideklarasikan dengan background .

Source code berikut bisa didownload di https://github.com/era-belajar/Form-CSS

Marfi Saputra

Web Programmer di erabelajar.com (PT Ridaka Indonesia Cerdas) . Mengambil Kosentrasi Informatika Komputer di LP3I JAKARTA Kampus Depok