Teori :
Dibawah ini adalah contoh-contoh penggunaan CSS disertai dengan penjelasannya masing-masing. Perlu diingat bahwa penambahan script pada CSS hanya untuk mempercantik tampilan dari HTML.
Contoh 1.
< HTML>
< BODY>
< SPAN STYLE = "font-size: xx-small"> xx-small< /SPAN>
< SPAN STYLE = "font-size: x-small"> x-small< /SPAN>
< SPAN STYLE = "font-size: small"> small< /SPAN>
< SPAN STYLE = "font-size: medium"> medium< /SPAN>
< SPAN STYLE = "font-size: large"> large< /SPAN>
< SPAN STYLE = "font-size: x-large"> x-large< /SPAN>
< SPAN STYLE = "font-size: xx-large"> xxlarge< /SPAN>
< P STYLE = "font-size: 20px">
Teks berukuran 20 piksel< BR>
< SPAN STYLE = "font-size: larger">
Dalam paragraf yang sama teks ini lebih besar< BR>
< /SPAN>
< SPAN STYLE = "font-size: smaller">
Dalam paragraf yang sama teks ini lebih kecil< BR>
< /SPAN>
< SPAN STYLE = "font-size: 150%">
Dalam paragraf yang sama teks ini lebih besar 150%< BR>
< /SPAN>
< /P>
< /BODY>
< /HTML>
Contoh2.
< HTML>
< BODY>
< P STYLE = "text-decoration: underline">
Digarisbawahi
< /P>
< P STYLE = "text-decoration: line-through">
Dicoret
< /P>
< P STYLE = "text-decoration: blink">
Berkedip
< /P>
< P STYLE = "text-decoration: underline">
< SPAN STYLE = "text-decoration: blink">
Digarisbawahi dan berkedip
< /SPAN>
< /P>
< /BODY>
< /HTML>
Contoh3.
< HTML>
< HEAD>
< TITLE> Latihan gt deh< /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>
Contoh4.
< HTML>
< HEAD>
< TITLE> Ini Judulnya< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUND-IMAGE:
URL('gambar.jpg');
BACKGROUND-REPEAT:
REPEAT-Y;
}
< /STYLE>
< /HEAD>
< BODY>
< FONT COLOR="RED"> < H1>
Menggunakan Gambar Sebagai Background
dengan perulangan vertikal< /H1> < /FONT>
< /BODY>
< /HTML>
Contoh5.
< HTML>
< HEAD>
< TITLE> Ini Judulnya< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUND-IMAGE:
URL('gambar.jpg');
BACKGROUND-REPEAT:
REPEAT-X;
}
< /STYLE>
< /HEAD>
< BODY>
< FONT COLOR="RED"> < H1>
Menggunakan Gambar Sebagai Background
dengan perulangan horizontal< /H1> < /FONT>
< /BODY>
< /HTML>
Contoh6.
< HTML>
< HEAD>
< TITLE> Efron CSS3< /TITLE>
< STYLE TYPE="TEXT/CSS">
h1 {color:white;background-color:green;BORDER-STYLE:Dashed;BORDER-COLOR:blue;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-left:5cm;}
h2 {color:white;background-color:red;BORDER-STYLE:Dashed;BORDER-COLOR:black;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-right:5cm;}
h3 {color:white;background-color:blue;BORDER-STYLE:Dashed;BORDER-COLOR:yellow;PADDING-LEFT:1cm;PADDING-TOP:1cm;PADDING-BOTTOM:1cm;PADDING-RIGHT:1cm;margin-left:5cm;margin-right:5cm;}
< /STYLE>
< /HEAD>
< BODY>
< h1> ini paragraf 1...< /h1>
< h2> ini paragraf 2...< /h2>
< h3> ini paragraf 3...< /h3>
< /BODY>
< /HTML>
Penjelasan :
color:------; untuk pembuatan warna tulisan.
background-color:------; untuk pembuatan warna latar belakang.
BORDER-STYLE :----- ; untuk pembuatan tipe garis tepi ada dashed, dotted, dashed dotted.
BORDER-COLOR:----; untuk pembuatan warna garis tepi.
PADDING-(Left, Right, Top, Bottom):--cm; untuk mengatur jarak dari garis tepi.
margin-(Left, Right,Top, Bottom):--cm; untuk mengatur jarak dari batas yang ada.
Contoh7.
< HTML>
< HEAD>
< TITLE> Ini judulnya< / TITLE >
< style type="text/css">
h1.satu {front-style :italic;color:red;background-color:aqua;}
h1.dua{color:white;background-color:black;text-decoration:underline;}
h2.dua{font-family:arial;color:blue;background-color:yellow;}
< /style>
< /HEAD>
< BODY>
< h1 class="satu"> Header1 class satu< /h1>
< h1 class="dua"> Header1 class dua< /h1>
< h1 class="satu"> Header1 class satu< /h1>
< h2 class="dua"> Header2 class dua< /h2>
< p> Penerapan class satu pada < h1> dan< h2> akan memberikan efek style yang berbeda karena menggunakan class yang sifatnya spesifik {spesifik class}.
< br>
Penerapan class dua pada < H2> tidak menghasilkan efek apapun karena class dua hanya didefinisikan spesifik untuk < H1>
< /p>
< /BODY>
< /HTML>
Praktikum :
Soal1.
< HTML>
< HEAD>
< TITLE> Ini Judul< /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR:grey;}
#satu {FONT-STYLE: ARIAL;COLOR:white;TEXT-ALIGN:CENTER;}
#dua {FONT-FAMILY:arial;COLOR:white;font-size:14pt;}
#tiga {FONT-FAMILY:arial;font-size:16pt;}
#empat {FONT-FAMILY:arial;font-size:18pt;}
#lima {FONT-FAMILY:arial;font-size:22pt;}
#enam {FONT-FAMILY:arial;font-size:24pt;}
#tujuh {FONT-FAMILY:arial;font-size:28pt;}
#delapan {FONT-STYLE: ARIAL;COLOR:white;TEXT-ALIGN:right;}
< /STYLE>
< /HEAD>
< BODY>
< HR WIDTH="100%" SIZE="5" color="red" ALIGN="CENTER"> (membuat garis)
< img src="Gambar.jpg" width="80" height="80" align="right" /> < br/> < br/> < br/> < br/> < br/>
< p id="satu"> (memanggil style satu yang telah dibuat)
Ini susi yang menggambarkan seekor Kappa sedang memancing ikan.< /p> < br>
< p id="dua"> (memanggil style dua yang telah dibuat)
< i> Kappa< /i> adalah makhluk yang digambarkan sebagai makhluk gaib yang tinggal di sungai2 di Jepang. < u> Konon< /u> , katanya kalau kita melemparkan < b> timun< /b> kepadanya, maka kita tidak akan diganggu oleh < i> kappa< /i> .< i> Kappa< /i> adalah < br>
makhluk yang < del> lucu < /del> menyeramkan, oleh karena itu orang Jepang takut bila bertemu dengan < i> Kappa< /i> .
< hr WIDTH="70%" SIZE="5" color="green" ALIGN="CENTER"/> (membuat garis)
< center> < img src="Gambar.jpg" width="80" height="80"/> < /center> < br/>
< p id="satu">
Oginiri cake, akan tetapi sebenarnya terbuat dari nasi dan bumbu-bumbu lainnya, lalu dibentuk seperti kue< sup> cake< /sup> .Diikat dengan < acronym title="nori"> nori< /acronym> sehingga terlihat seperti pita berwarna < p id="delapan"> kehitaman. Dan toppingnya yang membuatnya semakin terlihat < font id="dua"> L< /font> < font id="tiga"> E< /font> < font id="empat"> Z< /font> < font id="lima"> A< /font> < font id="enam"> T< /font> < font id="tujuh"> T ..< /font>
< /p> < /p>
< /BODY>
< /HTML>
Soal2.
< HTML>
< HEAD>
< TITLE> New Document < /TITLE>
< STYLE TYPE="TEXT/CSS">
#satu {FONT-STYLE: ARIAL; color:red;font-size:20pt;}
#dua {FONT-STYLE: ARIAL; color:blue;font-size:15pt;}
#tiga {text-decoration:line-through;}
#empat {text-decoration: underline;}
img {Border-style:solid;border-width:10px;PADDING-RIGHT:0cm;}
< /style>
< /head>
< body>
< font id="satu"> P< font id="tiga"> < sub> EMO< /sub> < /font> GRAM< font id="empat"> < sup> AN< /sup> < /font> WEB< /font>
< HR WIDTH="100%" SIZE="10" color="blue" ALIGN="CENTER" NOSHADE>
< b> < big> Belajar< /big> < /b> Pemograman Web untuk Kelas D
< h1 id="dua"> Pariwisata Di Indonesia< /h1>
< img src="Gambar.jpg" width="80" height="80">
< /BODY>
< /HTML>
Soal3.
< HTML>
< HEAD>
< TITLE> New Document < /TITLE>
< STYLE TYPE="TEXT/CSS">
BODY {background-color:white;}
#satu {BACKGROUND-IMAGE:URL('Gambar.gif');BACKGROUND-REPEAT:REPEAT-x;FONT-STYLE: ARIAL;COLOR:black;TEXT-ALIGN:CENTER;text-align:center;}
#dua {background-color:yellow;color:red;border-style:solid;}
#tiga {background-color:black;color:white;border-style:dotted;}
< /STYLE>
< /HEAD>
< BODY>
< table width="525" border="0" align="center">
< tr>
< td id="satu"> < h2> WELCOME< /h2> < /td>
< /tr>
< /table>
< p id="dua"> Pemograman Web< /p>
< p id="tiga"> 2010< /p>
< p id="satu"> < h1> Progweb< /h1> < /p>
< /BODY>
< /HTML>
