What's the difference between 2 css codes?

i was provided with 2 different versions for the wordpress theme's section. What's better? What's the difference between them?
1st one adds, mobile resizing, which 2nd doesn't, but why is the 2nd one so long?

1.

section quote{padding:0;font-size:25px;}
@media only screen and (max-width: 768px){
  section quote {font-size: 15px;}
   
}

Code (CSS):

2.

section quote {
padding: 10px 0 !important;
font-size: 26px !important;
}
.notopmargin cite {
display: none !important

Code (CSS):

 

They have completely different looks, they're both horrible, and the second example is just not minified

 

why are they horrible? What would be an alternative? It's meant to make a box and the text inside smaller.

also, the end result of both is the same...

 

They're bad because they use metric fonts (px) to assign font-size. That is a "bad idea". If they look the same, that's because you have other rules in play - the second one has a different padding than the first one, and also a difference in font-size - hence they shouldn't look the same. As for the second rule in the second code, I've no idea what that does, except that it sets something to display: none;
For some reason the second set also have !important thrown in, for no good reason at all (!important should be avoided, because if you need it, you have other problems with your CSS).
Of the two, I would definitely use the first one, but then I wouldn't use either.

 

First off, CSS without the HTML it applies to is gibberish; sadly you said it's turdpress so the HTML is probably gibberish all by itself before dumping CSS on it like shellac on a pile.

Second, well, let's break these down...

As mentioned, PX metric fonts are inaccessible trash, that shouldn't even be done in the first place and likely means the rest of your theme/template/what have you is inaccessible rubbish. Oh wait, you already said that when you mentioned it was turdpress.

section quote{padding:0;font-size:25px;}

Code (markup):

This would target any quote tags inside section tags on the page. Sadly there is NO SUCH THING AS A QUOTE TAG so this shouldn't even work, unless it's a XHTML document where someone has added their own DTD to piss on accessibility and semantics by adding their own made-up fantasy-land tags. OF course the SECTION tag is pointless bloated HTML 5-tardery so that seems unlikely unless someone's playing fast and loose with the rules and just slapping things together any-old-way and to hell with the rules.

@media only screen and (max-width: 768px){
  section quote {font-size: 15px;}
}

Code (markup):

This targets the same thing with a smaller font, but only when the media is type "screen" (which should have been determined BEFORE the stylesheet is even loaded making that part redundant) and only when the screen is narrower than 768 pixels wide. Pixel metrics for break-points are like fixed width layouts, if you are using EM metric fonts like a good little doobie, for the most part it's just asking for the layout to break... but since it's crapping on the page with px metric fonts on what is likely a major content section, you'd want to use the same measurement.

section quote {
padding: 10px 0 !important;
font-size: 26px !important;
}

Code (markup):

As before this targets the fictional/nonexistant "quote" tag (should that be Q or BLOCKQUOTE, those are ACTUAL tags) when it's inside the pointless code bloat redundancy known as SECTION. This adds padding and a similar font-size in that same broken PX measurement. The !important part means that it will override ALL other rules in the stylesheet that don't say !important -- in all but the rarest of usage scenarios if you have to use !important, you've probably done something horrifyingly and terrifyingly WRONG in your CSS. Usually the only reason to use !important is inside a media query where the selector is acting up, or client-side user.css where you are trying on your own browser to override crappy theme and style choices on a website you want to use, but it so poorly and ineptly designed you can't without overriding their code with your own. (see how I use these DigitalPoint's forums, which I have to override both scripting and CSS to even try and use)

.notopmargin cite {
display: none !important

Code (markup):

This would hide the citation when/if it's inside an element with the class "notopmargin" -- since "no top margin" is presenatational, that means presentational classes are being used so the site developer has NO ***** CLUE what the HELL they were doing and completely missed the ENTIRE reason to use CSS with HTML in the first place -- and to be frank should probably go back to writing HTML 3.2 and slapping 4 tranny on it for the worst of pre-1998 coding practices. OF course, that it uses HTML 5's redundant "structural" tags like SECTION and then makes up it's own fictional tag "QUOTE" already said that a dozen times over.

It's sad when just one small snippet of CSS is enough to make me think your entire site needs to be pitched in the trash and started over from scratch; though as I think I already mentioned that's turdpress in a nutshell. Designed to dupe ignorant fools who likely have no business maintaining a website into thinking they can.