Definisi
adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk
mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak
terjadi pengulangan tulisan.
1. Selector --> Dapat berupa nama tag elemen HTML, class, atau ID
2. Properti --> Merupakan style css yang akan digunakan
3. Value --> Merupakan nilai style yang diberikan
Selector pada CSS dapat memiliki lebih dari satu buah properti dan properti pun dapat memiliki banyak value. Contoh
Inline Style merupakan teknik menyisipkan style CSS ke dalam tag HTML. Bentuk umumnya
Embedded Style Sheet merupakan teknik menyisipkan style CSS ke dalam halaman (file) HTML. Bentuk umumnya :
1. Menggunakan tag Link html, Bentuknya :
Kelebihan metode external style sheet jika dibandingkan dengan internal style sheet dan inline style adalah :
1. Mempermudah pemeliharaan.
2. Mengurangi ukuran halaman web.
3. Mengurangi bandwith.
4. Meningkatkan fleksibilitas web.
5. User yang mengalami keterbatasan dapat mengaktifkan, menonaktifkan maupun mengatur tampilan sesuai keinginan.
6. Mudah dalam membaca source code web.
Tiga Bagian Tubuh CSS
Pada dasarnya CSS hanya memiliki 3 bagian tubuh yang perlu dipahami, antara lain :1. Selector --> Dapat berupa nama tag elemen HTML, class, atau ID
2. Properti --> Merupakan style css yang akan digunakan
3. Value --> Merupakan nilai style yang diberikan
Selector pada CSS dapat memiliki lebih dari satu buah properti dan properti pun dapat memiliki banyak value. Contoh
<style type="text/css">
selector{
properti_satu: value;
properti_dua: value_1 value_2 value_3;
}
</style>
Teknik Penulisan CSS
Terdapat 3 teknik penulisan CSS yang perlu diketahui- Inline Style Sheet
- Embedded Style Sheet (Internal Style Sheet)
- External Style Sheet
Inline Style merupakan teknik menyisipkan style CSS ke dalam tag HTML. Bentuk umumnya
<elemenHTML style="property:value">
<html>
<head>
<style type="text/css">
selector{
properti : value;
}
</style>
</head>
<body>
# Konten HTML Disini #
</body>
</html>
External Style Type, Merupakan teknik menyisipkan file CSS ke dalam halaman HTML. File CSS ini selalu berekstensi .css dan cara memanggil file css ini adalah dengan menyisipkan link ke dalam file HTML. Ada 2 cara menyisipkan file css ini yaitu :1. Menggunakan tag Link html, Bentuknya :
<link style="stylesheet" type="text/css" href="File CSS directory">
2. Import file
<html>
<head>
<style type="text/css">
@import url(Directory Path File CSS.css);
</style>
</head>
<body>
# Konten HTML Disini #
</body>
</html>
Kelebihan metode external style sheet jika dibandingkan dengan internal style sheet dan inline style adalah :
1. Mempermudah pemeliharaan.
2. Mengurangi ukuran halaman web.
3. Mengurangi bandwith.
4. Meningkatkan fleksibilitas web.
5. User yang mengalami keterbatasan dapat mengaktifkan, menonaktifkan maupun mengatur tampilan sesuai keinginan.
6. Mudah dalam membaca source code web.
CSS CLASS & CSS ID
Ciri dari CSS class adalah selalu diawali tanda titik (.). sedangkan CSS ID selalu diawali tanda pagar (#). Contoh:<style type="text/css">
.textCetakTebal{ <-- ini Merupakan class CSS
font-weight:bold;
}
#header_wrapper{ <-- ini Merupakan CSS ID
margin:10px;
}
</style>
.jpg "Aritmatika")
