Looking for feedback please. Does it make a difference in file size if HTML/CSS etc is "bunched" together or spaced out so easy to ready visually?

**How I like to see code: **
<style>
img {
display:block;
width: 100%;
height:auto;
border:none;
}

h1 {
font-family: Gotham, Arial, sans-serif;
font-size:24px;
font-weight:bold;
margin: 10px 0;
}
h3 {
font-family:Arial, sans-serif;
font-size:19px;
font-weight:bold;
margin: 25px 0 10px 0;
}
p{
font-family:Arial, sans-serif;
font-size:16px;
line-height: 120%;
margin: 10px 0;
}
</style>

how a colleague codes:
<style>
@media screen and (max-width:350px){.btn{max-width:260px!important}.btn a{max-width:226px!important}}table{border:0!important;border-spacing:0!important;border-collapse:collapse!important}.fill-image{width:100%;height:auto;object-fit:cover}u~div .animated-welcome{display:none!important}u~div .gif-welcome{display:block!important}@media (yahoo){#food-is-life-mobile img{max-width:200px!important}#footer table{min-width:650px}}@media only screen and (max-width:504px){h1{font-size:1.5em}.molecule h1{font-size:1.15em;padding:0;margin:.5em 0}.deviceWidth{width:280px!important;padding:0}.block-text,.image-block,.three-column{padding-left:5px;padding-right:5px;margin:auto!important}.molecule img.fill-image{width:100%;height:auto;object-fit:cover;margin:auto}#food-is-life img{display:none}#food-is-life-mobile{display:block!important;margin-top:2em;width:100%;text-align:center}#food-is-life-mobile img{display:block!important;height:100px!important;margin:auto!important}