i have this html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Commands</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Commands Documentation</h1>
</header>
<section>
<div class="all-commands">
<div class="command" id="open">
<h2>command1</h2>
<dl class="description">
<dt>Syntax:</dt>
<dd>the syntax of the command
<i>param1</i> param2
</dd>
<br>
<dt>Description:</dt>
<dd></dd>
<dt>Arguments:</dt>
<dd></dd>
<dt>Returns:</dt>
<dd></dd>
<dt>Example:</dt>
<dd></dd>
</dl>
</div>
and this is styles.css:
dt {
color: red;
font-weight: bold
}
the css isn't applied to <dt> elements, any idea why?