Mengenal Id, Class dan Span pada CSS

apa itu Id?
dan apa itu class?
lalu apa pula yang dimanakan span?

Id, class dan span adalah untuk menentukan elemen atau komponen tertentu yang diawali dengan tag html seperti div, td, tr dan sebagainya, selanjutnya akan dideklarasikan oleh CSS. pada CSS sendiri Id ini ditulis dengan code # (cress) sedangkan class dan span di tulis dengan . (titik)
Contoh:
#header
.header
.header_inner <-- Span

Nah sekarang, mari kita cipatapkan sebuah halaman web (blog).
Saya mengawalinya dengan menulis code html... ingat...!!! ketika kita membuat suatu halaman harus memiliki edentitas tersendiri sebagai status halaman itu. maksudnya apa? tarulah kita membuat halaman dengan menggunakan html maka harus ada pembukanya yaitu nah segala sesuatu yang dibuka maka harus ditutup kembali... lalu apa penutup dari bagian ini yaitu .

ok kita mulai tulis... code



(disini boleh ditambahkan meta)
(sini juga boleh ditambahkan link rel atau link diluar halaman ini)

----------- nah disini anda bisa menuliskan juga CSS seperti yang banyak digunakan pada blogger ---------


Nah sinilah ditulis isi halaman web kita... dan awali dengan ...body... maka akan seperti dibawah:

Isi komponen






Bila telah dibuat html seperti diatas... maka code CSS yang dapat ditulis adalah

body {
margin: ...;
paddding:...; dan seterusnya...
}

#bagian_halaman_luar {
padding:...;
margin-top:..;
margin-left:...;
width:...;
height:..; dan seterusnya...
}

Keterangan:
Nama pada sebuah komponen terserah anda menamainya apa, agar anda mudah mengklafikasikannya.
Pada bagian Isi komponen diatas dapat ditambahkan class atau span lagi sesuai kebetuhan halaman yang diciptakan.
contoh:
XXXXXX

maka cssnyapun ditulis seperti ini:
.bagian_kanan {
font-size:....;
padding:..;
background:..; dan seterusnya...
}

span sangat jarang digunakan... namun perlu juga. karena span tidak membentuk paragraf sendiri atau bagian sendiri akan tetapi langsung menyatu dengan bagian yang ada.

Category:  
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response.
0 Responses