Default Value di CSS untuk Elemen HTML
Tabel di bawah ini menunjukkan nilai browser CSS default untuk semua elemen HTML.
| No. | Element | Default CSS Value |
|---|---|---|
| 1. | a:link | color: (internal value); text-decoration: underline; cursor: auto; |
| 2. | a:visited | color: (internal value); text-decoration: underline; cursor: auto; |
| 3. | a:link:active | color: (internal value); |
| 4. | a:visited:active | color: (internal value); |
| 5. | abbr | None. |
| 6. | address | display: block; font-style: italic; |
| 7. | area | display: none; |
| 8. | article | display: block; |
| 9. | aside | display: block; |
| 10. | audio | None. |
| 11. | b | font-weight: bold; |
| 12. | base | None. |
| 13. | bdi | None. |
| 14. | bdo | unicode-bidi: bidi-override; |
| 15. | blockquote | display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; |
| 16. | body | display: block; margin: 8px; |
| 17. | body:focus | outline: none; |
| 18. | br | None. |
| 19. | button | None |
| 20. | canvas | None. |
| 21. | caption | display: table-caption; text-align: center; |
| 22. | cite | font-style: italic; |
| 23. | code | font-family: monospace; |
| 24. | col | display: table-column; |
| 25. | colgroup | display: table-column-group |
| 26. | datalist | display: none; |
| 27. | dd | display: block; margin-left: 40px; |
| 28. | del | text-decoration: line-through; |
| 29. | details | display: block; |
| 30. | dfn | font-style: italic; |
| 31. | dialog | None. |
| 32. | div | display: block; |
| 33. | dl | display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; |
| 34. | dt | display: block; |
| 35. | em | font-style: italic; |
| 36. | embed:focus | outline: none; |
| 37. | fieldset | display: block; margin-left: 2px; margin-right: 2px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 0.75em; padding-right: 0.75em; border: 2px groove (internal value); |
| 38. | figcaption | display: block; |
| 39. | figure | display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; |
| 41. | footer | display: block; |
| 42. | form | display: block; margin-top: 0em; |
| 43. | h1 | display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; |
| 44. | h2 | display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; |
| 45. | h3 | display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; |
| 46. | h4 | display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; |
| 47. | h5 | display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; |
| 48. | h6 | display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; |
| 49. | head | display: none; |
| 50. | header | display: block; |
| 51. | hr | display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; |
| 52. | html | display: block; |
| 53. | html:focus | outline: none; |
| 54. | i | font-style: italic; |
| 55. | iframe:focus | outline: none; |
| 56. | iframe[seamless] | display: block; |
| 57. | img | display: inline-block; |
| 58. | input | None. |
| 59. | ins | text-decoration: underline; |
| 60. | kbd | font-family: monospace; |
| 61. | label | cursor: default; |
| 62. | legend | display: block; padding-left: 2px; padding-right: 2px; border: none; |
| 63. | li | display: list-item; |
| 64. | link | display: none; |
| 65. | main | None. |
| 66. | map | display: inline; |
| 67. | mark | background-color: yellow; color: black; |
| 68. | menu | display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; |
| 69. | menuitem | None. |
| 70. | meta | None. |
| 71. | meter | None. |
| 72. | nav | display: block; |
| 73. | noscript | None. |
| 74. | object:focus | outline: none; |
| 75. | ol | display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; |
| 76. | optgroup | None. |
| 77. | option | None. |
| 78. | output | display: inline; |
| 79. | p | display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; |
| 80. | param | display: none; |
| 81. | picture | None. |
| 82. | pre | display: block; font-family: monospace; white-space: pre; margin: 1em 0; |
| 83. | progress | None. |
| 84. | q | display: inline; |
| 85. | q::before | content: open-quote; |
| 86. | q::after | content: close-quote; |
| 87. | rp | None. |
| 88. | rt | line-height: normal; |
| 89. | ruby | None. |
| 90. | s | text-decoration: line-through; |
| 91. | samp | font-family: monospace; |
| 92. | script | display: none; |
| 93. | section | display: block; |
| 94. | select | None. |
| 95. | small | font-size: smaller; |
| 96. | source | None. |
| 97. | span | None. |
| 98. | strike | text-decoration: line-through; |
| 99. | strong | font-weight: bold; |
| 100. | style | display: none; |
| 101. | sub | vertical-align: sub; font-size: smaller; |
| 102. | summary | display: block; |
| 103. | sup | vertical-align: super; font-size: smaller; |
| 104. | table | display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; |
| 105. | tbody | display: table-row-group; vertical-align: middle; border-color: inherit; |
| 106. | td | display: table-cell; vertical-align: inherit; |
| 107. | template | None. |
| 108. | textarea | None. |
| 109. | tfoot | display: table-footer-group; vertical-align: middle; border-color: inherit; |
| 110. | th | display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; |
| 111. | thead | display: table-header-group; vertical-align: middle; border-color: inherit; |
| 112. | time | None. |
| 113. | title | display: none; |
| 114. | tr | display: table-row; vertical-align: inherit; border-color: inherit; |
| 115. | track | None. |
| 116. | u | text-decoration: underline; |
| 117. | ul | display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; |
| 118. | var | font-style: italic; |
| 119. | video | None. |
| 120. | wbr | None. |
Berikut ini contoh-contoh kode dari default value CSS di atas.
Contoh 1-4(a:link,a:visited,a:link:active,a:visited:active) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
a:link, a:visited {
color: /* browser's internal value */;
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: /* browser's internal value */;
}
</style>
</head>
<body>
<p> Secara default, sebuah elemen ditampilkan seperti ini: </p>
<a href="https://www.dosenIT.com"> Kunjungi DosenIT.com! </a>
<p> Elemen yang disesuaikan (dekorasi dan warna teks yang diubah): </p>
<a style = "text-decoration: none; color: red;" href = "https://www.dosenIT.com"> Kunjungi DosenIT.com! </a>
</body>
</html>
Contoh 5(address) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
address {
display: block;
font-style: italic;
}
</style>
</head>
<body>
<p> Secara default, elemen alamat ditampilkan seperti ini: </p>
<alamat>
Ditulis oleh <a href="mailto:webmaster@example.com"> Jon Doe </a>. <br>
Kunjungi kami di: <br>
Example.com <br>
Box 564, Disneyland <br>
Amerika Serikat
</address>
<p> Elemen alamat yang disesuaikan (font-style diubah): </p>
<address style = "font-style: normal;">
Ditulis oleh <a href="mailto:webmaster@example.com"> Jon Doe </a>. <br>
Kunjungi kami di: <br>
Example.com <br>
Box 564, Disneyland <br>
Amerika Serikat
</address>
</body>
</html>
Contoh 11 (b) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
b {
font-weight: bold;
}
</style>
</head>
<body>
<p> Sebuah elemen b ditampilkan seperti ini: <b> Ini adalah teks tebal. </b> </p>
<p> Elemen b yang disesuaikan: <b style = "font-weight: normal;"> Beberapa teks normal. </b> </p>
</body>
</html>
Contoh 15(blockquote) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<p> Sebuah elemen blockquote ditampilkan seperti ini: </p>
<blockquote cite = "http://www.worldwildlife.org/who/index.html">
Selama 50 tahun, WWF telah melindungi masa depan alam. Organisasi konservasi terkemuka dunia, WWF bekerja di 100 negara dan didukung oleh 1,2 juta anggota di Amerika Serikat dan hampir 5 juta secara global.
</blockquote>
<p> Elemen blockquote yang disesuaikan (margin berubah): </p>
<blockquote cite = "http://www.worldwildlife.org/who/index.html" style = "margin: 100px;">
Selama 50 tahun, WWF telah melindungi masa depan alam. Organisasi konservasi terkemuka dunia, WWF bekerja di 100 negara dan didukung oleh 1,2 juta anggota di Amerika Serikat dan hampir 5 juta secara global.
</blockquote>
</body>
</html>
Contoh 16(body) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
</style>
</head>
<body>
isi dokumen ......
<p> Ubah setelan CSS default untuk melihat efeknya. </p>
</body>
</html>
Contoh 21(caption) :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
/* Default CSS Values */
caption {
display: table-caption;
text-align: center;
}
</style>
</head>
<body>
<p> Elemen teks ditampilkan seperti ini: </p>
<table>
<caption> Tabungan bulanan </caption>
<tr>
<th> Bulan </th>
<th> Tabungan </th>
</tr>
<tr>
<td> Januari </td>
<td> $ 100 </td>
</tr>
<tr>
<td> Februari </td>
<td> $ 50 </td>
</tr>
</table>
<p> Elemen teks yang disesuaikan (perataan teks yang diubah): </p>
<table>
<caption style = "text-align: left;"> Penghematan bulanan </caption>
<tr>
<th> Bulan </th>
<th> Tabungan </th>
</tr>
<tr>
<td> Januari </td>
<td> $ 100 </td>
</tr>
<tr>
<td> Februari </td>
<td> $ 50 </td>
</tr>
</table>
</body>
</html>
Contoh 22(cite) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
cite {
font-style: italic;
}
</style>
</head>
<body>
<p> Sebuah elemen kutipan ditampilkan seperti ini: </p>
<p> <cite> The Scream </cite> oleh Edward Munch. </p>
<p> Elemen kutipan yang disesuaikan: </p>
<p> <cite style = "font-style: normal;"> The Scream </cite> oleh Edward Munch. </p>
</body>
</html>
Contoh 23(code) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
code {
font-family: monospace;
}
</style>
</head>
<body>
<p> Sebuah elemen kode ditampilkan seperti ini: </p>
<code> Sebuah kode komputer </code>
<p> Elemen kode yang disesuaikan (font-family yang diubah): </p>
<code style = "font-family: Impact;"> Sebuah kode komputer </code>
</body>
</html>
Contoh 24(col) :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
/* Default CSS Values */
col {
display: table-column;
}
</style>
</head>
<body>
<p> Lihat bagaimana elemen col ditampilkan di bawah ini: </p>
<table>
<colgroup>
<col span = "2" style = "background-color: red">
<col style = "background-color: yellow">
</colgroup>
<tr>
<th> ISBN </th>
<th> Judul </th>
<th> Harga </th>
</tr>
<tr>
<td> 3476896 </td>
<td> HTML pertama saya </td>
<td> $ 53 </td>
</tr>
<tr>
<td> 5869207 </td>
<td> CSS pertama saya </td>
<td> $ 49 </td>
</tr>
</table>
<p> Ubah setelan CSS default untuk melihat efeknya. </p>
</body>
</html>
Contoh 25(colgroup) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
table, th, td {
border: 1px solid black;
}
colgroup {
display: table-column-group;
}
</style>
</head>
<body>
<p> Lihat bagaimana elemen colgroup ditampilkan di bawah ini: </p>
<table>
<colgroup>
<col span = "2" style = "background-color: red">
<col style = "background-color: yellow">
</colgroup>
<tr>
<th> ISBN </th>
<th> Judul </th>
<th> Harga </th>
</tr>
<tr>
<td> 3476896 </td>
<td> HTML pertama saya </td>
<td> $ 53 </td>
</tr>
<tr>
<td> 5869207 </td>
<td> CSS pertama saya </td>
<td> $ 49 </td>
</tr>
</table>
<p> Ubah setelan CSS default untuk melihat efeknya. </p>
</body>
</html>
Contoh 27(dd) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
dd {
display: block;
margin-left: 40px;
}
</style>
</head>
<body>
<p> Sebuah elemen dd ditampilkan seperti ini: </p>
<dl>
<dt> Kopi </dt>
<dd> Minuman panas hitam </dd>
<dt> Susu </dt>
<dd> Minuman dingin putih </dd>
</dl>
<p> Elemen dd yang disesuaikan (margin kiri diubah): </p>
<dl>
<dt> Kopi </dt>
<dd style = "margin-left: 80px;"> Minuman panas hitam </dd>
<dt> Susu </dt>
<dd style = "margin-left: 80px;"> Minuman dingin putih </dd>
</dl>
</body>
</html>
Contoh 28(del) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
del {
text-decoration: line-through;
}
</style>
</head>
<body>
<p> Sebuah elemen del ditampilkan seperti ini: </p>
<p> <del> Beberapa teks dihapus. </del> </p>
<p> Elemen del yang disesuaikan (dekorasi teks yang diubah): </p>
<p> <del style = "text-decoration: underline;"> Beberapa teks dihapus. </del> </p>
</body>
</html>
Contoh 30(dfn):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
dfn {
font-style: italic;
}
</style>
</head>
<body>
<p> Sebuah elemen dfn ditampilkan seperti ini: </p>
<dfn> Istilah definisi </dfn>
<p> Elemen dfn yang disesuaikan (font-style diubah): </p>
<dfn style = "font-style: normal;"> Istilah definisi </dfn>
</body>
</html>
Contoh 32(div):
<!DOCTYPE html>
<html>
<html>
<head>
<style>
/* Default CSS Values */
div {
display: block;
}
</style>
</head>
<body>
Teks acak.
<div> Beginilah tampilan elemen div secara default. </div>
Teks acak.
<div style = "display: inline;"> Ini adalah elemen div yang disesuaikan (tampilan berubah). </div>
Teks acak.
</body>
</html>
Contoh 33(dl):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
</style>
</head>
<body>
<p> Sebuah elemen dl ditampilkan seperti ini: </p>
<dl>
<dt> Kopi </dt>
<dd> Minuman panas hitam </dd>
<dt> Susu </dt>
<dd> Minuman dingin putih </dd>
</dl>
<p> Elemen dl yang disesuaikan (margin kiri diubah): </p>
<dl style = "margin-left: 50px;">
<dt> Kopi </dt>
<dd> Minuman panas hitam </dd>
<dt> Susu </dt>
<dd> Minuman dingin putih </dd>
</dl>
</body>
</html>
Contoh 34(dt):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
dt {
display: block;
}
</style>
</head>
<body>
<p> Sebuah elemen dt ditampilkan seperti ini: </p>
<dl>
<dt> Kopi </dt>
<dd> Minuman panas hitam </dd>
<dt> Susu </dt>
<dd> Minuman dingin putih </dd>
</dl>
<p> Elemen dt yang disesuaikan (tampilan yang diubah): </p>
<dl>
<dt style = "display: none;"> Kopi </dt>
<dd> Minuman panas hitam </dd>
<dt style = "display: none;"> Susu </dt>
<dd> Minuman dingin putih </dd>
</dl>
</body>
</html>
Contoh 35(em):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
em {
font-style: italic;
}
</style>
</head>
<body>
<p> Sebuah elemen em ditampilkan seperti ini: </p>
<em> Beberapa teks yang ditekankan </em>
<p> Elemen em yang disesuaikan (tampilan diubah): </p>
<em style = "font-style: normal;"> Beberapa teks normal </em>
</body>
</html>
Contoh 37(fieldset):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}
</style>
</head>
<body>
<p> Sebuah elemen fieldset ditampilkan seperti ini: </p>
<fieldset>
<legend> Personalia: </legend>
Nama: <input type = "text"> <br>
Email: <input type = "text"> <br>
Tanggal lahir: <input type = "text">
</fieldset>
<p> Elemen fieldset yang disesuaikan (mengubah padding-left dan border): </p>
<fieldset style = "padding-left: 75px; border: 5px solid green">
<legend> Personalia: </legend>
Nama: <input type = "text"> <br>
Email: <input type = "text"> <br>
Tanggal lahir: <input type = "text">
</fieldset>
</body>
</html>
Contoh 39(figure):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<p>A figure element is displayed like this:</p>
<figure>
<img src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Cinque Terre" width="304" height="236">
</figure>
<p>A customized figure element (changed margin-left):</p>
<figure style="margin-left:100px;">
<img src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Cinque Terre" width="304" height="236">
</figure>
</body>
</html>
Contoh 41(form):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
form {
display: block;
margin-top: 0em;
}
</style>
</head>
<body>
<p> Sebuah elemen formulir ditampilkan seperti ini: </p>
<form action = "demo_form.asp">
Nama depan: <input type = "text" name = "FirstName" value = "Mickey"> <br>
Nama belakang: <input type = "text" name = "LastName" value = "Mouse"> <br>
<input type = "submit" value = "Submit">
</form>
<p> Elemen formulir yang disesuaikan (margin-top diubah): </p>
<form action = "demo_form.asp" style = "margin-top: 50px;">
Nama depan: <input type = "text" name = "FirstName" value = "Mickey"> <br>
Nama belakang: <input type = "text" name = "LastName" value = "Mouse"> <br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>
Contoh 42(h1):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p> Sebuah elemen h1 ditampilkan seperti ini: </p>
<h1> Ini adalah heading 1 </h1>
<p> Elemen h1 yang disesuaikan (font-weight yang diubah): </p>
<h1 style = "font-weight: normal;"> Ini judul 1 </h1>
</body>
</html>
Contoh 43(h2):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p> Sebuah elemen h2 ditampilkan seperti ini: </p>
<h2> Ini adalah heading 2 </h2>
<p> Elemen h2 yang disesuaikan (font-weight yang diubah): </p>
<h2 style = "font-weight: normal;"> Ini adalah judul 2 </h2>
</body>
</html>
Contoh 44(h3):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p> Sebuah elemen h3 ditampilkan seperti ini: </p>
<h3> Ini adalah heading 3 </h3>
<p> Elemen h3 yang disesuaikan (font-weight yang diubah): </p>
<h3 style = "font-weight: normal;"> Ini adalah judul 3 </h3>
</body>
</html>
Contoh 45(h4):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
h4 {
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p> Sebuah elemen h4 ditampilkan seperti ini: </p>
<h4> Ini menuju 4 </h4>
<p> Elemen h4 yang disesuaikan (font-weight yang diubah): </p>
<h4 style = "font-weight: normal;"> Ini judul 4 </h4>
</body>
</html>
Contoh 46(h5):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p> Sebuah elemen h5 ditampilkan seperti ini: </p>
<h5> Ini adalah heading 5 </h5>
<p> Elemen h5 yang disesuaikan (font-weight diubah): </p>
<h5 style = "font-weight: normal;"> Ini adalah tajuk 5 </h5>
</body>
</html>
Contoh 47(h6):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p> Sebuah elemen h6 ditampilkan seperti ini: </p>
<h6> Ini adalah heading 6 </h6>
<p> Elemen h6 yang disesuaikan (font-weight yang diubah): </p>
<h6 style = "font-weight: normal;"> Ini adalah judul 6 </h6>
</body>
</html>
Contoh 49(hr):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
</style>
</head>
<body>
<p> Sebuah elemen hr ditampilkan seperti ini: </p>
<jam>
<p> Elemen jam yang disesuaikan (mengubah lebar batas): </p>
<hr style = "border-width: 10px;">
</body>
</html>
Contoh 52(i):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
i {
font-style: italic;
}
</style>
</head>
<body>
<p> Sebuah elemen i ditampilkan seperti ini: </p>
<i> Beberapa teks miring </i>
<p> Elemen i yang disesuaikan (tampilan yang diubah): </p>
<i style = "font-style: normal;"> Beberapa teks normal </i>
</body>
</html>
Contoh 55(img):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
img {
display: inline-block;
}
</style>
</head>
<body>
<p> Sebuah elemen img ditampilkan seperti ini: </p>
<p> Beberapa teks <img src = "https://dosenit.com/wp-content/uploads/2020/10/0dcd6f4e410a34465a2d611913199e50.gif" alt = "Smiley face" width = "42" height = "42"> beberapa teks. </p>
<p> Elemen img yang disesuaikan (tampilan yang diubah): </p>
<p> Beberapa teks <img src = "https://dosenit.com/wp-content/uploads/2020/10/0dcd6f4e410a34465a2d611913199e50.gif" alt = "Smiley face" width = "42" height = "42" style = "display: block;"> beberapa teks. </p>
</body>
</html>
Contoh 56(ins):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
ins {
text-decoration: underline;
}
</style>
</head>
<body>
<p>An ins element is displayed like this:</p>
<p><ins>Some inserted text.</ins></p>
<p>A customized ins element (changed text-decoration):</p>
<p><ins style="text-decoration:line-through;">Some inserted text.</ins></p>
</body>
</html>
Contoh 57(kbd):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
kbd {
font-family: monospace;
}
</style>
</head>
<body>
<p>A kbd element is displayed like this:</p>
<kbd>Keyboard input</kbd>
<p>A customized kbd element (changed font-family):</p>
<kbd style="font-family:Impact;">Keyboard input</kbd>
</body>
</html>
Contoh 58(label):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
label {
cursor: default;
}
</style>
</head>
<body>
<p> Elemen label ditampilkan seperti ini: </p>
<label for = "yes"> Ya </label>
<input type = "radio" name = "question" id = "yes" value = "yes"> <br>
<label for = "no"> Tidak </label>
<input type = "radio" name = "question" id = "no" value = "no"> <br>
<p> Elemen label yang disesuaikan (kursor diubah): </p>
<label for = "yes" style = "cursor: wait;"> Ya </label>
<input type = "radio" name = "question" id = "yes" value = "yes"> <br>
<label for = "no" style = "cursor: wait;"> Tidak </label>
<input type = "radio" name = "question" id = "no" value = "no"> <br>
</body>
</html>
Contoh 59(legend):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
</head>
<body>
<p> Sebuah elemen legenda ditampilkan seperti ini: </p>
<fieldset>
<legend> Personalia: </legend>
Nama: <input type = "text"> <br>
Email: <input type = "text"> <br>
Tanggal lahir: <input type = "text">
</fieldset>
<p> Elemen legenda yang disesuaikan (padding-left berubah): </p>
<fieldset style = "padding-left: 60px;">
<legend> Personalia: </legend>
Nama: <input type = "text"> <br>
Email: <input type = "text"> <br>
Tanggal lahir: <input type = "text">
</fieldset>
</body>
</html>
Contoh 67(mark):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
mark {
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<p> Sebuah elemen mark ditampilkan seperti ini: </p>
<mark> Teks yang disorot !! </mark>
<p> Elemen tanda kustom (mengubah warna latar belakang): </p>
<mark style = "background-color: pink;"> Teks yang disorot !! </mark>
</body>
</html>
Contoh 75(ol):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>
</head>
<body>
<p> Sebuah elemen ditampilkan seperti ini: </p>
<ol>
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ol>
<p> Elemen ol yang disesuaikan (jenis daftar-gaya yang diubah): </p>
<ol style = "list-style-type: none;">
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ol>
</body>
</html>
Contoh 79(p):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
</style>
</head>
<body>
<p> Ini adalah elemen p (bagaimana ini ditampilkan secara default). </p>
<p style = "margin-left: 50px;"> Ini adalah elemen p yang disesuaikan (margin kiri diubah). </p>
</body>
</html>
Contoh 82(pre):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
</style>
</head>
<body>
<p> Sebuah elemen pra ditampilkan seperti ini: </p>
<pre>
Teks dalam elemen pra
ditampilkan dalam lebar tetap
font, dan itu dipertahankan
baik spasi maupun
jeda baris
</pre>
<p> Elemen pra yang disesuaikan (spasi kosong yang diubah): </p>
<pre style = "white-space: nowrap;">
Teks dalam elemen pra
ditampilkan dalam lebar tetap
font, dan itu dipertahankan
baik spasi maupun
jeda baris
</pre>
</body>
</html>
Contoh 84(q):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
q.customized:before {
content: "- ";
}
</style>
</head>
<body>
<p> Sebuah elemen q ditampilkan seperti ini: </p>
<q> Bangun masa depan di mana orang-orang hidup selaras dengan alam. </q>
<p> Elemen q yang disesuaikan ("konten" diubah): </p>
<q class = "customized"> Bangun masa depan di mana orang-orang hidup selaras dengan alam. </q>
</body>
</html>
Contoh 85-86(q::before, q::after):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
q.customized:before {
content: "- ";
}
</style>
</head>
<body>
<p> Sebuah elemen q ditampilkan seperti ini: </p>
<q> Bangun masa depan di mana orang-orang hidup selaras dengan alam. </q>
<p> Elemen q yang disesuaikan ("konten" diubah): </p>
<q class = "customized"> Bangun masa depan di mana orang-orang hidup selaras dengan alam. </q>
</body>
</html>
Contoh 90(s):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
s {
text-decoration: line-through;
}
</style>
</head>
<body>
<p> Elemen s ditampilkan seperti ini: </p>
<p> <s> Beberapa teks tidak lagi mengoreksi. </s> </p>
<p> Elemen s yang disesuaikan (mengubah "text-decoration"): </p>
<p> <s style = "text-decoration: underline;"> Beberapa teks tidak lagi benar. </s> </p>
</body>
</html>
Contoh 91(samp):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
samp {
font-family: monospace;
}
</style>
</head>
<body>
<p> Elemen samp ditampilkan seperti ini: </p>
<samp> Contoh keluaran dari program komputer </samp>
<p> Elemen samp yang disesuaikan (diubah "font-family"): </p>
<samp style = "font-family: Impact;"> Contoh keluaran dari program komputer </samp>
</body>
</html>
Contoh 93(section):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
section {
display: block;
}
</style>
</head>
<body>
<p> Sebuah elemen bagian ditampilkan seperti ini: </p>
<section>
<h1> WWF </h1>
<p> World Wide Fund for Nature (WWF) adalah organisasi internasional yang menangani berbagai masalah terkait konservasi, penelitian, dan pemulihan lingkungan, sebelumnya bernama World Wildlife Fund. WWF didirikan pada tahun 1961. </p>
</section>
<p> Elemen bagian yang disesuaikan (menambahkan warna latar belakang): </p>
<section style = "background-color: yellow;">
<h1> WWF </h1>
<p> World Wide Fund for Nature (WWF) adalah organisasi internasional yang menangani isu-isu tentang konservasi, penelitian, dan pemulihan lingkungan, sebelumnya bernama World Wildlife Fund. WWF didirikan pada tahun 1961. </p>
</section>
</body>
</html>
Contoh 95(small):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
small {
font-size: smaller;
}
</style>
</head>
<body>
<p> Sebuah elemen kecil ditampilkan seperti ini: </p>
<small> Beberapa teks kecil </small>
<p> Elemen kecil yang disesuaikan (mengubah "font-style"): </p>
<small style = "font-size: 8px;"> Beberapa teks lebih kecil </small>
</body>
</html>
Contoh 98(strike):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
strike {
text-decoration: line-through;
}
</style>
</head>
<body>
<p> Elemen teguran ditampilkan seperti ini: </p>
<p> <strike> Beberapa teks tidak lagi benar. </strike> </p>
<p> Elemen teguran yang disesuaikan (diubah "text-decoration"): </p>
<p> <strike style = "text-decoration: underline;"> Beberapa teks tidak lagi mengoreksi. </strike> </p>
</body>
</html>
Contoh 99(strong):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
strong {
font-weight: bold;
}
</style>
</head>
<body>
<p> Sebuah elemen yang kuat ditampilkan seperti ini: </p>
<strong> Beberapa teks penting. </strong>
<p> Elemen kuat yang disesuaikan (mengubah "font-weight"): </p>
<strong style = "font-weight: normal;"> Beberapa teks penting. </strong>
</body>
</html>
Contoh 101(sub):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
sub {
vertical-align: sub;
font-size: smaller;
}
</style>
</head>
<body>
<p> Sebuah sub elemen ditampilkan seperti ini: </p>
<p> Teks ini berisi <sub> teks subskrip </sub> </p>
<p> Sub elemen yang disesuaikan (mengubah "font-size"): </p>
<p> Teks ini berisi <sub style = "font-size: 25px;"> teks subskrip </sub> </p>
</body>
</html>
Contoh 103(sup):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
sup {
vertical-align: super;
font-size: smaller;
}
</style>
</head>
<body>
<p> Sebuah elemen sup ditampilkan seperti ini: </p>
<p> Teks ini berisi <sup> teks superskrip </sup> </p>
<p> Elemen sup yang disesuaikan (mengubah "font-size"): </p>
<p> Teks ini berisi <sup style = "font-size: 25px;"> teks superscript </sup> </p>
</body>
</html>
Contoh 104(table):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
</style>
</head>
<body>
<p> Sebuah elemen tabel ditampilkan seperti ini: </p>
<table>
<tr>
<th> Bulan </th>
<th> Tabungan </th>
</tr>
<tr>
<td> Januari </td>
<td> $ 100 </td>
</tr>
<tr>
<td> Februari </td>
<td> $ 80 </td>
</tr>
</table>
<p> Elemen tabel yang disesuaikan: </p>
<table style = "border: 1px solid red">
<tr>
<th> Bulan </th>
<th> Tabungan </th>
</tr>
<tr>
<td> Januari </td>
<td> $ 100 </td>
</tr>
<tr>
<td> Februari </td>
<td> $ 80 </td>
</tr>
</table>
</body>
</html>
Contoh 116(u):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
u {
text-decoration: underline;
}
</style>
</head>
<body>
<p> Sebuah elemen u ditampilkan seperti ini: </p>
<u> Beberapa teks yang digarisbawahi </u>
<p> Ubah setelan CSS default untuk melihat efeknya. </p>
</body>
</html>
Contoh 117(ul):
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>
</head>
<body>
<p> Sebuah elemen ul ditampilkan seperti ini: </p>
<ul>
<li> Kopi </li>
<li> Teh </li>
<li> Susu </li>
</ul>
<p> Ubah setelan CSS default untuk melihat efeknya. </p>
</body>
</html>
Contoh 118 (var) :
<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
var {
font-style: italic;
}
</style>
</head>
<body>
<p> Sebuah elemen var ditampilkan seperti ini: </p>
<var> Variabel </var>
<p> Ubah setelan CSS default untuk melihat efeknya. </p>
</body>
</html>
