Learn Advanced CSS

CSS Functions

<div>
  <h1 class="course">HTML</h1>
  <h2>Introduction to HTML</h2>
  <h3>HTML Elements</h3>
  <h3>HTML Forms</h3>

  <h1 class="course">CSS</h1>
  <h2>Introduction to CSS</h2>
  <h3>CSS Selectors</h3>
  <h3>CSS Layout</h3>

  <h1 class="course">JavaScript</h1>
  <h2>Introduction to JavaScript</h2>
  <h3>JavaScript Functions</h3>
  <h3>JavaScript DOM Manipulation</h3>
</div>

div {
  counter-reset: course-counter;
}

h1 {
  counter-reset: chapter-counter;
  counter-increment: course-counter;
  font-size: 32px;
}

h2 {
  counter-reset: lesson-counter;
  counter-increment: chapter-counter;
  margin-left: 20px;
}

h3 {
  margin-left: 40px;
  counter-increment: lesson-counter;
}

.course::before {
  content: "Course " counter(course-counter) ": ";
  font-weight: bold;
  color: #0077b6;
}

h2::before {
  content: "Chapter " counter(course-counter) "." counter(chapter-counter) ": ";
  font-weight: bold;
  color: #0077b6;
}

h3::before {
  content: counter(lesson-counter, upper-roman) ". ";
  font-weight: normal;
  color: #0077b6;
}