<!DOCTYPE html>
<html>
<head>
<style>
.newstyling kbd { background-color: #f3f4f6;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
border: 1px solid lightgray;
}
.alternativestyling kbd { border-radius: 0.25rem;
background-color: black;
color: white;
padding: 0.15rem 0.4rem;
}
</style>
</head>
<body>
<h1>kbd element Styling Examples</h1>
<h2>Default Styling</h2>
<p>Press <kbd>Ctrl</kbd> + <kbd>q</kbd> to quit</p>
<h2>New Styling</h2>
<p class="newstyling">Press <kbd>Ctrl</kbd> + <kbd>q</kbd> to quit</p>
<h2>Alternative Styling</h2>
<p class="alternativestyling">
Press <kbd>Ctrl</kbd> + <kbd>q</kbd> to quit
</p>
</body>
</html>