Pengenalan CSS Style dan Symtax CSS Style :
CSS merupakan singkatan dari Cascading Style Sheets, CSS merupakan Pemogramaan Web untuk yang terdiri dari kumpulan kode terstruktur yang terdiri dari beberapa komponen (Property dan value) untuk mengatur tampilan Halaman Html suatu website ataupun blog.
Keuntungan CSS adalah mempercantik tampilan halaman HTML dan memperpendek kode-kode HTML dengan CSS, Style yang kita tampilkan dapat digunakan secara berulang untuk page HTML lain.
Dalam syntax CSS, dikenal beberapa Aturan Penulisan Symtax sebagai berikut :
1. Taghtml
Tag dalam html dapat diformat dalam CSS dengan menuliskan tagHTML diikuti property dan value tag.
Penulisan TagHtml :
TagHTML{
Property :value;
}
Property :value;
}
Contoh :
<html>
<style>
p{
color:red;
}
</style>
<body>
<p>
Pengunaan Setting CSS pada Taghtml
</p>
</body>
</html>
2. ID Selector(ID CSS style)
ID selector adalah penamaan untuk memformat Style CSS yang hanya dapat digunakan satu kali dalam halaman Web HTML, Misalnya pada Navigasi/Menu pada website.
Penulisan ID Selector :
#NamaIdStyle{
Property :Value;
}
Property :Value;
}
Contoh :
<html>
<head>
<style>
# top{
backgroud-color:red;
width:950px;
}
</style>
<body>
<Div id=”Top”>
ID pada Css Style
</div>
</body>
</html>
3. Class Selector (Class CSS style)
Class Selector Hampir sama dengan ID Selector yang membedakan Class Selector dengan ID Selector adalah Class Dapat digunakan/ditampilkan lebih dari satu kali, dan dapat digabungkan dengan Class Selector yang lain.
Penulisan Class Selector
.namaClassSelector{
Property:value;
}
Property:value;
}
Contoh Class Selector:
<html>
<head>
<style>
.lihat{
height:150px;
clear:both;
color:yellow;
}
.view{
padding:10px;
background-color:red;
}
</style>
</head>
<body>
<div class=”view”> ini Class CSS Class view</div>
<p class=”view”> ini Class CSS Class view juga</p>
<p class=”lihat”> ini Class CSS Class Lihat</p>
<div class=”view lihat”> ini Class CSS class view gabung CSS Class lihat</div>
</body>
</html>
Jadi perbedaan penulisan Class Selector - > diawali tanda titik (.) dan ID Selector diawali tanda #
Artikel Lain mengenai
Penjelasan Pengaturan Posisi pada CSS
Pengunaan Property Background CSS
Artikel Lain mengenai
Penjelasan Pengaturan Posisi pada CSS
Pengunaan Property Background CSS
