I can get the second half to work the way I want, but the first element doesn’t work. How does the bar (’|’) work in Home Assistant/CSS because I have no idea what to even look for.
While it will be helpful for you to understand the basics of yaml formatting, the question you are also asking is why the style formatting doesn’t appear to be working in the first example. Sorry if this goes over stuff you already know.
The picture-elements card is one of the few core Lovelace cards that allows a certain amount of CSS styling to be applied to the elements on the card, set out the way you have done in the second example, presumably because you followed the guide.
The format you are using for the first example that isn’t working belongs to Thomas Loven’s custom card card-mod, which you will need to have installed.
You can still apply card-mod styling to the picture-elements card, but only for certain aspects of it. There’s an excellent guide from forum user Ildar_Gabdullin to mixing core CSS styling with card-mod CSS styling here.