Can someone help me understand "Box-sizing";and is it applied universally every time?

The 'box-sizing' attribute is commonly used universally with the '*' (asterisk) selector like this:

 *,
*:before,
*:after {
  box-sizing: border-box;
}

In that use case, it is applied to EVERY element in that document. In some cases that may not be the best practice as universal selectors are very 'expensive' and can increase load times. But cases you are learning about now, it is just fine. But yes. It applies to everything that you decide to select, and with a universal selector this includes all images in the document.

box-sizing is a CSS property that internet browsers (like Chrome, Firefox, Safari, etc.) assign a default/"universal" value of "content-box" to. To understand what this does or why you'd want to change it, you should probably read about the box model (link and link), but basically when you assign something like a width to an element (like an image), box-sizing's value determines if that width is given to just the content of the element, or the content plus any side-padding and side-border widths. Same goes for height, etc.

Like any CSS property, box-sizing can be changed or overruled for any number of elements, but most people prefer to just universally override browsers' default box-sizing value and set it to border-box, just because that way of determining size seems to make more sense to people. Carson's code snippet is how you make that universal change.