Hi everyone, I'm a beginner learning html. I am trying to use an external css style sheet and I'm not sure why my external style sheet is not working(It's not bolding or italizing,etc when I view it in my mozilla firefox browser. Any suggestions? here is my html code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Fish Creek Animal Hospital</title>
<meta charset="utf-8">
</head>
<link href="fishcreek.css"rel="stylesheet">
<body>
<h1>Fish Creek Animal Hospital</h1>

<div class="nav">
     <p><a href="index.html">Home</a>&nbsp;&nbsp;
     <a href="services.html">Services</a>&nbsp;&nbsp;
     <a href="askvet.html">Ask the Vet</a>&nbsp;&nbsp;
     <a href="contact.html">Contact</a></p>
</div>
<dt class="category">
Full Service Facility</dt>
<p><blockquote>Veterinarians and staff are on duty 24 hours a day, 7 days a week.</blockquote></p>
<dt><strong>Years of Experience</strong></dt>
<p><blockquote>Fish Creek Veterinarians have provided quality, dependable care for your beloved animals since 1984.</blockquote></p>
<dt><strong>Open Door Policy</strong></dt>
<p><blockquote>Our professionals welcome owners to stay with their pets during any medical procedure.</blockquote></p>
<p><div>1-800-555-5555<br>
     1242 Grassy Lane<br>
     Fish Creek, WI 55534
</p></div>
<div id="footer">Copyright &copy; 2013 Fish Creek Animal Hospital<br>
               Angela@Angela.com
</div>
</body>
</html>

This is my external .css

body {background-color:#6699ff;
      color:#d5e3ff;
      font-family:Veranda, Arial, sans-serif;}
h1 {background-color:#6699ff;
      color:#003366;
      font-family:serif font;
      line-height:200%;}
nav { font-weight: bold; }
category {font-weight:bold;
        background-color:#6699ff;
        color:#003366;
        font-size:1.1em;}
footer{font-size:.70em;
       font-style:italic;}

Recommended Answers

All 6 Replies

try adding: type="text/css" within your link to the external css file. So the final link should look like
<link href="fishcreek.css" rel="stylesheet" type="text/css">. Also make sure the CSS file is in the same folder.

The problem here is actually that you are not using your selectors correctly..

for a class, you have to prefix the class name in your CSS with a period (.), and for IDs, prefix with a hash (#) symbol.

For example..

h1 {}
.nav {}
#footer {}

The type attribute is optional. The browser will assume text/css in this case.

Thanks for all your reponses :). JorgeM you had the solution I was looking for, thanks a million!

another thing, my dt class category css
is not working right, what did I do wrong here?

It doesn't look like you are using dt elements correctly. They go within dl elements.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Fish Creek Animal Hospital</title>
<meta charset="utf-8">

<!--******-->

!!here is the correct link tag syntax!!
you r only missing the type="text/css"
and the forward slash before the closing /> tag!!!!! and it goes inside the <head> </head>tags!!!!!!!

<!--<link href="fishcreek.css"rel="stylesheet" type="text/css"/>!-->

<!--*******-->

</head>



<body>
<h1>Fish Creek Animal Hospital</h1>
<div class="nav">
<p><a href="index.html">Home</a>&nbsp;&nbsp;
<a href="services.html">Services</a>&nbsp;&nbsp;
<a href="askvet.html">Ask the Vet</a>&nbsp;&nbsp;
<a href="contact.html">Contact</a></p>
</div>
<dt class="category">
Full Service Facility</dt>
<p><blockquote>Veterinarians and staff are on duty 24 hours a day, 7 days a week.</blockquote></p>
<dt><strong>Years of Experience</strong></dt>
<p><blockquote>Fish Creek Veterinarians have provided quality, dependable care for your beloved animals since 1984.</blockquote></p>
<dt><strong>Open Door Policy</strong></dt>
<p><blockquote>Our professionals welcome owners to stay with their pets during any medical procedure.</blockquote></p>
<p><div>1-800-555-5555<br>
1242 Grassy Lane<br>
Fish Creek, WI 55534
</p></div>
<div id="footer">Copyright &copy; 2013 Fish Creek Animal Hospital<br>
Angela@Angela.com
</div>
</body>
</html>
commented: Don't you think that its a little pointless to reply a year after the op has 'thankyou very much' and disappeared -3
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.