Dasar CSS

Transcript Dasar CSS

Dasar CSS
A’ud Solehuddin::Februari2012
Materi










Mengenal CSS
Mencoba CSS
Penggunaan atribut ID dalam tag
Penggunaan kelas
Pendefinisian tag dengan kelas
Komentar dalam style sheet
Pendefinisian kelas atau ID terhadap tag
Atribut STYLE
Tag <SPAN>
Style sheet eksternal
Mengenal CSS


CSS: Cascading Style Sheet
Digunakan untuk menciptakan suatu kumpulan
style
Mencoba CSS
<HTML>
<HEAD>
<TITLE>CSS Pertama</TITLE>
<STYLE TYPE = "text/CSS">
<!-H1 { font-size: 14pt;
font-style: italic;
color: green; }
-->
</STYLE>
</HEAD>
<BODY>
<H1>CSS Pertamaku</H1>
Selamat mencoba CSS!
</BODY>
</HTML>
Contoh: Mengatur Font dan Warna
Font pada Tabel
<STYLE TYPE = "text/CSS">
<!-TH { font-weight : bold;
background-color: blue;
color : white;
}
TR { background-color: silver;
color: blue; }
-->
</STYLE>
Penggunaan Atribut ID dalam Tag
#Tebal
{ font-weight : bold;
color : blue; }
#Miring { font-style : italic;
color: pink; }
Penggunaan:
<H2 ID = "Miring">
Kalau ada jarum yang patah<BR>
Jangan disimpan dalam peti
</H2>
<H3 ID = "Tebal">
Kalau ada kata yang salah<BR>
Jangan disimpan dalam hati
</H3>
Penggunaan Kelas
.kapital
{ text-transform: uppercase; }
.kecil
{ text-transform: lowercase; }
.garis_bawah { text-decoration: underline; }
Penggunaan:
<H2 CLASS = "kapital">Tes, Tes, 123</H2>
<H3 CLASS = "kecil">Tes, Tes, 123</H3>
<P CLASS = "garis_bawah">
Tes, Tes, 123
</P>
Pendefinisian Tag dengan Kelas
H3.merah { color: red; }
H3.biru { color: blue; }
Penggunaan:
<H3 CLASS = "biru">Biru? Pasti!</H3>
<H3 CLASS = "merah">Merah? Pasti!</H3>
<H4 CLASS = "merah">Merah? Nggak mungkin!</H4>
Komentar dalam Style Sheet
/*
H3.merah { color: red; }
*/
H3.biru { color: blue; }
Penggunaan:
<H3 CLASS = "biru">Biru? Pasti!</H3>
<H3 CLASS = "merah">Merah? Pasti!</H3>
<H4 CLASS = "merah">Merah? Nggak mungkin!</H4>
Pendefinisian Kelas Terhadap Tag
BODY
CITE
{ background-color: white; }
{ color: red; font-size: 20;
font-weight: bold;
background-color: silver; }
.biru
{ color: blue; }
.biru CITE { color: blue;
text-transform: uppercase; }
Penggunaan
<CITE>Teks dalam CITE</CITE>
<P CLASS = "biru">
Teks pada P dengan kelas biru
<CITE>
Teks dalam CITE yang berada dalam P
dengan CLASS = "biru". Warnanya
menjadi biru.
</CITE>
</P>
Pendefinisian ID Terhadap Tag
#ungu
{ color: purple; }
#ungu H5
{ color: blue; }
Penggunaan:
<H5>Teks H5 berdiri sendiri – Warna
bawaan</H5>
<P ID = "ungu">
Warna teks ini ungu
<H4>Teks dalam H4 - Ungu juga</H4>
<H5>Teks dalam H5 - Biru</H5>
Warna ini tentu saja ungu
</P>
Atribut STYLE
<BODY STYLE = "font-size: 16pt;
color: blue;" >
Warna ini biru dan berukuran agak
besar<BR>
<BR>
Contoh STYLE pada TABLE
<TABLE STYLE = "font-size = 12pt;
background-color: silver;
color: green;"
BORDER = "1">
<TR><TH>Kata</TH><TH>Arti</TH></TR>
<TR><TH>Blue</TH><TH>Biru</TH></TR>
<TR><TH>Red</TH><TH>Merah</TH></TR>
</TABLE>
</BODY>
Tag <SPAN>


Digunakan untuk memperluas kemampuan
suatu style
Penerapannya dapat digunakan bersama-sama
atribut STYLE, CLASS, dan ID
<SPAN> dengan Atribut STYLE
<P STYLE = "color: blue; ">
Teks dalam paragraf ini berwarna biru
<SPAN STYLE = "font-weight: bold;
background-color:silver;">
Tulisan ini dalam keadaan tebal
dan diberi latar belakang
</SPAN>
Teks ini kembali ke keadaan semula
</P>
<SPAN> dengan Atribut CLASS
.miring
{ font-style: italic; }
.garis_bawah { text-decoration: underline; }
Penggunaan:
<P>Keadaan asli</P>
<P CLASS = "miring">Miring, lho.
<SPAN CLASS = "garis_bawah">
dan ini digarisbawahi
</SPAN>
Kembali miring saja
</P>
<SPAN> dengan Atribut ID
.miring { font-style: italic; }
#besar { font-size: 39pt; }
Penggunaan:
<P>Teks normal
<SPAN CLASS = "miring" ID = "besar">
Teks ini besar dan miring
</SPAN>
Teks normal
</P>
Style Sheet Eksternal



Pendefinisian style dapat dilakukan pada berkas
sendiri
Memungkinkan definisi style dapat digunakan di
beberapa berkas HTML
Untuk mengakses style eksternal, dapat
menggunakan tag <LINK>
Berkas: styleku.css
/* -----------------------------------Berkas: styleku.css
Berisi contoh definisi style
------------------------------------ */
BODY
.miring
#besar
{ background-color: blue;
color: white; }
{ font-style: italic; }
{ font-size: 39pt; }
Penggunaan
<HTML>
<HEAD>
<TITLE>Contoh Style Eksternal</TITLE>
<LINK REL = "STYLESHEET"
TYPE = "text/css"
HREF = "styleku.css">
</HEAD>
<BODY>
Tes, tes, 123...
<P ID = "besar" CLASS = "miring">
Besar lho dan miring
</P>
</BODY>
</HTML>
Berkas: style2.css
/* -----------------------------------Berkas: style2.css
Berisi contoh definisi style
------------------------------------ */
.tebal
{ font-weight: bold; }
Penggunaan
<HTML>
<HEAD>
<LINK REL = "STYLESHEET" TYPE = "text/css"
HREF = "styleku.css">
<LINK REL = "STYLESHEET" TYPE = "text/css"
HREF = "style2.css">
</HEAD>
<BODY>
Tes, tes, 123...
<P ID = "besar" CLASS = "miring">
Besar lho dan miring
<SPAN CLASS = "tebal">
serta ini tebal
</SPAN>
</P>
</BODY>
</HTML>