Posted by : Admin web11 Selasa, 25 Juni 2013

id_dan_class_selector

Salam Web11...

Pada kesempatan kali ini, kami akan menjelaskan tentang id dan class pada CSS. sebelum masuk ke materi pembahasan. ada baiknya teman-teman membaca artikel-artikel terkait kami tentang Belajar CSS. berikut adalah artikel-artikel terkait kami :


Bila teman-teman sudah membaca artikel-artikel terkait kami diatas, maka mari kita lanjutkan materi belajar CSS pada artikel ini.

CSS Selector Id & Class

CSS selain berfungsi untuk menetapkan Style pada elemen HTML, CSS juga memungkinkan kita untuk menentukan penyeleksian sendiri. Penyeleksian tersebut berupa "Id" & "Class".

Id Selector

Id selector digunakan untuk menentukan style sebuah elemen unik tunggal. Id menggunakan atribut Id pada elemen HTML, Id didefinisikan dengan tanda "#". Aturan style yang diterapkan pada contoh dibawah ini diterapkan ke sebuah elemen dengan Id="web11".
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
#web11
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="web11">Hallo Dunia!!</p>
<p>Paragraph ini tidak terpengaruh pada style yang dibuat</p>
</body>
</html>

Catatan : teman-teman copy script diatas dan simpan pada folder htdocs diweb server localhost yang teman-teman instal. Simpan dengan ekstensi file ".html"  (style.html). Setelah itu teman-teman buka web browser kemudian ketik localhost pada alamat url setelah itu pilih file yang disimpan di htdocs dan teman-teman bisa melihat hasilnya.

Class Selector

Class selector digunakan untuk menentukan style beberapa elemen. Berbeda dengan id selector, Class selector lebih sering digunakan untuk menentukan style dari beberapa elemen. Hal ini memungkinkan kita untuk menetapkan style tertentu dari banyak elemen dengan class yang sama. Class selector menggunakan atribut class HTML, dan didefinisikan dengan ".". Pada contoh dibawah ini, semua elemen class="center" akan berada pada posisi tengah.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Posisi Tengah Sebuah Judul</h1>
<p class="center">Posisi Tengah Sebuah Paragraph</p>
</body>
</html>

Catatan : teman-teman copy script diatas dan simpan pada folder htdocs diweb server localhost yang teman-teman instal. Simpan dengan ekstensi file ".html"  (center.html). Setelah itu teman-teman buka web browser kemudian ketik localhost pada alamat url setelah itu pilih file yang disimpan di htdocs dan teman-teman bisa melihat hasilnya.

Kita juga dapat menentukan sendiri elemen HTML khusus yang dipengaruhi oleh Class. Dalam contoh dibawah ini elemen HTML "p" diberi nilai class="center".
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Judul ini tidak berpengaruh pada class yang diberikan.</h1>
<p class="center">Paragraph ini berpengaruh pada class yang diberikan.</p>
</body>
</html>

Catatan : teman-teman copy script diatas dan simpan pada folder htdocs diweb server localhost yang teman-teman instal. Simpan dengan ekstensi file ".html"  ([paragraph.html). Setelah itu teman-teman buka web browser kemudian ketik localhost pada alamat url setelah itu pilih file yang disimpan di htdocs dan teman-teman bisa melihat hasilnya.

Demikian lah materi singkat kami kali ini tetang penerapan Id & Class selector pada dokumen HTML. Bilamana teman-teman mengalami kesulitan dalam materi kami kali ini, teman-teman bisa langsung bertanya kepada kami. kami akhiri artkel ini, dan kita lanjut kepada artikel Cara menggunakan Style Sheet CSS pada dokumen HTML. ( Kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas artikel yang kami buat ).

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Design Web11 -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -