CSS
CSS (Cascading Style Sheet) merupakan suatu script / kode yang ditambahkan ke dalam suatu dokumen
HTML untuk menambah fungsionalitas yang memang tidak bisa ditangani oleh suatu kode HTML biasa.
syntax penulisan CSS:
<STYLE TYPE=�TEXT/CSS�> dan diakhiri oleh <STYLE>.
Mengatur Warna Latar
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:
AQUA;}
H1 { BACKGROUND-COLOR:
RED; }
H2 { BACKGROUND-COLOR:
YELLOW;}
P { BACKGROUND-COLOR:
pink; }
</STYLE>
</HEAD>
<BODY>
<H1>Header 1 warna merah</H1>
<H2>Header 2 warna kuning</H2>
<P>
BIntang Kecil
Di Langit yang Biru
Amat Banyak
Menghias Angkasa
</P>
</BODY>
</HTML>
Mengatur Warna Teks
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 { COLOR:BLUE; }
P { COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1>Berwarna Biru</H1>
<H2>Kondisi Normal</H2>
<P>
Naiknaik
ke PUncak Gunung
Tinggitinggi
Sekali
</P>
</BODY>
</HTML>
Membuat Garis pada Teks
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 {TEXT-DECORATION:
OVERLINE;}
H2 {TEXT-DECORATION:
UNDERLINE;}
H3 {TEXT-DECORATION:
LINETHROUGH}
P {TEXT-DECORATION:
BLINK;}
</STYLE>
</HEAD>
<BODY>
<H1>Garis Atas</H1>
<H2>Garus Bawah</H2>
<H3>Coretan Tengah</H3>
<P>
CSS Menjadikan halaman web lebih menarik
karena banyak modifikasi yang bisa dilakukan
</P>
</BODY>
</HTML>
Mengatur Tipe Border
Dengan menggunakan CSS dimungkinkan untuk membuat suatu border / garis tepi pembatas yang bisa diatur
tipenya. Hal ini dilakukan dengan mengatur atribut BORDERSTYLE.
Adapun nilai yang bisa diberikan pada
atribut ini adalah HIDDEN, DOTTED, DASHED, SOLID, DOUBLE, GROOVE, RIDGE, INSET, dan
OUTSET di mana masingmasing
nilai akan menghasilkan border degan tipe yang berbeda.
codeHTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {BORDER-STYLE:
DOTTED;}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Mengatur Warna Border
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P { BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED; }
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Implementasi CSS pada Margin
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {
BORDER-STYLE:
SOLID;
BORDER-COLOR:
BLUE;
MARGIN-LEFT:
2cm;
MARGIN-TOP:
2.5cm;
}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Mengatur Tipe List dengan Gambar
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
UL {LIST-STYLE-IMAGE:
URL('icon.gif')}
</STYLE>
</HEAD>
<BODY>
Penyanyi Jazz:
<UL>
<LI>Louis Amstrong</LI>
<LI>Diana Krall</LI>
<LI>Norah Jones</LI>
<LI>Dave Koz</LI>
</UL>
</BODY>
</HTML>
CSS (Cascading Style Sheet) merupakan suatu script / kode yang ditambahkan ke dalam suatu dokumen
HTML untuk menambah fungsionalitas yang memang tidak bisa ditangani oleh suatu kode HTML biasa.
syntax penulisan CSS:
<STYLE TYPE=�TEXT/CSS�> dan diakhiri oleh <STYLE>.
Mengatur Warna Latar
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:
AQUA;}
H1 { BACKGROUND-COLOR:
RED; }
H2 { BACKGROUND-COLOR:
YELLOW;}
P { BACKGROUND-COLOR:
pink; }
</STYLE>
</HEAD>
<BODY>
<H1>Header 1 warna merah</H1>
<H2>Header 2 warna kuning</H2>
<P>
BIntang Kecil
Di Langit yang Biru
Amat Banyak
Menghias Angkasa
</P>
</BODY>
</HTML>
Mengatur Warna Teks
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 { COLOR:BLUE; }
P { COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<H1>Berwarna Biru</H1>
<H2>Kondisi Normal</H2>
<P>
Naiknaik
ke PUncak Gunung
Tinggitinggi
Sekali
</P>
</BODY>
</HTML>
Membuat Garis pada Teks
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
H1 {TEXT-DECORATION:
OVERLINE;}
H2 {TEXT-DECORATION:
UNDERLINE;}
H3 {TEXT-DECORATION:
LINETHROUGH}
P {TEXT-DECORATION:
BLINK;}
</STYLE>
</HEAD>
<BODY>
<H1>Garis Atas</H1>
<H2>Garus Bawah</H2>
<H3>Coretan Tengah</H3>
<P>
CSS Menjadikan halaman web lebih menarik
karena banyak modifikasi yang bisa dilakukan
</P>
</BODY>
</HTML>
Mengatur Tipe Border
Dengan menggunakan CSS dimungkinkan untuk membuat suatu border / garis tepi pembatas yang bisa diatur
tipenya. Hal ini dilakukan dengan mengatur atribut BORDERSTYLE.
Adapun nilai yang bisa diberikan pada
atribut ini adalah HIDDEN, DOTTED, DASHED, SOLID, DOUBLE, GROOVE, RIDGE, INSET, dan
OUTSET di mana masingmasing
nilai akan menghasilkan border degan tipe yang berbeda.
codeHTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {BORDER-STYLE:
DOTTED;}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Mengatur Warna Border
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P { BORDER-STYLE:
DASHED;
BORDER-COLOR:
RED; }
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Implementasi CSS pada Margin
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
P {
BORDER-STYLE:
SOLID;
BORDER-COLOR:
BLUE;
MARGIN-LEFT:
2cm;
MARGIN-TOP:
2.5cm;
}
</STYLE>
</HEAD>
<BODY>
<P>
Naiknaik
ke Puncak Gunung
Tinggitinggi
Sekali
Kiri Kanan Kulihat Langit
Indahindah
Sekali
</P>
</BODY>
</HTML>
Mengatur Tipe List dengan Gambar
code HTMLnya:
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
UL {LIST-STYLE-IMAGE:
URL('icon.gif')}
</STYLE>
</HEAD>
<BODY>
Penyanyi Jazz:
<UL>
<LI>Louis Amstrong</LI>
<LI>Diana Krall</LI>
<LI>Norah Jones</LI>
<LI>Dave Koz</LI>
</UL>
</BODY>
</HTML>
No comments:
Post a Comment