Most common CSS typos
Last week, Kevin Powell posted on Bluesky about the most common typo you make when writing CSS. I share my top two typos.
Aug 17, 20262 min read
ast week, Kevin Powell posted on Bluesky about the most common typo you make when writing CSS.
<header>
<figure class="avatar"><img loading="lazy" decoding="async" width="48" height="48" src="https://jeffbridgforth.com/wp-content/uploads/kevin-powell.jpg" class="attachment-full size-full" alt="" srcset="https://jeffbridgforth.com/wp-content/uploads/kevin-powell.jpg 1000w, https://jeffbridgforth.com/wp-content/uploads/kevin-powell-768x768.jpg 768w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></figure>
<div class="user-information">
<h2>Kevin Powell</h2>
<p><a class="atmosphere-mention" href="https://bsky.app/profile/kevinpowell.co">@kevinpowell.co</a></p>
</div>
<svg title="Blue Sky" xmlns="http://www.w3.org/2000/svg" height="32px" fill="#166CFB" viewBox="0 0 512 512">
<path d="M 362.6666666666667 286.6666666666667 Q 361.77777777777777 286.6666666666667 361.77777777777777 286.6666666666667 L 361.77777777777777 286.6666666666667 L 361.77777777777777 286.6666666666667 Q 357.3333333333333 285.77777777777777 353.77777777777777 284.8888888888889 Q 356.44444444444446 285.77777777777777 358.22222222222223 285.77777777777777 Q 360 285.77777777777777 362.6666666666667 286.6666666666667 L 362.6666666666667 286.6666666666667 Z M 256 226.22222222222223 Q 237.33333333333334 189.77777777777777 196.44444444444446 140 L 196.44444444444446 140 L 196.44444444444446 140 Q 156.44444444444446 89.33333333333333 111.11111111111111 55.55555555555556 Q 69.33333333333333 27.11111111111111 48.888888888888886 25.333333333333332 Q 29.333333333333332 22.666666666666668 19.555555555555557 29.77777777777778 Q 7.111111111111111 36 3.5555555555555554 50.22222222222222 Q 0 64.44444444444444 0 76 Q 0 85.77777777777777 2.6666666666666665 115.11111111111111 Q 4.444444444444445 144.44444444444446 7.111111111111111 173.77777777777777 Q 10.666666666666666 204 13.333333333333334 214.66666666666666 Q 27.555555555555557 258.22222222222223 66.66666666666667 275.1111111111111 Q 104.88888888888889 291.1111111111111 149.33333333333334 286.6666666666667 Q 152 285.77777777777777 154.66666666666666 285.77777777777777 Q 156.44444444444446 285.77777777777777 158.22222222222223 284.8888888888889 Q 153.77777777777777 285.77777777777777 149.33333333333334 286.6666666666667 Q 106.66666666666667 292 75.55555555555556 307.1111111111111 Q 44.44444444444444 322.22222222222223 42.666666666666664 352.44444444444446 Q 41.77777777777778 383.55555555555554 88.88888888888889 437.77777777777777 Q 142.22222222222223 489.3333333333333 175.11111111111111 477.77777777777777 Q 208 466.22222222222223 227.55555555555554 424.44444444444446 Q 246.22222222222223 383.55555555555554 256 346.22222222222223 Q 256 346.22222222222223 256 345.3333333333333 Q 258.6666666666667 353.3333333333333 261.3333333333333 363.1111111111111 Q 270.22222222222223 399.55555555555554 286.22222222222223 435.1111111111111 Q 303.1111111111111 469.77777777777777 334.22222222222223 476.8888888888889 Q 366.22222222222223 484 421.3333333333333 437.77777777777777 Q 464.8888888888889 391.55555555555554 464.8888888888889 360.44444444444446 Q 464 328.44444444444446 434.6666666666667 310.6666666666667 Q 405.3333333333333 292 362.6666666666667 286.6666666666667 Q 361.77777777777777 286.6666666666667 361.77777777777777 285.77777777777777 Q 357.3333333333333 285.77777777777777 353.77777777777777 284.8888888888889 Q 356.44444444444446 285.77777777777777 358.22222222222223 285.77777777777777 Q 360 285.77777777777777 362.6666666666667 286.6666666666667 Q 407.1111111111111 291.1111111111111 445.3333333333333 275.1111111111111 Q 484.44444444444446 258.22222222222223 498.6666666666667 214.66666666666666 Q 501.3333333333333 204 504.8888888888889 173.77777777777777 Q 507.55555555555554 144.44444444444446 509.3333333333333 115.11111111111111 Q 512 85.77777777777777 512 76 Q 512 64.44444444444444 508.44444444444446 50.22222222222222 Q 504.8888888888889 36 492.44444444444446 29.77777777777778 Q 483.55555555555554 23.555555555555557 463.1111111111111 25.333333333333332 Q 442.6666666666667 27.11111111111111 400.8888888888889 55.55555555555556 Q 355.55555555555554 89.33333333333333 315.55555555555554 140 Q 274.6666666666667 189.77777777777777 256 226.22222222222223 L 256 226.22222222222223 Z" />
</svg>
</header>
<div class="sm-content">
One of the questions I’m asking is the most common typo that you make when writing CSS, and several people have listed gray/grey… except, they both work so I’m confused ?
I have two very common ones. The first is with font-size:
.element {
font-szie: 1em;
}
I tend to get the “i” and the “z” in the wrong place. It is funny to me because it looks like a Hungarian word since Hungarian uses a “sz” combination for an English “s” sound. For examples, the city of Szeged.
Another common type I make is with CSS grid:
.element {
display: gird;
}
I have often been left scratching my head to why a grid layout is not applied. I have also made the same typo with grid-template-columns.
I am not alone in this typo. My friend Stu Robson makes the same mistake.
<header>
<figure class="avatar"><img loading="lazy" decoding="async" width="48" height="48" src="https://jeffbridgforth.com/wp-content/uploads/stu-robson.jpg" class="attachment-full size-full" alt="" srcset="https://jeffbridgforth.com/wp-content/uploads/stu-robson.jpg 1000w, https://jeffbridgforth.com/wp-content/uploads/stu-robson-768x768.jpg 768w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></figure>
<div class="user-information">
<h2>Stuart Robson</h2>
<p><a class="atmosphere-mention" href="https://bsky.app/profile/sturobson.com">@sturobson.com</a></p>
</div>
<svg title="Blue Sky" xmlns="http://www.w3.org/2000/svg" height="32px" fill="#166CFB" viewBox="0 0 512 512">
<path d="M 362.6666666666667 286.6666666666667 Q 361.77777777777777 286.6666666666667 361.77777777777777 286.6666666666667 L 361.77777777777777 286.6666666666667 L 361.77777777777777 286.6666666666667 Q 357.3333333333333 285.77777777777777 353.77777777777777 284.8888888888889 Q 356.44444444444446 285.77777777777777 358.22222222222223 285.77777777777777 Q 360 285.77777777777777 362.6666666666667 286.6666666666667 L 362.6666666666667 286.6666666666667 Z M 256 226.22222222222223 Q 237.33333333333334 189.77777777777777 196.44444444444446 140 L 196.44444444444446 140 L 196.44444444444446 140 Q 156.44444444444446 89.33333333333333 111.11111111111111 55.55555555555556 Q 69.33333333333333 27.11111111111111 48.888888888888886 25.333333333333332 Q 29.333333333333332 22.666666666666668 19.555555555555557 29.77777777777778 Q 7.111111111111111 36 3.5555555555555554 50.22222222222222 Q 0 64.44444444444444 0 76 Q 0 85.77777777777777 2.6666666666666665 115.11111111111111 Q 4.444444444444445 144.44444444444446 7.111111111111111 173.77777777777777 Q 10.666666666666666 204 13.333333333333334 214.66666666666666 Q 27.555555555555557 258.22222222222223 66.66666666666667 275.1111111111111 Q 104.88888888888889 291.1111111111111 149.33333333333334 286.6666666666667 Q 152 285.77777777777777 154.66666666666666 285.77777777777777 Q 156.44444444444446 285.77777777777777 158.22222222222223 284.8888888888889 Q 153.77777777777777 285.77777777777777 149.33333333333334 286.6666666666667 Q 106.66666666666667 292 75.55555555555556 307.1111111111111 Q 44.44444444444444 322.22222222222223 42.666666666666664 352.44444444444446 Q 41.77777777777778 383.55555555555554 88.88888888888889 437.77777777777777 Q 142.22222222222223 489.3333333333333 175.11111111111111 477.77777777777777 Q 208 466.22222222222223 227.55555555555554 424.44444444444446 Q 246.22222222222223 383.55555555555554 256 346.22222222222223 Q 256 346.22222222222223 256 345.3333333333333 Q 258.6666666666667 353.3333333333333 261.3333333333333 363.1111111111111 Q 270.22222222222223 399.55555555555554 286.22222222222223 435.1111111111111 Q 303.1111111111111 469.77777777777777 334.22222222222223 476.8888888888889 Q 366.22222222222223 484 421.3333333333333 437.77777777777777 Q 464.8888888888889 391.55555555555554 464.8888888888889 360.44444444444446 Q 464 328.44444444444446 434.6666666666667 310.6666666666667 Q 405.3333333333333 292 362.6666666666667 286.6666666666667 Q 361.77777777777777 286.6666666666667 361.77777777777777 285.77777777777777 Q 357.3333333333333 285.77777777777777 353.77777777777777 284.8888888888889 Q 356.44444444444446 285.77777777777777 358.22222222222223 285.77777777777777 Q 360 285.77777777777777 362.6666666666667 286.6666666666667 Q 407.1111111111111 291.1111111111111 445.3333333333333 275.1111111111111 Q 484.44444444444446 258.22222222222223 498.6666666666667 214.66666666666666 Q 501.3333333333333 204 504.8888888888889 173.77777777777777 Q 507.55555555555554 144.44444444444446 509.3333333333333 115.11111111111111 Q 512 85.77777777777777 512 76 Q 512 64.44444444444444 508.44444444444446 50.22222222222222 Q 504.8888888888889 36 492.44444444444446 29.77777777777778 Q 483.55555555555554 23.555555555555557 463.1111111111111 25.333333333333332 Q 442.6666666666667 27.11111111111111 400.8888888888889 55.55555555555556 Q 355.55555555555554 89.33333333333333 315.55555555555554 140 Q 274.6666666666667 189.77777777777777 256 226.22222222222223 L 256 226.22222222222223 Z" />
</svg>
</header>
<div class="sm-content">
display: gird;
I replied back to Stu:
<header>
<figure class="avatar"><img loading="lazy" decoding="async" width="48" height="48" src="https://jeffbridgforth.com/wp-content/uploads/jb-avatar.jpg" class="attachment-full size-full" alt="" /></figure>
<div class="user-information">
<h2>Jeff Bridgforth</h2>
<p><a class="atmosphere-mention" href="https://bsky.app/profile/jeffbridgforth.com">@jeffbridgforth.com</a></p>
</div>
<svg title="Blue Sky" xmlns="http://www.w3.org/2000/svg" height="32px" fill="#166CFB" viewBox="0 0 512 512">
<path d="M 362.6666666666667 286.6666666666667 Q 361.77777777777777 286.6666666666667 361.77777777777777 286.6666666666667 L 361.77777777777777 286.6666666666667 L 361.77777777777777 286.6666666666667 Q 357.3333333333333 285.77777777777777 353.77777777777777 284.8888888888889 Q 356.44444444444446 285.77777777777777 358.22222222222223 285.77777777777777 Q 360 285.77777777777777 362.6666666666667 286.6666666666667 L 362.6666666666667 286.6666666666667 Z M 256 226.22222222222223 Q 237.33333333333334 189.77777777777777 196.44444444444446 140 L 196.44444444444446 140 L 196.44444444444446 140 Q 156.44444444444446 89.33333333333333 111.11111111111111 55.55555555555556 Q 69.33333333333333 27.11111111111111 48.888888888888886 25.333333333333332 Q 29.333333333333332 22.666666666666668 19.555555555555557 29.77777777777778 Q 7.111111111111111 36 3.5555555555555554 50.22222222222222 Q 0 64.44444444444444 0 76 Q 0 85.77777777777777 2.6666666666666665 115.11111111111111 Q 4.444444444444445 144.44444444444446 7.111111111111111 173.77777777777777 Q 10.666666666666666 204 13.333333333333334 214.66666666666666 Q 27.555555555555557 258.22222222222223 66.66666666666667 275.1111111111111 Q 104.88888888888889 291.1111111111111 149.33333333333334 286.6666666666667 Q 152 285.77777777777777 154.66666666666666 285.77777777777777 Q 156.44444444444446 285.77777777777777 158.22222222222223 284.8888888888889 Q 153.77777777777777 285.77777777777777 149.33333333333334 286.6666666666667 Q 106.66666666666667 292 75.55555555555556 307.1111111111111 Q 44.44444444444444 322.22222222222223 42.666666666666664 352.44444444444446 Q 41.77777777777778 383.55555555555554 88.88888888888889 437.77777777777777 Q 142.22222222222223 489.3333333333333 175.11111111111111 477.77777777777777 Q 208 466.22222222222223 227.55555555555554 424.44444444444446 Q 246.22222222222223 383.55555555555554 256 346.22222222222223 Q 256 346.22222222222223 256 345.3333333333333 Q 258.6666666666667 353.3333333333333 261.3333333333333 363.1111111111111 Q 270.22222222222223 399.55555555555554 286.22222222222223 435.1111111111111 Q 303.1111111111111 469.77777777777777 334.22222222222223 476.8888888888889 Q 366.22222222222223 484 421.3333333333333 437.77777777777777 Q 464.8888888888889 391.55555555555554 464.8888888888889 360.44444444444446 Q 464 328.44444444444446 434.6666666666667 310.6666666666667 Q 405.3333333333333 292 362.6666666666667 286.6666666666667 Q 361.77777777777777 286.6666666666667 361.77777777777777 285.77777777777777 Q 357.3333333333333 285.77777777777777 353.77777777777777 284.8888888888889 Q 356.44444444444446 285.77777777777777 358.22222222222223 285.77777777777777 Q 360 285.77777777777777 362.6666666666667 286.6666666666667 Q 407.1111111111111 291.1111111111111 445.3333333333333 275.1111111111111 Q 484.44444444444446 258.22222222222223 498.6666666666667 214.66666666666666 Q 501.3333333333333 204 504.8888888888889 173.77777777777777 Q 507.55555555555554 144.44444444444446 509.3333333333333 115.11111111111111 Q 512 85.77777777777777 512 76 Q 512 64.44444444444444 508.44444444444446 50.22222222222222 Q 504.8888888888889 36 492.44444444444446 29.77777777777778 Q 483.55555555555554 23.555555555555557 463.1111111111111 25.333333333333332 Q 442.6666666666667 27.11111111111111 400.8888888888889 55.55555555555556 Q 355.55555555555554 89.33333333333333 315.55555555555554 140 Q 274.6666666666667 189.77777777777777 256 226.22222222222223 L 256 226.22222222222223 Z" />
</svg>
</header>
<div class="sm-content">
Been there, done that.
I am sure there are other typos I make but those two are my most common.
Did you enjoy this article?
Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.