Having trouble getting CSS to link to Zengarden XHTML page
 

For my mat 125 class we are to take this html code; http://www.csszengarden.com/zengarden-sample.html

& create our own css page to make it our own design.

the zen garden project; http://www.csszengarden.com/

is where designers all use the same html code, with the text & everything, but they make their own css files,to make their page unique.

We are to do this in our class, I am to take this same html code, make my own theme, & customize it with my own css, like the designers in the zen garden project. We are not to change the code at all, I guess except for linking to our own css file.

I am having trouble getting my own css page to link up with the html code, so when I try to add my own background color or font, I cannot see the changes when I preview the html code to see what I have done.

so unless I can get past this part, I cant progress with my project/assignent.

i tried having my css called project1.css

I then went into the xtmhl code/page I got from this sight, & according to one of the digital downloads of books I got from here, I inserted this line of code into the html from the css zen garden site to link to my own css;

<link href="project1" rel="stylesheet" type="text/css" />

but when I tried to preview my html file in my html editor, I cant see any of my changes.

I added this line just below the title in between the head section of the html.

I have tried to attach my files, so it could be seen what I am doing , but this did not work, it said invalid code.

one can see the html we are working with from the css zen garden site, since I cannot upload my own files.

I feel a bit lost already, it seems I hit hurdle after hurdle with this web coding. i have to have this project done by nov 14 2011.

Don't forget the ".css" in the filename.
And then with a non-absolute href, you'll need the CSS to be in the same folder as the HTML.

You must zip the files before you can attach. The ability to upload HTML would be a security risk.

what is non absolute href? apologies if I sound a little slow, I am still struggling a bit with this class & trying to learn the best I can, I hope there will be plenty of patience as I will probably be asking more questions about html & CSS.

Absolute = protocol + FQDN (fully qualified domain name) + directories (optional) + file name.

Protocol = http:// (hxxp:// has been used in examples below, to prevent auto-linking URLs)
FQDN = www.digitalFAQ.com (for example)
directories = /images/ (for example)
file name = butterflies.jpg

"Non-absolute" = relative, as in relative to your current location.
At my home, the "next door neighbor" is John (left) and Bob (right). If I went to Bob's house, "next door neighbor" is different.

hxxp://www.digitalFAQ.com/images/butterflies.jpg = absolute. It always pulls the image from that location.

Now consider this scenario...

hxxp://www.digitalFAQ.com/reviews/page1.html
hxxp://www.digitalFAQ.com/images/page2.html
hxxp://www.digitalFAQ.com/guides/page3.html

Three pages that are in different folders. Note that one is in "images".

If I href'd "butterflies.jpg" instead of "http://www.digitalFAQ.com/images/butterflies.jpg" then only page2.html would show the image, as it's in the same folder. In order for the image to show in the other pages, I'd have to either (1) make copies of butterflies.jpg in the other folders, which is not a good idea, or (2) fix the path to absolute, so that any page can load it, or (3) create relative paths.

The only drawback of absolute is that it requires DNS calls, even when developing a site offline. (Although it should be noted that you can setup a local DNS to the computer.) A "DNS call" means that digitalFAQ.com must be a website that the computer can connect to, using a nameserver (local or remote, it doesn't matter). If the computer cannot reach digitalFAQ.com, then it cannot load that absolute path image.

A proper relative path would look like this: <a href="../images/butterflies.jpg">
The ".." (two periods, side by side) means "go back one folder".

If hxxp://www.digitalFAQ.com/guides/folder1/page3.html was the page, then it would be <a href="../../images/butterflies.jpg">
If hxxp://www.digitalFAQ.com/guides/folder1/folder2/page3.html was the page, then it would be <a href="../../../images/butterflies.jpg">

But that makes the code somewhat "spaghetti", too. So absolutes are a favorite of developers, with only minor use of relative coding. Most developers use a mix of absolute and relative, and base decisions with forward thinking on what may or may not change in the future.

Does that clear it up?

While I have mentioned the path for a .jpg image, the same applies to .css files.

Also, the stylesheet file must be named ".css" in order for the server to acknowledge the MIME type and load a file. It must be "stylesheet-filename.css" and not just "stylesheet-filename". That's not valid a MIME (technically having no MIME) for loading a CSS document in a browser. "MIME" is a technical way to say the computer understands what the file is supposed to be, what kind of data it contains.

So ..... did this solve your issue? :confused:

Yes, it did, just after I wrote my question, I figured out what happened, I had left the .css extension off.

thanks for the breakdown of absolute & relative.