CSS Selector Basic
Digunakan pada CSS untuk mengenali sebuah elemen HTML yang akan diberi style.
terdiri dari:
a. elemen HTML.
b. id
Penjelasan:
1. sebuah elemen HTML hanya boleh memiliki 1 id.
2. setiap halaman hanya boleh memiliki 1elemen yaitu dengan id tersebut.
3. dapat digunakan sebagai penanda halaman untuk link.
4. digunakan juga untuk java script.
5. sebaiknya tidak digunakan untuk css lebih baik pake class.
c. class.
d. complex selector.
sebelumnya jangan bingung apabila sudah melihat script yang begitu panjang dibawah ini, karena dengan pemberian komentar yang begitu panjang padahal dengan script yang sangat sederhana. Maka saya sarankan untuk meng copy script yang saya buat ke dalam kode editor masing-masing, namun yang saya sarankan kalian menggunakan kode editor yaitu sublime text. Supaya tidak dibingungkan dengan kolom komentar yang saya sisipkan untuk memberikan penjelasan pada anda.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style type="text/css">
body {
font-family: arial;
}
/*memberikan efek seluruh tulisan dalam Browser itu type hurufnya adalah arial*/
h1 , h2 {
color: green;
}
/*memberikan efek seluruh tulisan dalam h1 yang ada di dalam tag h2 itu akan berwarna Hijau*/
/*jika menggunakan warna yang berbeda maka penulisanya bisa diubah, tetapi apabila kita menginginkan warna colornya sama maka bisa dihubugkan dengan elemen (,) atau artinya = dan*/
/*h2 {
color: green;
}
memberikan efek seluruh tulisan dalam h2 yang ada di dalam tag h2 itu akan berwarna Hijau
}*/
ul li a {
color: yellow;
}
/*Untuk memberi warna pada tag li maka tidak kita mengetikan ul { color: orange ; akan tidak ada perubahan apa-apa dan kalo kita mengetikan script, a{ color: orange; maka semua hyper link nya akan berwarna orange. Oleh karena itu kita harus menuliskan sesuai script yang saya tuliskan diatas dengan secara lengkap} */
ol li a {
color: red;
}
/*sama seperti komentar diatas (ul>*/
/*Selanjutnya bagaimana kita memberikan warna pada paragraf yang terdiri dari dua paragraf namun dengan mengunakan warna yang berbeda. Jika kita mengetikan script p { color: blue ;} makan yang terjadi kedua paragraf tersebut memiliki warna yang sama yaitu berwarna biru. Nah untuk membedakanya kita akan menambahkan id dan class pada tag paragraf/<p>, seperti dibawah*/
#p1 {
color:orange;
}
/*untuk "id" sebelum selector ditambahkan tanda (#) dan id hanya bisa terdiri dari 1 elemen yaitu p1.*/
.p2 {
color: red ;
}
.cetak-tebal {
font-weight: bold ;
}
p.cetak-tebal {
font-size:20px;
}
/*dan untuk "class" sebelum selector ditambahkan tanda (.) di dalam selector class itu bisa ditambahkan beberapa elemen seperti pada script diatas saya menambahkan elemen font-size sedangkan sebelumnya ada elemen color. */
</style>
</head>
<body>
<h1>Hello Word</h1>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
<ol>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
<li><a href="#">link 8</a></li>
<li><a href="#">link 9</a></li>
<li><a href="#">link 10</a></li>
</ol>
<a href="#" class="cetak-tebal">WebProgrammingLeni</a>
<h2>Judul Artikel</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2" class="cetak-tebal">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Sekian dari saya terimakasih
Tidak ada komentar:
Posting Komentar