- Ada pertanyaan hubungi?
- 0831 8393 2425
- rasid [at] pintar.id
CSS
Aturan Penggunaan CSS
Bentuk umum :
selector {property: value}
selector (elemen yang akan didefinisikan)
property (atribut yang akan diubah)
value (nilainya)
Antara property dan nilai sisahkan dengan titik-dua(colon):
body { color: black }
Jika nilai berupa beberapa kata gunakan petik ganda:
p { font-family: “sans serif” }
Jika lebih dari satu property pisahkan dengan titik-koma (semi colon) :
p { text-alig: center ; color: red }
Jika igin lebih mudah dibaca:
p
{
text-alig: center ;
color: red ;
font-family: arial
}
Jika selector dikelompokan :
h1, h2, h3,h4, h6
{
color: blue
}
Jika menggunakan atribut class (dalam definisi CSS):
p.kanan {text-align: right}
p.kiri {text-align: left}
Dalam dokumen HTML menggunakan definisi class :
<p class=”kanan”> Ini kalimat </p>
<p class=”kiri”> Ini kalimat </p>
Jika menggunakan ID atribut :
#kanan { text-align: right }
Dalam dokumen HTML menggunakan ID atribut :
<p id=”kanan”> Ini kalimat </p>
<h3 id=”kanan”> Ini header </h3>
Style Sheet External
Style sheet yang didefinisikan secara eksternal dimana Pengaturan1.css digunakan untuk Eksternal.html
Ekstensi filenya harus disimpan dalam ”*.css”.
Pengaturan1.css yang berisi :
body {background-color:yellow}
h1 {font-size: 36 pt}
h2 {color:blue}
p {margin-left:50px}
Eksternal.html dengan kode:
<html>
<head>
<title> CSS External </title>
<link rel=”stylesheet” type=”text/css” href=”Pengaturan1.css”>
</head>
<body>
<h1> Header dengan 36 pt </h1>
<h2> Header 2 warna biru </h2>
<p> Paragraf dengan left-margin 50 px </p>
</body> </html>
Pengaturan2.css yang berisi :
body {background-color: tan}
h1 {color: maroon; font-size: 20 pt}
h2 {color: blue}
p {font-size: 11pt; margin-left :15px}
a:link{color:green}
a:visited{color:yellow}
a:active{color:blue}
a:hover{color:black; text-decoration:none }
Eksternal2.html dengan kode:
<html>
<head> <title> CSS External </title>
<link rel=”stylesheet” type=”text/css” href=”Pengaturan2.css”>
</head>
<body>
<h1> Header 1 </h1>
<h2> Header 2 warna biru </h2>
<p> Paragraf dengan left-margin 50 px </p>
<a href=”http://www.emerer.com”> Pak Rasid</a>
</body> </html>
Style Sheet Internal
Berikut style sheet yang didefinisakan secara internal, karena web page tertentu bersifat unik.
<html>
<head><title> CSS Internal </title>
<style type=”text/css”>
body { background-image:url(‘kayu.jpg’)}
hr {color: red}
p {font-size: 11pt; margin-left: 15px ; color:lime}
</style>
</head>
<body><p> Ini paragraf </p>
<hr>
</body> </html>
Style Sheet Inline
Hanya bisa dilakukan pada lokasi yang spesifik. Bisa dilakukan tetapi tidak dianjurkan, akan menyebabkan dokumen lebig besar karenaharus didefinisi satu persatu.
<html>
<head>
<title> CSS Inline </title>
</head>
<body>
<p style=”font-size: 20pt; margin-left: 15px ; color:sienna”> Ini paragraf </p>
</body></html>
Multi Style Sheet
Jika digunakan lebih dari satu definisi dari style sheet maka nilai yang tidak didefinisikan akan diinheritkan / diturunkan dari style sheet yang lebih general.
Pengaturan3.css :
h3
{color: orange;
text-align:left;
font-size:8pt
}
Multy Style Sheet.html :
<html>
<head> <title> CSS Multi Style </title>
<link rel=”stylesheet” type=”text/css” href=”Pengaturan3.css”>
<style type=”text/css”>
h3
{ text-align: right;
font-size:20pt }
</style></head>
<body>
<h3>Heading 3 </h3>
</body> </html>
