comment 0

Accidentally Overriding CSS Properties

I bet this is a common problem to novice CSS coders, when you accidentally override CSS properties by using shorthand properties. When I just started doing CSS, I stumbled upon this problem that I thought was a “bug” with many different CSS properties like padding, font and especially background. Here is a simple code example to show how this can happen:

	.container {
		padding:25px;  /* this shorthand CSS property will override all padding properties above and set all padding directions to 25px */

To prevent this from happening, you can use shorthand the CSS property first, followed by any specific CSS properties you want. For example:

	.container {

Hit the button below to see more examples at CSS Tricks.

View More

Filed under: CSS

About the Author

Posted by

Sani Halid is a front-end developer at Stampede and is committed to clean and elegant code. Yet another gamer to join the pack, Sani is also the Editor at Constructs where he shares his daily CSS findings and other front-end development goods.

Leave a Reply