Judul : Penggunaan ID dalam CSSBy Arul Ajeh
link : Penggunaan ID dalam CSSBy Arul Ajeh
Penggunaan ID dalam CSSBy Arul Ajeh
adanya ID dimaksudkan untuk mentupi kelemahan dari html itu sendiri yaitu style yang ditetapkanakan berlaku untuk keseluruhan penggunaan satu tag tertentu.
enggunaan ID
pada CSS menjadikan implementasi style CSS pada tagtag
HTML lebih fleksibel.
Penamaan ID dalam CSS diawali dengan karakter “#” dan diikuti dengan ID nya.
contoh code html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:BLUE;
BACKGROUN-DCOLOR:
PINK;}
#dua {TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 Style satu</H1>
<H1 ID="dua">Header1 Style dua</H2>
<P ID="satu">
Paragraf ini menggunakan
style dua looo....
</P>
</BODY>
</HTML>
yang dikeluarkan adalah seperti berikut:
Penggunaan Class dalam CSS
Penggunaan CLASS dalam CSS memiliki kemiripan dengan ID, bahkan keduanya bisa digunakan secara
bersamasama
dan diimplementasikan pada tag HTML yang sama.
Penamaan CLASS dalam CSS diawali dengan karakter “.” (karakter titik) dan diikuti dengan nama CLASS
nya.
code htmlnya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE:
ITALIC;
COLOR:WHITE;
BACKGROUN-DCOLOR:
BLACK;}
.dua { TEXT-DECORATION:
UNDERLINE;
FONT-FAMILY:
ARIAL;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED;}
</STYLE>
</HEAD>
<BODY>
<H1 ID="satu">Header1 ID satu</H1>
<H1 CLASS="dua">Header1 CLASS dua</H2>
<P ID="satu" CLASS="dua">
Paragraf ini menggunakan
ID satu dan Class dua lhooo..
</P>
</BODY>
</HTML>
keluaran yang dihasilkan:
Model Pendefinisian:
Model pendefinisian dibagi menjadi dua yaitu:
- Internal
- Eksternal
<STYLE> dan </STYLE> yang ditempatkan di bagian HEAD dari suatu dokuken HTML yang akan
mengimplementasikan style CSS tersebut. Model pendefinisian semacam inilah yang digunakan pada contohcontoh
sebelumnya.
contoh:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1 STYLE="COLOR:WHITE; BACKGROUND-COLOR:
BLACK; TEXT-DECORATION:
LINE-THROUGH;">
Menggunakan Model Pendefinisian In Line
</H1>
</BODY>
</HTML>
Model Pendefinisian Eksternal, yaitu memungkinkan beberapa file dokumen HTML untuk
menggunakan efek style CSS yang sama tanpa harus mendefinisikan ulang. Hal ini dimungkinkan dengan
menempatkan pendefinisian style CSS dalam file tersendiri yang diberi nama dengan ekstensi *.css.
Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS
diberi tag <LINK>. Adapun format lengkap dari tag <LINK> yang digunakan adalah sebagai berikut
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css>
contoh yang disimpan dalam ekstensi .css :
H1.satu {COLOR:GREEN;
BORDER-STYLE:
DASHED;
BORDER-COLOR:
BLUE;
FONT-SIZE:
12pt;}
H1.dua {COLOR:RED;
BACKGROUND-COLOR:
YELLOW;
BORDER-STYLE:
SOLID;
FONT-SIZE:
20pt;}
.html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul Halaman1</TITLE>
</HEAD>
<BODY>
<LINK REL="STYLE-SHEET" TYPE="TEXT/CSS" HREF="gaya.css">
<H1 CLASS="satu">Menggunakan Class satu secara eksternal dari file gaya.css</H1>
<H1 CLASS="dua">Menggunakan Class dua secara eksternal dari file gaya.css</H1>
</BODY>
</HTML>
keluarannya:
Selesai deh Artikel Penggunaan ID dalam CSSBy Arul Ajeh
Sekian dulu ya artikel Penggunaan ID dalam CSSBy Arul Ajeh kali ini, Semoga bisa memberi manfaat untuk kalian semua. Oke, sampai berjumpa lagi di artikel lainnya.
Anda saat ini membaca artikel Penggunaan ID dalam CSSBy Arul Ajeh dengan url http://advancedteamcode.blogspot.com/2014/04/penggunaan-id-dalam-cssby-arul-ajeh.html
0 Response to "Penggunaan ID dalam CSSBy Arul Ajeh"
Post a Comment