Home » CSS » Default Value di CSS: Nilai Standar dari Properti CSS

Default Value di CSS: Nilai Standar dari Properti CSS

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Default Value di CSS untuk Elemen HTML

Tabel di bawah ini menunjukkan nilai browser CSS default untuk semua elemen HTML.

No.ElementDefault CSS Value
1.a:linkcolor: (internal value);
text-decoration: underline;
cursor: auto;
2.a:visitedcolor: (internal value);
text-decoration: underline;
cursor: auto;
3.a:link:activecolor: (internal value);
4.a:visited:activecolor: (internal value);
5.abbrNone.
6.addressdisplay: block;
font-style: italic;
7.areadisplay: none;
8.articledisplay: block;
9.asidedisplay: block;
10.audioNone.
11.bfont-weight: bold;
12.baseNone.
13.bdiNone.
14.bdounicode-bidi: bidi-override;
15.blockquotedisplay: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
16.bodydisplay: block;
margin: 8px;
17.body:focusoutline: none;
18.brNone.
19.buttonNone
20.canvasNone.
21.captiondisplay: table-caption;
text-align: center;
22.citefont-style: italic;
23.codefont-family: monospace;
24.coldisplay: table-column;
25.colgroupdisplay: table-column-group
26.datalistdisplay: none;
27.dddisplay: block;
margin-left: 40px;
28.deltext-decoration: line-through;
29.detailsdisplay: block;
30.dfnfont-style: italic;
31.dialogNone.
32.divdisplay: block;
33.dldisplay: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
34.dtdisplay: block;
35.emfont-style: italic;
36.embed:focusoutline: none;
37.fieldsetdisplay: 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.figcaptiondisplay: block;
39.figuredisplay: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
41.footerdisplay: block;
42.formdisplay: block;
margin-top: 0em;
43.h1display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
44.h2display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
45.h3display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
46.h4display: block;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
47.h5display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
48.h6display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
49.headdisplay: none;
50.headerdisplay: block;
51.hrdisplay: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
52.htmldisplay: block;
53.html:focusoutline: none;
54.ifont-style: italic;
55.iframe:focusoutline: none;
56.iframe[seamless]display: block;
57.imgdisplay: inline-block;
58.inputNone.
59.instext-decoration: underline;
60.kbdfont-family: monospace;
61.labelcursor: default;
62.legenddisplay: block;
padding-left: 2px;
padding-right: 2px;
border: none;
63.lidisplay: list-item;
64.linkdisplay: none;
65.mainNone.
66.mapdisplay: inline;
67.markbackground-color: yellow;
color: black;
68.menudisplay: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
69.menuitemNone.
70.metaNone.
71.meterNone.
72.navdisplay: block;
73.noscriptNone.
74.object:focusoutline: none;
75.oldisplay: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
76.optgroupNone.
77.optionNone.
78.outputdisplay: inline;
79.pdisplay: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
80.paramdisplay: none;
81.pictureNone.
82.predisplay: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
83.progressNone.
84.qdisplay: inline;
85.q::beforecontent: open-quote;
86.q::aftercontent: close-quote;
87.rpNone.
88.rtline-height: normal;
89.rubyNone.
90.stext-decoration: line-through;
91.sampfont-family: monospace;
92.scriptdisplay: none;
93.sectiondisplay: block;
94.selectNone.
95.smallfont-size: smaller;
96.sourceNone.
97.spanNone.
98.striketext-decoration: line-through;
99.strongfont-weight: bold;
100.styledisplay: none;
101.subvertical-align: sub;
font-size: smaller;
102.summarydisplay: block;
103.supvertical-align: super;
font-size: smaller;
104.tabledisplay: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
105.tbodydisplay: table-row-group;
vertical-align: middle;
border-color: inherit;
106.tddisplay: table-cell;
vertical-align: inherit;
107.templateNone.
108.textareaNone.
109.tfootdisplay: table-footer-group;
vertical-align: middle;
border-color: inherit;
110.thdisplay: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
111.theaddisplay: table-header-group;
vertical-align: middle;
border-color: inherit;
112.timeNone.
113.titledisplay: none;
114.trdisplay: table-row;
vertical-align: inherit;
border-color: inherit;
115.trackNone.
116.utext-decoration: underline;
117.uldisplay: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
118.varfont-style: italic;
119.videoNone.
120.wbrNone.

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>

You may also like