Anda di halaman 1dari 2

CSS ( Cascading Style Sheet )

adalah sebuah metode yang digunakan untuk mempersingkat penulisan tag HTML,
seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi
pengulangan penulisan.
Kegunaan :
a. Mempersingkat penulisan tag HTML
b. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat
pengulangan penulisan.
c. Mudah dan cepat dalam me-maintenance, dikarenakan file CSS yang dibuat
secara terpisah.
d. CSS biasa melakukan apa yang tidak bias dilakukan oleh HTML, misalnya
memberikan warna pada input box, atau scrollbar.
Cara Penulisan CSS
a. Inline Style Sheet , Penulisan sintaks CSS didalam elemen HTML
Cth : <p style=color : green>
b. Embedded Style Sheet, Penulisan sintaks CSS didalam dokumen HTML
Cth : <style type=text/css>
h1 {color : red }
</style>
c. Linked Style Sheet, Penulisan sintaks CSS dihalaman yang berbeda atau terpisah
dari HTML, dengan link :
Cara 1 :
<link rel=stylesheet type=text/css href=http://www.webgue.com/global.css>
Cara 2:
<style type=text/css>
@import url(http://www.webgue.com/global.css);
</style>
Aturan penulisan CSS :
a. Selector : terdiri dari Tag, Class, Ids dan Pseudo diberi tanda {}
b. Declaration : mendiskripsikan property dan value yang digunakan pada selector
atau pemisah.
Contoh :
h1 {
Color : #0000ff;
}
Komentar Pada CSS
h1 {
Color : #0000ff;
}

/* h1 : selector , property : color , value : #0000ff */

Macam-macam Selector
a. Tag / Elemen HTML,
cth : h1 {color : green}
i {font-style: normal}
b. Class, penggunaan selector class di awali dengan tanda titik (.) pada nama class
.isiteks{
Font-family:arial, Helvetica, sans-serif; font-size:12px; color :#6699ff}
<body>
<p class=isiteks> Belajar Internet 1 (HTML, CSS, Javascript)</p>
</body>
c. Id, tag individual atau spesifik di tandai dengan #
Cth : #header {font-style:20px}
<div id=header>

d. KOntekstual, untuk mendefinisikan suatu konteks tertentu


Cth :
<html>
<head>
<style>
p i {border-bottom: 1px solid;}
</style>
</head>
<body>
<h1> This <i> is nor</i> underlined</h1>
<p> However, this italics elemet is a descendant of a paragraph,
so <i> it does </i>Get underlined.</p>
</body>
</html>