Internal and eksternal style in cascading style sheet
- 2. www.company.com Struktur CSS 1. Selector • Selector adalah nama-nama yang diberikan untuk style-style yang berbeda baik itu style internal maupun eksternal. selector {property: value;} • Selector dapat berupa tag HTML maupun class.
- 3. www.company.com 2. Class Selector • Digunakan untuk menentukan style yang dapat digunakan tanpa menentukan lagi tag HTML sederhana • Penulisan class adalah dengan menggunakan tanda titik atau dot • Class Selector merupakan elemen dimana elemen yang sama dapat menerapkan lebih dari satu style. • Contoh:
- 4. www.company.com <style type="text/CSS"> f.times {font-family: times; color:red;} f.verdana {font-family: verdana;} .courier {font-family: "courier";} </style> <body> <f class="times">setiap huruf memiliki huruf times new roman dan warna merah</f><br> <p class="times">setiap huruf tidak memiliki huruf times new roman dan tidak berwana merah<br><br> <f class="verdana">setiap huruf memiliki huruf verdana</f><br> <p class="courier">setiap huruf memiliki huruf courier</p> </body>
- 5. www.company.com 3. ID Selector • ID selector digunakan untuk menentukan style yang berhubungan dengan objek-objek dengan sebuah ID yang unik. • ID selector hanya dapat dipergunakan pada satu elemen saja pada setiap halaman web. • Menggunakan tag # (kres) sebelum menggunakan nama Selector. Contoh: #helvetica {font-family: Helvetica;}
- 6. www.company.com <style type="text/CSS"> #times {font-family: times;} #verdana {font-family: verdana;} #courier {font-family: "courier";} </style> <body> <div id="times">setiap huruf memiliki huruf times new roman</div><br> <div id="verdana">setiap huruf memiliki huruf verdana</div><br> <div id="courier">setiap huruf memiliki huruf courier</div> </body>
- 7. www.company.com 4. PEWARISAN / INHERITANCE • Suatu kondisi dimana bagian-bagian HTML dalam dokumen kita yang kekurangan dalam spesifikasi aturan CSS dapat mengikuti atau dibuat menurut aturan CSS yang menutupinya.
- 8. www.company.com <style type="text/css"> b {background-color : green; color : white;} </style> <body> <B> belajar membuat web dengan CSS sangatlah mudah. <br> hanya dengan program notepad pun jadi. </B> </body>
- 9. www.company.com 5. PSEUDO CLASSES • Pseudo classes dalam CSS dibuat tebal dalam selector-selector untuk menentukan sebuah statemen atau relasi selector, dan penulisannya dipisahkan dengan tanda titik dua : diantara selector dan pseudo class. • Contoh format penulisannya: selector : pseudo class { property: value; }
- 10. www.company.com • Terdapat empat pseudo classes yang dapat digunakan secara aman ketika diaplikasikan kedalam hyperlink atau link: 1. * link : untuk tampilan sebuah link yang belum dikunjungi. 2. * visited : untuk tampilan sebuah link ke halaman yang telah dkunjungi. 3. * active : untuk tampilan sebuah link yang sedang aktif (ketika di klik). 4. * hover : untuk tampilan sebuah link yang hover (ketika cursor melintas diatasnya).
- 11. www.company.com Contoh penggunaan Pseudo Class: <style type="text/css"> a:hover {text-decoration:none; color:blue; background-color:yellow;} </style> <body> <a> Belajar membuat web dengan pseudo class. </a> </body>