Overview CSS

Assalamualaikum Warohmatullahi Wabarokatuh

Ok setelah seblumnya gue udah jelasin sedikit utawi bahas kerennya OVERVIEW HTML, nah sekarang baru kita overview sedikit mengenai CSS.

Apa itu css???

          CSS itu suatu bahasa presentation atau bahasa pemrograman untuk mempercantik suatu program utama, bisa disebut “klambine website” itu kata guru gue. Nah kenapa harus pake CSS?

Untuk menjawab pertanyaan di atas gue mau kasih contoh kecil saja dari gue.

Itu gambar dari gue yang membuat crud. Dan itu tanpa sentuhan css sama sekali!!

Ini scriptnya form tambah datanya

<center>
  <h1>Halaman Tambah Data</h1>
  <form method="post">
  <table>
 <tr>
<tbody>
    <tr>
    <td style="font-size: 24px;" align="center">Silahkan Tambahkan<br><hr> Data siswa baru</td>
    <td>
<input type="text" name="nama_siswa" placeholder="nama siswa" required="">
    <br>
    <input type="radio" name="jenis_kelamin" value="LK" required="">Laki Laki
    <input type="radio" name="jenis_kelamin" value="LK" required="">Perempuan
    <br>
    <input type="text" name="alamat" placeholder="alamat" required="">
    <br>
    <input type="text" name="kelas" placeholder="kelas" required="">
    <br>
   
    </td>
    </tr>
    <tr>
    <td>
    <input class="su" type="submit" name="tambah" value="tambah data">
    <input class="mblo" type="reset" name="nama" value="hapus">
          <a href="index.php" style="text-decoration: none;">
      <input type="button" name="name1" value="batal">
           </a>
      </td>
      </tr>
</tbody>
      </tr>
</table>
</form>
</center>

Jadi jelas kan scriptnya. itu tadi scriptnya table form. lalu coba tambahin kode ini ke paling atas <style type="text/css">/*disini lalu diubah dengan kode CSS dibawah ini*/</style>

nah kemudian elo isi tuh yang ada komentar, OH YA komentar dalam css itu begini /* isi komentar */ .sekarang lihat contoh punya gue, dan terserah loe mau niru script gue apa nggak terserah. 

/*ini kelas*/
  .cd{
    width: 600px;
    height: auto;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    background-color: azure;
    margin-top: 13%;
    border-left: 7px solid lime;
    border-radius: 15px;
    padding: 10px;
  }
  /*ini id*/
#ig{
    width:96%;
    height: 30px;
    border-bottom-right-radius:15px;
    border-top-left-radius: 15px;
    border:2px solid lime;
    font-weight: bold;
    color: lime;
    padding-left: 10px;
    margin-top: 4px;
  }
  .rad{
    color: lime;
    margin-bottom: -14px;
    margin-top: 4px;
    font-weight: bold;
  }
  .but{
    width: 32%;
    height: 30px;
    border: 2px solid lime;
    border-radius: 13px;
    background: white;
    color: lime;
    font-size: 13.5px;
    font-weight: bolder;
  }
  .but:hover{
    border: 2px solid white;
    background: lime;
    color:white;
  }

Nah itu contoh dari gue. sekarang loe jalanin tuh diweb. jangan lupa save dulu dengan extensi .HTML, lalu bro jalaanin tuh di browser.
kalau loe niru dengan baik, cermat, dan teliti loe bakal dapet tampilan yang kayak gini.
taraaaa

nah kalau kamu sudah bisa CSS loe bakalan gampang paham yang gue tulis disitu. nah ini baru overview saja jadi ikutin terus yah.

see you next time. and good bye

wassalamualaikum warohmatullahi wabarokatuh

sory kalo ada kesalahan(gue bukan master)

#jomblowers