p.classname or .classname p, any difference?

CSS works by reading each rule in order, example.

p {font-weight: bold;}

p span {font-weight:normal;}

<p>Hiya</p> // BOLD

<p><span>HIYA</span></p> // NORMAL

Same goes for classes

.bold {font-weight: bold;}

span {font-weight:normal;}

<p class="bold">I AM BOLD <span>I AM NOT</span> BOLD AGAIN</p>

<p class="bold"><span> I AM ALL NORMAL</span></p>

So in your example defining a class first will target each and every element that has that class.

By defining something after that class .class p it will target all elements inside that class which are p.

Hope this helped

UPDATE

so you can understand better,

div {color: blue;}
div p {color: red;}
div p span {color: yellow;}
div ul {color: purple;}

<div>I AM BLUE <p>I AM RED <span> I AM YELLOW</span></p>I AM BLUE</div>

<p>I HAVE NO CSS ATTACHED TO ME</p>

<div><ul><li>I AM PURPLE</li></ul> I AM BLUE</div>

It works exactly the same for classes as it does with elements.

I would explain it like this, if you have the following CSS below:

p.classname { stuff }

it has locked that class name to the <p> tags only.

So if you put class="classname" in anything else, it won't work on anything but the <p> tags.

So when you do

p.classname{
  ... 
}

You are looking for a <p> with class classname

when you do

.classname p

You are looking for a p that is a descendant of the classes classname.

In CSS . is used as a selector for a class name.