Lanjutin tulisan sebelumnya tentang Belajar CSS Untuk Pemula. Dalam memerindah atau mempercantik halaman website dengan menggunakan CSS kita bisa membuat selector sesuai dengan keinginan kita sendiri dengan menggunakan "Class" dan "ID".
- Class Selector
Class Selector bisa dibuat dengan nama apapun asalkan tidak boleh diawali dengan angka karena tidak akan berfungsi pada beberapa browser. Untuk penulisan class selector disimbolkan dengan tanda titik [ . ] sebagai awal dari nama class. Berikut contoh penggunaan class selector:
<html>
<head>
<title>Belajar CSS</title>
<style>
.tengah
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<h1 class="tengah">Untuk Heading CSS class selector</h1>
<p class="tengah">Ini paragraph pertama CSS class selector.</p>
</body>
</html>
Selain itu kita bisa menetukan hanya element HTML tertentu yang bisa menggunakan class selector tersebut. Misalnya seperti contoh di bawah:
<html>
<head>
<title>Belajar CSS</title>
<style>
h1.tengah
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<h1 class="tengah">Untuk Heading</h1>
<p class="tengah">Baris element HTML ini tidak dipengaruhi CSS class selector</p>
</body>
</html>
<head>
<title>Belajar CSS</title>
<style>
h1.tengah
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<h1 class="tengah">Untuk Heading</h1>
<p class="tengah">Baris element HTML ini tidak dipengaruhi CSS class selector</p>
</body>
</html>
- ID Selector
Id selector disimbolkan dengan tanda pagar [ # ] sebagai awal dari nama id. Sama seperti class selector dalam penulisan nama id selector tidak boleh diawali dengan angka. Berikut contoh penggunaan dari id selector:
<html>
<head>
<title>Belajar CSS</title>
<style>
#tengah
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<h1>Untuk Heading</h1>
<p id="tengah">Element HTML ini merupakan CSS id selector</p>
</body>
</html>
Asik kan belajar CSS? segini dulu aja tentang class selector dan id selector, selanjutnya kita belajar tentang Cara Memasang Script CSS ke HTML.Salam semangat buat para cewek-cewek Sexy di luar sana.
<head>
<title>Belajar CSS</title>
<style>
#tengah
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<h1>Untuk Heading</h1>
<p id="tengah">Element HTML ini merupakan CSS id selector</p>
</body>
</html>
Asik kan belajar CSS? segini dulu aja tentang class selector dan id selector, selanjutnya kita belajar tentang Cara Memasang Script CSS ke HTML.
No comments:
Post a Comment