Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak
terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>
<style type="text/css">
p {
color: red;
}
em {
color: green;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak
miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
<h1><em>Ini adalah heading 1</em></h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak
miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
</body>
</html>
Pada code di atas terdapat style untuk mengatur tampilan elemen paragraf (<p>) dan
untuk emphasize atau <em> (cetak miring seperti halnya italic). Perhatikan apa yang
terjadi dengan tampilannya di browser
Dengan Anda mendeklarasikan style warna hijau untuk elemen <em>, maka style
tersebut akan berlaku untuk setiap elemen tersebut (termasuk pada bagian heading).
Tentu saja hal ini membuat tampilan halaman web tidak bagus, karena style heading
menjadi tidak konsisten (terdapat heading yang berwarna hijau). Lantas.. bagaimana cara
mengatur style supaya warna hijau hanya berlaku untuk emphasize yang terletak di dalam
paragraf saja? Untuk itu Anda harus mengubah deklarasi stylenya menjadi seperti berikut
<style type="text/css">
p {
color: red;
}
p em {
color: green;
}
</style>
Maksud dari code yang bercetak merah tersebut adalah bahwa style warna hijau
diterapkan pada elemen emphasize <em> yang berada di dalam elemen paragraf <p>.
Selector Dengan Class dan Nama ID
Class dapat digunakan untuk mengelompokkan beberapa elemen supaya memiliki style
sama. Secara umum sintaks style untuk class tertentu adalah sbb:
.namaKelas {
properti1 : value1;
properti2 : value2;
.
.
}
Contoh:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>
<style type="text/css">
.inputText {
color: #FFFFFF;
font-family: arial;
background: #FF0000; /* membuat background merah */
font-weight: bold; /* membuat text bold */
}
</style>
</head>
<body>
<form name="form1">
Nama Anda <br />
<input type="text" name="alamat" class="inputText" /><br /><br />
Alamat Anda <br />
<textarea class="inputText"></textarea><br /><br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
Style juga dapat digunakan untuk mengatur tampilan elemen dengan id tertentu. Berikut
ini adalah contohnya:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>
<style type="text/css">
p {
color: #FFFFFF; /* membuat warna text putih */
font-family: arial;
background: #FF0000; /* membuat background merah */
font-weight: bold;
}
p.group {
color: #FF0000; /* membuat warna text putih */
font-family: arial;
background: #FFFFFF; /* membuat background putih */
}
p#one {
color: blue;
font-family: "times new roman";
}
</style>
0 comments:
Post a Comment