CSS (Cascading Style Sheet) bag 3


Setelah mencoba cara pertama dan kedua kita lanjut dengan cara ketiga (metode kedua) yaitu pada halaman html namun berada di head (Internal Style).

Edit file html pada bagian kedua (Metode ketiga) serta file css nya kemudian copy semua isi file css lalu pada file HTML replace baris “@import url(namafilecss.css);” isi semua file css yang dicopy tadi jika anda mengunakan <style type=”text/css”>@import url(namafilecss.css)</style>. atau hapus bars <link rel=”stylesheet” type=”text/css” href=”namafilecss.css”> ganti dengan <style type=”text/css”> serta pasty isi file css yang dicopy tadi lalu akhiri dengan </style> jika anda menggunakan “<link rel=”stylesheet” type=”text/css” href=”namafilecss.css”>”. sehingga hasil script menjadi seperti dibawah ini.

Script –>

<html>
<head>
<title>Halaman login</title>
<style type=”text/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;
}
</style>
</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>

CSS Bag 1
CSS Bag 2
Download contoh file disini.

Advertisements

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s