bdg bdg - 7 months ago 14
HTML Question

Llinking a CSS file is not working

I'm having an issue with linking my style sheet to the

html
section of my website contained within a
.php
file.

I am unsure as to why some elements of the style sheet are not working, for example if I set the
body
's
background-color
to red it sets that, however if I create a
div.header
element within the CSS file and try and add it to the element in the html file as
<div id='header'>
, it does nothing.

What could be the reason for this? My CSS file and
.php
file are below.

courses.css
:

h1{
font:bolder;
}

h3{
font-color:red;
}

body{
background-color:white;
}

div.header{
position:fixed;
margin-top: 1ex;
margin-bottom: 1ex;
background-color: red;
}

div.Select_Course{
position:relative;
right:2ex;
top:4ex;
border:solid thin black;
padding: 5ex;
margin-bottom:3ex;
height:relative;
}


and my
.php
file

<meta charset="UTF-8">
<?php
$mysqli = new mysqli('localhost', 'user', 'password','dbname');
if ($mysqli->connect_errno)
{
die('Database connection failed');
}
//$m->set_charset('utf8');
$search_course = "
SELECT title, summary, id
FROM course
WHERE title LIKE '%".$_POST['searchBar']."%'";
$result = $mysqli->query($search_course) or die($mysqli->error);
$search_result = $result->fetch_assoc();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel='stylesheet' href='courses.css'>
<div id='header'>
<h1>Search Results</h1>
</div>
</head>
<body>

<?php while($search_result = $result->fetch_assoc()) { ?>
<div id='Select_Course'>
<form name="searchresults" method="post" action="selectedcourse.php">

<h3><?= $search_result['title'] ?> <input name="searchforcourse" type="submit" value="View Course" /></h3>
<input name="Coursenamesearch" type="text" value="<?= $search_result['title'] ?>" hidden/>
</form>
<p><?= $search_result['summary'] ?></p>
</div>
<?php } ?>

</body>
</html>

Answer

Instead of creating a div.header element in your CSS file, just create an element called .header. Then have your HTML like this: .

For example:

CSS file:

.header {
   background-color: #ffffff;
}

HTML file:

<div class="header"></div>