CSS dan tabel
<HTML>
<HEAD>
<STYLE TYPE = "text/CSS">
<!--
TH {
font-weight : bold;
background-color: blue;
color : white; }
TR {
background-color: silver;
color: blue; }
-->
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR><TH>Bahasa German</TH><TH>Bahasa Indonesia</TH></TR>
<TR>
<TD>Danke</TD><TD>Terima Kasih</TD>
</TR>
<TR>
<TD>Lekker</TD><TD>Enak</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Penggunaan atribut
<HTML>
<STYLE TYPE = "text/CSS">
<!--
#Tebal {
font-weight : bold;
color : blue; }
#Miring {
font-style : italic;
color: pink; }
-->
</STYLE>
</HEAD>
<BODY>
<H1>PANTUN</H1>
<H2 ID = "Miring">
An Administrator`s guide<BR>
to Open source security tools
</H2>
<H3 ID = "Tebal">
Scott Mann<BR>
155
Ellen L. Mitchell
</H3>
</BODY>
</HTML>
Penggunaan kelas
<HEAD>
<STYLE TYPE = "text/CSS">
<!--
.kapital { text-transform: uppercase; }
.kecil { text-transform: lowercase; }
.garis_bawah { text-decoration: underline; }
-->
</STYLE>
</HEAD>
<BODY>
<H1>KELAS</H1>
<H2 CLASS = "kapital">Tes, Tes, 123</H2>
<H3 CLASS = "kecil">Tes, Tes, 123</H3>
<P CLASS = "garis_bawah">
Tes, Tes, 123
</P>
</BODY>
</HTML>
Penggunaan Style sheet eksternal
/* ------------------------------------
Berkas: styleku.css
------------------------------------ */
BODY { background-color: blue;
color: white; }
.miring { font-style: italic; }
#besar { font-size: 39pt; }
<HTML>
<HEAD>
<LINK REL = "STYLESHEET" TYPE = "text/css" HREF = "styleku.css">
</HEAD>
<TITLE>Contoh Style Eksternal</TITLE>
<BODY>
Fakultas Teknologi Informasi
<P ID = "besar" CLASS = "miring">
Universitas Kristen Maranatha
</P>
</BODY>
</HTML>
Penggunaan ID dan CSS
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONTSTYLE:
ITALIC;
COLOR:BLUE;
BACKGROUNDCOLOR:
PINK;}
#dua {TEXTDECORATION:
UNDERLINE;
FONTFAMILY:
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>
Penggunaan CLASS dan CSS
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<STYLE TYPE="TEXT/CSS">
#satu {FONTSTYLE:
ITALIC;
COLOR:WHITE;
BACKGROUNDCOLOR:
BLACK;}
.dua { TEXTDECORATION:
UNDERLINE;
FONTFAMILY:
ARIAL;
BORDERSTYLE:
DASHED;
BORDERCOLOR:
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>
Contoh CSS Pembuatan halaman skor pertandingan
<html>
<head>
<style type="text/css">
th{text-align:center; color:#0099FF; background-color:#000000}
td{font-family:Comic Sans MS; font-weight:bold; color:#CC3366; text-align:center}
td#1{background-color:#33FF00; color:#FF0000}
td#2{background-color:#FFFF33; color:#0033FF}
156
td#3{text-align:right; background-color:#0000FF}
td#4{text-align:left; background-color:#0000FF; color:#FF00FF}
</style>
</head>
<body>
<table border="0" align="center" width="50%" cellpadding="0" cellspacing="0">
<th colspan="2">Pertandingan Bola</th>
<tr>
<td colspan="2">Persik - Brazil</td>
</tr>
<tr>
<td id="1">3</td>
<td id="2">2</td>
</tr>
<tr>
<td id="3">Stadion</td>
<td id="4">Manahan Solo</td>
</tr>
</table>
</body>
</html>
Untuk Melihat Code-code CSS lain berikut link CSS properties :
CSS Properties
Tidak ada komentar:
Posting Komentar