Definition List

by Yaroslav Samardak

HTML

<div class="html">
  <dl>
    <dt>ALGOL</dt>
    <dd>ALGOL was one of the earliest high-level languages. But unlike Fortran and COBOL, it isn’t much used. Just the same, it has been very important as a model for languages that came later</dd>
    <dt>Assembly Language</dt>
    <dd>Assembly language is the most fundamental kind of software development where the coder has complete access to the CPU. Whether used directly or as a way to better understand computers at the hardware level, assembly language programming is a powerful skill to have</dd>
    <dt>C++</dt>
    <dd>Originally “C with Classes,” C++ is, in many ways, simply a more advanced successor to C (though the situation is a lot more complicated than that). C++ was developed to add high-level programming paradigms to C, while retaining the low-level hardware-manipulation capabilities. Many of these additions have been added to C over the years, and the languages are more like two dialects of a single language</dd>
    <dt>Delphi</dt>
    <dd>Delphi is an object-oriented version of the Pascal programming language. It’s been around for over 20 years and more popular than ever</dd>
    <dt>Node.js</dt>
    <dd>Node.js is a runtime environment that allows JavaScript to be used to create server-side applications</dd>
  </dl>
</div>

<div class="html" data-theme="dark">
  <dl>
    <dt>ALGOL</dt>
    <dd>ALGOL was one of the earliest high-level languages. But unlike Fortran and COBOL, it isn’t much used. Just the same, it has been very important as a model for languages that came later</dd>
    <dt>Assembly Language</dt>
    <dd>Assembly language is the most fundamental kind of software development where the coder has complete access to the CPU. Whether used directly or as a way to better understand computers at the hardware level, assembly language programming is a powerful skill to have</dd>
    <dt>C++</dt>
    <dd>Originally “C with Classes,” C++ is, in many ways, simply a more advanced successor to C...

CSS

.html {
  --text-color-normal: #0a244d;
  --text-color-light: #8cabd9;
  --color-background: #eef4f7;
}

.html[data-theme='dark'] {
  --text-color-normal: hsl(210, 10%, 62%);
  --text-color-light: hsl(210, 15%, 35%);
  --color-background: hsl(210, 35%, 15%);
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}

dl {
  color: var(--text-color-normal);
  background: var(--color-background);
  padding: 1em;
  border-radius: 4px;
}

dl dt {
  color: var(--text-color-light);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.4em;
  opacity: 0.7;
}

dl dd {
  margin: 0 0 1.2em;
  text-align: justify;
}