Dalam
pembuatan dokumen web menggunakan style CSS di kenal adanya aturan atau
struktur penulisan baku
agar style CSS yang kita buat tersebut dapat ditampilkan dengan baik dalam
dokumen web yang dibuat. Contoh
:
<html>
<head>
<title>HTML Selector</title>
<style type="text/CSS">
<!--
p {font-family: verdana;}
-->
</style>
</head>
<body>
<p> penggunaan HTML Selector dalam CSS</p>
</body>
</html>
Pada
contoh diatas dipergunakan tag HTML <p> sebagai selector dan setiap huruf
yang berada diantara tag <p> dan </p> akan memiliki jenis font
verdana sesuai dengan value atau nilai yang diberikan dalam property style
tersebut. Seperti terlihat dalam gambar berikut :
Gambar 4.1. Penerapan HTML selector
dilihat dalam browser
1. SELECTOR
Jika dalam HTML kita mengenal adanya
tag-tag yang menyusun sebuah dokumen HTML, maka dalam CSS kita juga mengenal dengan
sebutan selector. Selector adalah nama-nama yang diberikan untuk style-style
yang berbeda baik itu style internal maupun eksternal. Dalam style tujuan, anda
harus menentukan bagaimana tiap selector seharusnya bekerja yang dinamakan
properties di dalam tanda { } atau curly bracket yang dapat memiliki nilai
berupa font, warna dll, kemudian dalam body di halaman web anda, anda arahkan
ke selector-selector ini untuk mengaktifkan style tersebut.
Karena CSS memiliki aturan tersendiri
dalam penulisan sintaknya dalam CSS, dan penulisan sintak tersebut terbagi ke dalam
tiga bagian yaitu: Selector, Property, dan Value. Sebagai penjelas coba
perhatikan contoh berikut :
selector
{property: value;}
Selector dalam CSS adalah elemen yang
akan didefinisikan dalam style CSS, sedangkan elemen ini dapat berupa tag HTML
maupun Class. Sedangkan Property dalam CSS adalah atribut yang berfungsi untuk
mendefinisikan Selector, sedangkan Value adalah nilai atau harga dari sebuah
Property.
Sebagai contoh :
<html>
<head>
<style type="text/css">
B.besar {color:red; font-size:15px; font- family:arial; }
</style>
</head>
<body>
<b>ini adalah huruf besar dengan
html</b><br>
<b class="besar">ini adalah
huruf besar dengan CSS</b>
</body>
</html>
Dalam kasus ini B.besar adalah
selector. Contoh diatas akan menghasilkan output sebagai berikut :
Lebih Lengkapnya Download Gratis file Wordnya Klik Disini
0 komentar:
Posting Komentar