Komputer

CSS (Cascading Style Sheet) bag 2

2 Comments

Menunggu memang suatu pekerjaan yang sangat membosankan. untuk menghilangkan kebosanan sambil menunggu ada baiknya memposting sedikit ilmu yang dimiliki, mudah besar manfaatnya.

Pada posting sebelumnya kita sudah membahas membuat form (contoh Form Login) dengan metode pertama yaitu langsung ditulis dalam barisnya (inline Style). sekarang kita lanjut dengan metode ketiga dengan menggunakan CSS penulisan style terpisah dari halaman HTML (external style).

Dalam hal ini sengaja diterangkan yang metode ketiga dahulu dengan maksud agar lebih mudah dipahami dan mudah mengerjakan tentunya.

Script File HTML pada metode pertama duplikatkan (copas). lalu File hasil duplikat pertama edit hapus semua style nya dan ganti dengan id=”initialid” serta tambahkan satu baris diantra <head>… <link rel=”stylesheet” type=”text/css” href=”namafileCSS.css”> atau <style type=”text/css”>@import url(namafilecss.css)</style> …</head> sehingga hasilnya seperti script dibawah ini.

Script File HTML –>

<html>
<head>
<title>Halaman login</title>
<link rel=”stylesheet” type=”text/css” href=”namafilecss.css”>
</head>
<body id=”bdWarna”>
<div id=”hlmLogin”>

<fieldset id=”grBox”><legend>Silahkan Login Dahulu !</legend>

<form>

<p id=”text-input”>User ID <input type=text name=”userid1″ size=3 id=”user-input”></p>
<p id=”text-input”>Password <input type=password name=”pswd1″ size=3 id=”pswd-input”></p>
<input type=button name=btn_login onclick=”alert(‘belum ada koneksi’)” value=”Login” id=”btnLogin”>
<input type=button name=btn_cancel onclick=”btnCancel()” value=”Cancel” id=”btnCancel”>

</form>

</fieldset>

</d iv>
</body>
</html>

Kemudian jalankan atau double click Browser terbuka dan hasilnya jadi rusak alias tidak seperti yang pertama. Sekarang buka file kedua (duplikat file) lalu hapus semua tulisan kecuali bagian style lalu ganti style dengan “tanda # ditambah” initialid dan atur sedemikian rupa sehingga hasilnya spt script dibawah atau dapat juga copas script dibawah ini.
Kemudia save as dengan nama file berextention “css” (namafileCSS.css). kemudian jalankan file yang di edit pertama dan hasilnya kembali seperti semula.

Script File CSS –>
#bdWarna{
background-color:#00FFFF;
}
#hlmLogin{
margin-left:35%;
margin-top:15%;
border:3px solid #a1a1a1;
padding: 10px 35px;
box-shadow: 7px 7px 6px;
border-radius:35px;
background:#CCFF99;
width:250;
height:130;
}
#grBox{
height: 110;
}
#text-input{
margin-top:6;
margin-bottom:6;
}
#user-input{
width: 140;
position:relative;
left:15;
}
#pswd-input{
width: 140;
position:relative;
left:5;
}
#btnLogin{
box-shadow: 1px 1px 2px;
border-radius:10px;
background:#00FF00;
margin-left: 30;
margin-top:6;
width: 75;
height: 25;
}
#btnCancel{
box-shadow: 1px 1px 2px;
border-radius:10px;
background:#FFFF00;
margin-left: 5;
margin-top:6;
width: 75;
height: 25;
}

CSS Bag 1
CSS Bag 3
Download contoh file disini.

2 thoughts on “CSS (Cascading Style Sheet) bag 2”

  1. Pingback: Cara membuat halaman login dengan HTML | SUKA SUKA
  2. Pingback: CSS (Cascading Style Sheet) bag 3 | SUKA SUKA

Leave a comment