CSS

Default Value di CSS: Nilai Standar dari Properti CSS

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>

Hanifah Nurbaeti

Share
Tags: CSSreferences