separate css file does not work on html file but put css in the same file as the html works

Question

So I am reading a book called <<teach yourself CSS and HTML in 24 hours>>, when it comes to CSS the book asks readers to edit a style sheet in a separate .css file and put a link in the html file to link to the .css file. I did it but it does not work.

Then I watched a video clip on youtube that says I can simply add a <style> tag in my html file to make css work and i succeed.

The problem is I want to do this in the way that the book taught me because I think that will make my file easier to read for my own sake.

here is my code for html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
  <head><title>Hello</title></head>
  <link rel="stylesheet" type="text/css" href="mycss.css" />
  <body>
    <p>Hi my name is chris</p>
  </body>
</html>

here is my code for mycss.css:

p {
  color:green;
  font-family:arial;
}

however if i write it in this way, it works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
  <head><title>Hello</title></head>
  <style type="text/css">
    p {color:green; font-family:arial;}
  </style>
  <body>
    <p>Hi my name is chris</p>
  </body>
</html>

Is mycss.css in the same directory as the html file calling it? It will need to be in the same directory or you will need to provide the proper path in your <link... to find the file. — beeker
– beeker, Commented Jun 24, 2016 at 3:24
Hi beeker, thanks for your reply. yes, i did put them in the same directory. — gjjhhh_
– gjjhhh_, Commented Jun 24, 2016 at 3:26

beeker · Accepted Answer · 2016-06-24 03:34:17Z

3

Try this... Make sure the link to the style sheet is in the head section of the html document:

<html>
  <head>
  <title>Hello</title>
  <link rel="stylesheet" type="text/css" href="mycss.css" />
  </head>
  <body>
    <p>Hi my name is chris</p>
  </body>
</html>

answered Jun 24, 2016 at 3:34

beeker

8108 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

frnt · Accepted Answer · 2016-06-24 03:40:08Z

1

Place your external css link before </head> as below,

<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>

answered Jun 24, 2016 at 3:40

frnt

8,9232 gold badges27 silver badges28 bronze badges

Comments

Mohammad S. Alam · Accepted Answer · 2016-06-24 03:50:20Z

1

It is recommended to include the stylesheet or the css file in the head section of the document.

<head>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>

answered Jun 24, 2016 at 3:50

Mohammad S. Alam

1285 bronze badges

Collectives™ on Stack Overflow

separate css file does not work on html file but put css in the same file as the html works

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related