CSS Shorthand vs Longhand Properties Explained with Simple Examples

Hardik DesaiJan 17, 20263 min read

Learn CSS shorthand and longhand properties with simple examples. This guide helps frontend developers understand how shorthand works, when to use longhand, and best practices for writing clean and maintainable CSS.

🎨 1. Background

Shorthand

css

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

Longhand

css

.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

css

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

Longhand

css

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

✍️ 3. Text Decoration

Shorthand

css

a {
  text-decoration: underline dotted red;
}

Longhand

css

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

📦 4. Margin

Shorthand

css

.card {
  margin: 10px 20px;
}

Longhand

css

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

📦 5. Padding

Shorthand

css

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

Longhand

css

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

🧱 6. Border

Shorthand

css

.button {
  border: 2px solid black;
}

Longhand

css

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

🧱 7. Border Radius

Shorthand

css

.avatar {
  border-radius: 50%;
}

Longhand

css

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

📏 8. Outline

Shorthand

css

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

Longhand

css

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

📐 9. Inset

Shorthand

css

.modal {
  inset: 0;
}

Longhand

css

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

🎞️ 10. Animation

Shorthand

css

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

Longhand

css

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

🎥 11. Transition

Shorthand

css

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

Longhand

css

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

🧩 12. Flex

Shorthand

css

.item {
  flex: 1;
}

Longhand

css

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

📐 13. Flex Flow

Shorthand

css

.container {
  flex-flow: row wrap;
}

Longhand

css

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

🧮 14. Grid

Shorthand

css

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

Longhand

css

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

🧮 15. Grid Area

Shorthand

css

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

Longhand

css

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

📄 16. List Style

Shorthand

css

ul {
  list-style: square inside;
}

Longhand

css

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

📐 17. Columns

Shorthand

css

.article {
  columns: 3 200px;
}

Longhand

css

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

🧭 18. Place Items

Shorthand

css

.container {
  place-items: center;
}

Longhand

css

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

🧭 19. Place Content

Shorthand

css

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

Longhand

css

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

🧭 20. Place Self

Shorthand

css

.item {
  place-self: end;
}

Longhand

css

.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.

← Writing index

CSS Shorthand vs Longhand Properties Explained with Simple Examples

Hardik DesaiJan 17, 20263 min read

🎨 1. Background

Shorthand

css

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

Longhand

css

.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

css

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

Longhand

css

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

✍️ 3. Text Decoration

Shorthand

css

a {
  text-decoration: underline dotted red;
}

Longhand

css

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

📦 4. Margin

Shorthand

css

.card {
  margin: 10px 20px;
}

Longhand

css

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

📦 5. Padding

Shorthand

css

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

Longhand

css

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

🧱 6. Border

Shorthand

css

.button {
  border: 2px solid black;
}

Longhand

css

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

🧱 7. Border Radius

Shorthand

css

.avatar {
  border-radius: 50%;
}

Longhand

css

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

📏 8. Outline

Shorthand

css

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

Longhand

css

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

📐 9. Inset

Shorthand

css

.modal {
  inset: 0;
}

Longhand

css

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

🎞️ 10. Animation

Shorthand

css

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

Longhand

css

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

🎥 11. Transition

Shorthand

css

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

Longhand

css

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

🧩 12. Flex

Shorthand

css

.item {
  flex: 1;
}

Longhand

css

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

📐 13. Flex Flow

Shorthand

css

.container {
  flex-flow: row wrap;
}

Longhand

css

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

🧮 14. Grid

Shorthand

css

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

Longhand

css

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

🧮 15. Grid Area

Shorthand

css

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

Longhand

css

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

📄 16. List Style

Shorthand

css

ul {
  list-style: square inside;
}

Longhand

css

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

📐 17. Columns

Shorthand

css

.article {
  columns: 3 200px;
}

Longhand

css

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

🧭 18. Place Items

Shorthand

css

.container {
  place-items: center;
}

Longhand

css

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

🧭 19. Place Content

Shorthand

css

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

Longhand

css

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

🧭 20. Place Self

Shorthand

css

.item {
  place-self: end;
}

Longhand

css

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

Final Thoughts

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.

← Writing index

CSS Shorthand vs Longhand Properties Explained with Simple Examples

Hardik DesaiJan 17, 20263 min read

🎨 1. Background

Shorthand

css

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

Longhand

css

.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

css

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

Longhand

css

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

✍️ 3. Text Decoration

Shorthand

css

a {
  text-decoration: underline dotted red;
}

Longhand

css

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

📦 4. Margin

Shorthand

css

.card {
  margin: 10px 20px;
}

Longhand

css

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

📦 5. Padding

Shorthand

css

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

Longhand

css

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

🧱 6. Border

Shorthand

css

.button {
  border: 2px solid black;
}

Longhand

css

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

🧱 7. Border Radius

Shorthand

css

.avatar {
  border-radius: 50%;
}

Longhand

css

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

📏 8. Outline

Shorthand

css

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

Longhand

css

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

📐 9. Inset

Shorthand

css

.modal {
  inset: 0;
}

Longhand

css

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

🎞️ 10. Animation

Shorthand

css

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

Longhand

css

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

🎥 11. Transition

Shorthand

css

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

Longhand

css

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

🧩 12. Flex

Shorthand

css

.item {
  flex: 1;
}

Longhand

css

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

📐 13. Flex Flow

Shorthand

css

.container {
  flex-flow: row wrap;
}

Longhand

css

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

🧮 14. Grid

Shorthand

css

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

Longhand

css

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

🧮 15. Grid Area

Shorthand

css

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

Longhand

css

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

📄 16. List Style

Shorthand

css

ul {
  list-style: square inside;
}

Longhand

css

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

📐 17. Columns

Shorthand

css

.article {
  columns: 3 200px;
}

Longhand

css

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

🧭 18. Place Items

Shorthand

css

.container {
  place-items: center;
}

Longhand

css

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

🧭 19. Place Content

Shorthand

css

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

Longhand

css

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

🧭 20. Place Self

Shorthand

css

.item {
  place-self: end;
}

Longhand

css

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

Final Thoughts

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.