Cascading Style Sheets: Perbedaan antara revisi
Konten dihapus Konten ditambahkan
→CSS Selector: sunting isi |
→ID Selector: sunting isi |
||
Baris 40:
Contoh penulisan CSS dengan metode '''Inline Style Sheet'''
<syntaxhighlight lang="html4strict" line="1">
<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
</syntaxhighlight>
Baris 62 ⟶ 65:
Contoh penggunaan CSS dengan metode '''Embedded Style Sheet''' :<ref name="css_html" />
<syntaxhighlight lang="html4strict" line="1">
<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {
background: #0000FF;
h1 {font-size:18pt; color:#FF0000}▼
color: #FFFF00;
margin-left: 0.5in
}
h1 {
color: #FF0000
}
p {
font-size: 12pt;
font-family: arial;
text-indent: 0.5in
}
</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch
</p> <p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna
background biru</p> </body>
</html>
</syntaxhighlight>
Baris 192 ⟶ 212:
''ID selector'' menetapkan target elemen berdasarkan nilai dari atribut id yang diterapkan pada elemennya. Agar elemen dapat terpilih, maka atribut '''id''' pada elemen harus sama persis dengan yang ada di selector.<ref>{{Cite web|title=ID selectors - CSS: Cascading Style Sheets {{!}} MDN|url=https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors|website=developer.mozilla.org|language=en-US|access-date=2022-09-11}}</ref><syntaxhighlight lang="html" line="1">
<!DOCTYPE html>
<html
<head>
▲ <title>Document</title>
<style>
#contoh {
| |||