 |
| CSS Selector |
Penyeleksian CSS Berdasarkan Elemen
Sobat bisa memilih seluruh pada elemen yang akan menjadi sebuah halaman seperti ini:
(semua elemen akan menjadi pusat blok yang nantinya akan diberi warna biru pada tulisan teksnya) contoh:
<!DOCTYPE html>Hasil diatas:
<html>
<head>
<style>
p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>DiSetiap paragraph akan dipengaruhi oleh style</p>
<p id = "contoh1"> yang ini juga!</p>
<p>dan juga yang ini!</p>
</body>
</html>
silahkan sobat coba sendiri.DiSetiap paragraph akan dipengaruhi oleh styleyang ini juga!dan juga yang ini!
Penyeleksian CSS Berdasarkan Id
Menyeleksi id dengan menggunakan atribut id dari sebuah tag HTML untuk menentukan elemen tertentu, id harus dibuat unik dalam suatu halaman artinya atribut id yang kita tentukan harus berbeda dengan atribut id yang lainnya karena kita akan menyeleksi satu atribut id yang akan dirubah itulah tujuan dari penyeleksian id.
Untuk menentukan seleksi pada elemen dengan id tertentu sobat harus menuliskan karakter hash "#" lalu ikuti oleh nama id dari sebuah elemen tersebut. Sobat jadi bingung? baiklah dokter contoh akan segera datang...
<!DOCTYPE html>Hasil diatas:
<html>
<head>
<style>
#contoh1{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id = "contoh1">hai sobat :)</p>
<p>Paragraph ini tidak dipengaruhi oleh style.</p>
</body>
</html>
Ingat: Nama id tidak boleh diawali dengan nomor!hai sobat :)
Paragraph ini tidak dipengaruhi oleh style.
silahkan sobat coba sendiri.
Penyeleksian CSS Berdasarkan Class
Penyeleksian class adalah bertujuan untuk menetukan elemen-elemen dengan class yang khusus, untuk penyeleksian class menggunakan atribut class HTML. Agar dapat menemukan elemen-elemen dengan class tertentu sobat perlu menuliskan karakter periode atau tanda titik "." lalu diikuti dengan nama class tersebut.
sobat bingung lagi? tenang dokter contoh akan dihadirkan kembali :)
<!DOCTYPE html>Hasil diatas:
<html>
<head>
<style>
.center{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class = "center">Merah dan pusat-blok pada heading</h1>
<p class = "center">Merah dan pusat-blok pada paragraph</p>.
</body>
</html>
Sobat juga dapat menetukan bahwa hanya elemen HTML tertentu sajalah yang harus dipengaruhi oleh suatu class.
Merah dan pusat-blok pada heading
Merah dan pusat-blok pada paragraph.
<!DOCTYPE html>Hasil diatas:
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class = "center">Bagian ini tidak akan dipengaruhi</ h1>
<p class = "center">Paragraph ini yang akan biru dan pusat-blok.</p>
</body>
</html>
Ingat: Nama class tidak boleh diawali dengan nomor!Bagian ini tidak akan dipengaruhi
Paragraph ini yang akan biru dan pusat-blok
silahkan sobat coba sendiri.
Penyeleksian CSS Berdasarkan kelompok (Grouping)
Dalam CSS seringkali terdapat elemen dengan style yang serupa.
seperti dokter contoh berikut ini:
h1 {Itu hanya baru 3 elemen saja yang kita tuliskan bagaimana lebih banyak dari pada itu? tentu akan memakan banyak waktu dalam menuliskan kode tersebut, solusi dalam permasalahan tersebut kita gunakanlah Penyeleksian secara kelompok untuk meminimalkan kode tersebut. Dalam menentukan penyeksian pada kelompok sobat harus memisahkan masing-masing elemen yang dipilih tersebut dengan tanda koma "," berikut dokter contohnya:
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}
<!DOCTYPE html>Hasil diatas:
<html>
<head>
<style>
h1, h2, p{
text-align: center;
color: blue;
}
</style>
</ ead>
<body>
<h1> hai sobat :)</h1>
<h2>heading ukuran kecil!</h2>
<p>Dan ini paragraph nya.</p>
</body>
</html>
silahkan sobat coba sendiri.
hai sobat :)
heading ukuran kecil!
Dan ini paragraph nya.
Gimana nih sobat sudah mengerti bukan tentang cara penyeleksian pada CSS? mudah-mudahan tutorial ini dapat dimengerti oleh sobat dan bermanfaat tentunya. Kalo gitu sekian untuk tutorial CSS selector atau penyeleksian CSS, kita akan lanjutkan kembali tutorial CSS di tutorial berikutnya :)
0 Response to "CSS Selector atau Penyeleksian CSS"
Post a Comment