Saturday, March 26, 2011

CSS Part 2


Penggunaan ID dalam CSS

adanya ID dimaksudkan untuk mentupi kelemahan dari html itu sendiri yaitu style yang ditetapkan
akan 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
Model Pendefinisian Internal yaitu, Model pendefinisian secara internal dilakukan dengan menempatkan definisi style CSS di antara pasangan tag
<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:

No comments:

Post a Comment