Jump to content
user4592357

style not applied?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

Are you sure you don't have styling similar to

dl dt { color: black; font-weight: normal;}

/*OR*/
.description dt { color: black; font-weight: normal;}

Both of these will have higher precedence, wherever placed.

Share this post


Link to post
Share on other sites

this is what i have in css file:

li:not(:last-child) {
	margin-bottom: 55px;
}

dt {
	color: red;
	font-weight: bold
}

when i remove the <li> rule, <dt> rule works.

Edited by user4592357

Share this post


Link to post
Share on other sites

None of those should cause any problems at all? the <br> within dl element is not allowed, only within the dt, dd elements.

1) what editor are you using? if notepad, make sure you save as UTF-8 encoded, and make sure your files are saved as test.html and not test.html.txt or style.css.txt. If your O/S hide extensions, all you will see is test.html, but really its test.html.txt

2) Make sure you use a localhost server, and not just from opening the file from O/S file system folder into a browser.

3) Make sure you clear history or cache after each change, try Ctrl F5.

4) Make sure you end each property with semi-colon ';'

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×