CSS Shorthand vs Longhand Properties (With Simple Examples)

🎨 1. Background

Shorthand

.box {
  background: red url(bg.png) center/cover no-repeat fixed;
}

Longhand

.box {
  background-color: red;
  background-image: url(bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

🖋️ 2. Font

Shorthand

.text {
  font: italic bold 16px/1.5 Arial, sans-serif;
}

Longhand

.text {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

✍️ 3. Text Decoration

Shorthand

a {
  text-decoration: underline dotted red;
}

Longhand

a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: red;
}

📦 4. Margin

Shorthand

.card {
  margin: 10px 20px;
}

Longhand

.card {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

📦 5. Padding

Shorthand

.box {
  padding: 10px 15px 20px;
}

Longhand

.box {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 15px;
}

🧱 6. Border

Shorthand

.button {
  border: 2px solid black;
}

Longhand

.button {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

🧱 7. Border Radius

Shorthand

.avatar {
  border-radius: 50%;
}

Longhand

.avatar {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

📏 8. Outline

Shorthand

input:focus {
  outline: 2px dashed blue;
}

Longhand

input:focus {
  outline-width: 2px;
  outline-style: dashed;
  outline-color: blue;
}

📐 9. Inset

Shorthand

.modal {
  inset: 0;
}

Longhand

.modal {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

🎞️ 10. Animation

Shorthand

.loader {
  animation: spin 1s linear infinite;
}

Longhand

.loader {
  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

🎥 11. Transition

Shorthand

.button {
  transition: all 0.3s ease-in-out;
}

Longhand

.button {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

🧩 12. Flex

Shorthand

.item {
  flex: 1;
}

Longhand

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

📐 13. Flex Flow

Shorthand

.container {
  flex-flow: row wrap;
}

Longhand

.container {
  flex-direction: row;
  flex-wrap: wrap;
}

🧮 14. Grid

Shorthand

.grid {
  grid: auto-flow / 1fr 1fr;
}

Longhand

.grid {
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
}

🧮 15. Grid Area

Shorthand

.item {
  grid-area: 1 / 2 / 3 / 4;
}

Longhand

.item {
  grid-row-start: 1;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 4;
}

📄 16. List Style

Shorthand

ul {
  list-style: square inside;
}

Longhand

ul {
  list-style-type: square;
  list-style-position: inside;
}

📐 17. Columns

Shorthand

.article {
  columns: 3 200px;
}

Longhand

.article {
  column-count: 3;
  column-width: 200px;
}

🧭 18. Place Items

Shorthand

.container {
  place-items: center;
}

Longhand

.container {
  align-items: center;
  justify-items: center;
}

🧭 19. Place Content

Shorthand

.container {
  place-content: space-between center;
}

Longhand

.container {
  align-content: space-between;
  justify-content: center;
}

🧭 20. Place Self

Shorthand

.item {
  place-self: end;
}

Longhand

.item {
  align-self: end;
  justify-self: end;
}

Final Thoughts

Shorthand CSS makes your code shorter and faster to write, but longhand CSS gives you better control. Once you understand how shorthand properties work behind the scenes, it becomes easier to choose the right one for each situation. Practicing both approaches will help you write CSS that is simple, clear, and easy to maintain.

If you enjoyed this post or have any feedback, feel free to connect with me:

💼 LinkedIn — Let’s network and share ideas!
👨‍💻 GitHub — Check out more of my projects and code examples.