Dont use spans or code for shortcuts and keystrokes @KevinPowell
Dont use spans or code for shortcuts and keystrokes  @KevinPowell
Uploaded February 2025 | Updated September 2026, 2 weeks ago
Check out the HTML & CSS Tip of the Week: https://html-css-tip-of-the-week.netlify.app/

πŸ”— Links
βœ… The code from this video: codepen.io/kevinpowell/pen/qEBWJYN
βœ… Relative colors: youtu.be/gPacarD9NuA
βœ… MDN on kdb (includes samp examples too): developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
βœ… :has() support table: caniuse.com/css-has
βœ… HTML & CSS tip of the week: https://html-css-tip-of-the-week.netlify.app/

πŸŽ“ kevinpowell.co/courses

⌚ Timestamps
00:00 - Introduction
01:15 - the kbd element
03:00 - nested kbd elements
05:05 - html and css tip of the week
06:30 - the samp element
08:00 - using samp and kbd together
10:30 - styling them up depending on how they are nested
10:45 - kbd inside of samp

#css

--

Come hang out with other dev's in my Discord Community
πŸ’¬ discord.gg/nTYCvrK

Keep up to date with everything I'm up to
βœ‰ kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
πŸ“Ί twitch.tv/kevinpowellcss

---

Help support my channel
πŸ‘¨β€πŸŽ“ Get a course: kevinpowell.co/courses
πŸ‘• Buy a shirt: teespring.com/stores/making-the-internet-awesome
πŸ“½οΈ Join as a channel member: youtube.com/@KevinPowell/join
πŸ’– Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join

---

My editor: VS Code - code.visualstudio.com

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Dont use spans or code for shortcuts and keystrokesAre we over-engineering with modern CSS?Style selected text using ::selectionGoodbye magic numbersMy best CSS tips from 2024A couple of great anchor positioning use casesWeve been using container queries wrongAI KILLS 75% OF JOBS AT TAILWINDlinear() is so goodScroll state queries are on the way! (and a bunch more)HTML & CSS for Absolute Beginners: Whats next?Neat container query unit trick
Kevin Powell |

Don't use spans or code for shortcuts and keystrokes

SHARE TO X SHARE TO REDDIT SHARE TO FACEBOOK WALLPAPER