what is the difference between going from "gallery li a p{}" and "gallery p{}" in the css

The difference is linked to specificity. The CSS interpreter reads your cascading style sheet from the end of your selector to the front. In this example, it firsts looks for all the p tags, then all the p tags that are in a "gallery" (I assume class or id) tag, thus targeting all the paragraphs that are in the gallery tag. Whereas in the "gallery li a p{}" example, it is a more specific path and the interpreter will look for the paragraph tag that is in an anchor tag, in a list item tag, in the gallery tag.

Best coding practice: it is recommended to use classes when working with CSS, because it is more specific and the styling that you apply will impact only the element that has the one class you chose, thus giving you more control over your styling.

Declaring classes: in your HTML structure, let's say for a paragraph, you declare a class as follows: <p class="my_paragraph">Lorem Ipsum</p>.

Same goes for id's, though id's are more specific and should be used carefully as they should be unique.

"gallery li a p{}" will only effect "p" inside "a" inside "li" inside "gallery"

while

"gallery p{}" will effect all "p" inside "gallery" regardless of whether or not it is in "a"

for example

"gallery li a p{}" will effect only Paragraph1 while "gallery p{}" will effect both.

<li>
    <a>
        <p> Paragraph1 </p>
    </a>

    <p> Paragraph2 </p>

</li>