Making A Nutrition Label Using CSS

In this course, I made a nutritional label. I learned a styling called typography. Typography is supposed to make text readable. There were a lot of new elements and properties. I wrote the most HTML I have written in a while. It felt like I was writing the same lines over and over. And that is because I was. Nutritional Labels contain a lot of important information. That information has to be readable and easily distinguished. There are lines, or dividers, between every fact. After I wrote the text, I had to put a line below it.

Photo by Elsa Olofsson on Unsplash

One new thing I learned was the span element. The span element makes CSS styling easier. You can wrap text in it and then give it a class. You can edit it in CSS. The line will have the same properties as. The main thing I was doing was editing class selectors using CSS. By the end, I had a nutritional label.

Photo by Markus Spiske on Unsplash

I hope you enjoyed your read. I have one more course to do before taking my next certification project. As always, have a great rest of your day.

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto…