Identifying the essential flaws in the widely-used CSS coding format

One of the most perplexing things about cascading style sheets (CSS) is that style sheets are anything but stylish in their markup structure and often even less so in their syntax. It's complex as hell for newcomers because like the English language itself, it's neither intuitive nor consistently sane in its semantics. When you think vertical padding actually refers to the vertical padding, along comes some Einstein of epic proportions to let you know that it actually defines horizontal padding; worse, its percentages aren't relative to the element that you're addressing but the parent element instead.

As you read this, remember that the "ph" in "elephant" is pronounced like an "f", and the "e" at the end of "insane" is as quiet as the "g" in "sign". "Food" and "good" aren't pronounced the same way despite their construction either. See where I'm going with this? CSS is a little too much like our own bitter phonetic.

To make fortune of an unfortunate truth, there's at least one kind soul on the Internet who decided that it was time to lay out a few of the most common unintuitive rules behind spread sheet markup language and help the hopeless bloomers in the vein of web design find their footing. The author goes on to discuss the rules and exceptions to margin overlapping, opacity-based interactions with z-index modifications, custom properties, vertical alignments, height definition woes and more.

The article eventually addresses more than just unduly complicated aspects of CSS; it also lights the way for a few unique, lesser-known or more advanced techniques for achieving desirable effects both simple and complex. Viewers are advised to combine HTML with CSS to achieve hybrid effects that are more difficult or not possible with either language alone. As you move further down the list, the advice expands into more complex or lesser-utilized features that may not interest you as much, but it's still worth mentioning some of the weirdness that goes on underneath the presentable front side of the pages that you create.