What we did

October 2022 : Shorthand Code.

This month we were a bit shorthanded. When I started learning CSS you wrote the code inside HTML. Then they separated CSS into its own code structure. At that time, I learned to write CSS “in full” but now we can write it in “shorthand”. So, this month we saw just how we can “shorten” our code. Why? One of the reasons is, it lessens the amount of code to up-load.

Here is the code.
border-width: 10px; border-style: solid; border-color: #FF0000;

This image has a 10PX border atop and bottom and a 5PX border left and right.

Here is the code.
border-top: 10px; border-right: 5px; border-bottom: 10px; border-left: 5px; border-style: solid; border-color: #FF0000;

Now the shorthand version would read
border-width: 10px 5px; border-style: solid; border-color: #FF0000;

Now lets write this in shorthand with a different size for each side.

Here is the code.
border-width: 20px 10px 5px 2.5px; border-style: solid; border-color: #FF0000;

Notice it reads clockwise, top, right, bottom, left.

We looked at two articles “The Beginner’s Guide to CSS Shorthand” and the MDN Document, “Shorthand properties”, along with this YouTube video on the subject.

I also found a blog arguing against shorthand.

Steve South
Web Design leader