Penggunaan CSS pada ASP.Net

Setelah kita mengetahui apa itu CSS, sekarang saya akan membahas bagaimana cara pemakaian file CSS di ASP.Net..Bingung? Gimana Ya Caranya? Apa diberi bumbu nasi goreng biar lezat...hehehe...gak lah...

Cara Pemakaian File CSS pada ASP.Net yaitu :
1. Buat Project Website baru
2. Klik Kanan pada project anda. Pilih AddNew Item. Pilih StyleSheet. Ganti nama file CSS anda sesuai dengan keinginan anda, misalnya kita beri nama FILECSSSaya.CSS. Lalu, tekan tombol Add.
3. Source Code default di file FILECSSSaya.CSS adalah body{}..bener gak?....untuk belajar penggunaan CSS anda masukkan source code berikut ini :

body
{
background-color: Black;
margin: 5px;
padding: 0;
font: 12px Arial;
color: White;
}

#Header {
margin-bottom: 0.3em;
font-family : ComicSans MS;
font-size: 14px;
color: White;
text-align: center;
}

div.procedure {
border: solid 1px white;
margin: 5px;
padding: 5px;
float:left;
}

#footer {
margin-top: 0.3em;
font-family : Verdana;
font-size: 12px;
text-align: center;
color: White;
}

4. Klik 2 kali file "Default.aspx". Drag dan Drop file "FILECSSSaya.css" yang ada di Solution Explorer ke Default.aspx di bagian bawah tag "(title)". Contoh source code penempatan posisi file CSS tersebut adalah :

(%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %)

(!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd")
(html xmlns="http://www.w3.org/1999/xhtml")
(head runat="server")
(title)TesFile CSS(/title)
(link href="FILECSSSaya.css" rel="Stylesheet" type="text/css" /)
(/head)
(body)
(form id="form1" runat="server")

Pada source code "(link href="FILECSSSaya.css" rel="Stylesheet" type="text/css" /)" inilah file CSS anda dapat digunakan pada "DEFAULT.aspx"

5. Setelah anda menempatkan file "FILECSSSaya.css" pada "DEFAULT.aspx", tambahkan source code berikut ini setelah source code "(form id="form1" runat="server")" pada Source View "DEFAULT.aspx" :

(div)
(table)
(tr)
(td colspan="2" style="height: 43px" id="Header" )
Selamat Datang Di WEB Testing CSS(/td)
(/tr)
(tr)

(td style="width: 220px; height: 216px")
(/td)
(td style="width: 437px; height: 216px")
(div class="procedure")
AKU ADALAH SEorANg Kapiten dengan gagah berani(br /)
hahhahaha.....(br /)
Identitas Saya Adalah :(br /)
(br /)
(asp:Label ID="Label1" runat="server" Text="Nama Lengkap")(/asp:Label)
(asp:Label ID="Label2" runat="server" Text="JOKO Tole")(/asp:Label)(br /)
(br /)
(asp:Label ID="Label3" runat="server" Text="Lahir di ")(/asp:Label) 
(asp:Label ID="Label4" runat="server" Text="Papua")(/asp:Label)(br /)
(/div) (/td)
(/tr)
(tr)
(td colspan="2" style="height: 41px" id="footer")
Copyright © Richard Production
(/td)
(/tr)
(/table)

(/div)
(/form)

6. Jadi tanda selector .(titik) pada file CSS anda digunakan di "(div class="procedure")"
Sedangkan tanda # digunakan pada file CSS anda digunakan di "(div id="Header")"

Keterangan pada source code no 5 tanda () diganti dengan tanda <>.

Selamat Mencoba