FEEDBACK: Learn Typography by Building a Nutrition Label

HTML-CSS
1

I am learning that there are many ways how to kill a cat in CSS but that leaves me confused and paralyze sometimes and asked why one is used instead of the other like:

Step 46:

Create a new .indent selector and give it a margin-left property set to 1em .

.indent {
    margin-left: 1em;  

  /* Why not this guy?

    text-indent: 1em; Though to be fair I only found out later
                      in the last part of the challenge 
                      that indenting <p>'s text
                      doesn't affect its border-bottom. A lot
                      of border patch ups earlier were made because
                      margin-left indents the border-bottom too.

 */
}

Step 51:

After your last .divider , create another p element with the text Trans Fat 0g . Italicize the word Trans by wrapping it in an i element. Give the new p element the class attribute set to indent no-divider . Wrap Trans Fat 0g in a span element for alignment.

<i>Trans</i>Fat

Why not <em>Trans</em>Fat> building upon the knowledge learned from Learn HTML By Building a Cat Photo App Step 25 ?

Or apply the font-style:italic; in the stylesheet styles.css? like one already learned from Learn CSS By Building a Cafe Menu Step 60?

P.S. No hate for <i> tags in the html document.

1 Like
2

Hello @i_am_not_alive,

Great questions and congratulations on getting through the previous challenges!

It is perfectly understandable that one might thing that html & css is full of redundancy, but the fact is that they provide a flexible toolset for the purpose of presenting the contents of a document. While it may appear that tools like margin-left and text-indent give the same results, they have different applications - kind of like using an impact drill as a hammer - it might allow one to achieve a desired result but they weren’t designed for the same jobs.

A margin-left can be applied to a container (or box) holding some text (or even a cat) effectively shifting it to the left. A text-indent property can also be applied to the contents of a container (i.e. text), but the text-indent property has no meaning when ‘applied’ to a container itself - and thankfully so.

HTML tags are another separate matter entirely - the “<i>” element does not mean italicised - although both words do indeed start with the letter i - at the risk of sounding flippant - ice cream and ice scrapper also do very different things :rofl:.
The Idiomatic Text element <i> is used for text that is meant to contrast in someway from the surrounding text while, the <em> element is used to emphasise and stress (see : The Emphasis element.

HTML element tags are meant to provide structure to the document. CSS properties are focused on the styling of the document. Understanding these differences is important since the experience of maintaining your code, should one ever want to update or amend it will be a dramatically better if the separation of responsibility principle is observed.

The box model lies at the heart of CSS and the link is a great place to get into the details of what this model represents.

Does this help?

Keep up the good progress!

Happy Coding! :slightly_smiling_face:
2 Likes
3

Thank you for the links. Now, I seem to understand their subtle differences.

Also, the site is an excellent reference and can play around with individual HTML elements too as much as I like to tinker around on the practice projects while working on them here - a much-needed great complement to this fantastic site.

2 Likes