Problem linking CSS

HTML & CSS
1

Hi everyone,
I’m extremely new to web design. I have managed to create my first web site using just HTML. I’m now in the process of attaching external CSS. I have a good understanding of both HTML and CSS codes.
The problem is trying to attach the CSS. I am trying to use a link, but have also tried to import. Whatever I do all I end up with is plain HTML. I have tried samples from various textbooks and samples from websites. I have checked all the codes and they’re fine. Even the most simple codes won’t show any change to the HTML.
Please, please help! I’ve been trying to get this right for hours. Could it be something as simple as not saving the files properly.
Look forward to any responses.
Maria

2

I assume you have a file called: *.css and not *.txt basically you use a LINK element referencing your CSS file for example: <link rel=“stylesheet” href=“myfile.css” type=“text/css”> between your <head>…</head> section.

In the example below we have a XHTML file and a CSS file called: pink.css

Example XHTML File called: demo.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>
        A Sample Page
      </title>
  [B]<link rel="stylesheet" href="pink.css" type="text/css" />[/B]
    </head>
    <body>
      <h1>
        Hello Llama!
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Praesent volutpat feugiat lacus, in posuere est hendrerit
        sit amet. Cum sociis natoque penatibus et magnis dis
        parturient montes, nascetur ridiculus mus.
      </p>
    </body>
  </html>

Example CSS file called: pink.css


body {
  background-color: #FFBBFF;
}
h1 {
 color: red;
}

It should then apply the CSS from the pink.css file like was mentioned make sure the files are in the appropriate or same directory. Try the above code samples if you want making sure to call the CSS file; [FONT=Courier New]pink.css

[/FONT]Are you using something like Windows and notepad to make the files?

3

Hi Stevie,
I’m writing them in TextEdit and saving both my html and css files to my desktop and then using firefox to view them. The html looks fine, but css doesn’t have any effect?

4

No problem, it sounds like a program setting in TextEdit that you might have to alter for saving as text CSS files. At least you can use notepad until you figure out when went wrong - glad it helped.

5

Hi, thanks for all the advice!
I have managed to get the css to ‘work’ on my laptop using notepad, but I am still yet to get it working on my mac, using TextEdit. At least I can get started on applying some css code.
Thanks for all your help! It’s a great forum

6

Hi, thanks for the quick responses…
This is the <link> element I’m using:
<link rel=“stylesheet” type=“text/css” href=“myproject.css” />
(I have even tried it without the “/” at the end, as read somewhere this could be the problem, didn’t help!)

I place it in the head section below my title.

I save my CSS file as myproject.css in the same document. I have opened a new document, which only has the html and css files in it. Still don’t know why it isn’t working, but I’ve just sat down for Round5!!!
Thanks again,
Maria

7

Hi Thomas,
Thanks for more help… I tried using ./ in the ‘href’, but still the css isn’t doing anything!
It should be pretty simple, just been watching some tutorials and followed them saving both files to my desktop and opening with firefox and still can’t get the css.
I’m going to keep at it… can’t wait to see how some css will look! Thanks

8

Hi Maria,

A bit of a long shot but try putting “./” before pink.css in the link, as shown below.

<link rel=“stylesheet” href=“./pink.css” type=“text/css” />

9

Hi Robert, I tried pink.css.
As with everything I’ve tried the html is perfect, but there is no evidence of the css… Driving me mad!

10

Hi,

When you say link I take it you mean the <link> tag in the HTML? Could you post us the code you are using to link to the stylesheet?

Can you tell us where the files are stored (in the same directory or in separate ones) and if this is on your computer on on a web server?

11

Are you running these files off your computer or off a website? Are both the HTML and CSS files definitely in the same folder?

12

Are you 100% sure your extension ends in *.css because sometimes programs can hide the real extension.

If you open the *.css file itself via Firefox e.g File> Open File; it should say pink.css at the end of the address bar when loaded.

Try saving this code as a XHTML file and call it: test2.htm (do not edit it just copy-and-paste) when you save it to your desktop and view/open it in Firefox do you see the CSS changing the colours?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          A Sample Page
        </title>
   <style type="text/css">
  <!-- 
  body {
    background-color: #FFBBFF;
  }
  h1 {
   color: red;
  } 
  -->
  </style>
      </head>
      <body>
        <h1>
          Hello Llama!
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Praesent volutpat feugiat lacus, in posuere est hendrerit
          sit amet. Cum sociis natoque penatibus et magnis dis
          parturient montes, nascetur ridiculus mus.
        </p>
      </body>
    </html>

I can only assume your file names or paths are wrong if the extensions are correct.

13

I’m going to try the pink.css and see if I have any success.
I have tried using notepad on my laptop and I’m now experimenting with TextEdit on my Mac.
Maria