Trying to learn from source of existing site

Hi All,
A newbie here, working on his first site…am trying to use the source code of a site I like, to learn and design but am unable to see how the HTML and the CSS for the page work together…i saved the CSS in a local file and used href to include it in the HTML but the page is rendered without any styling in the browser when i preview…can someone tell me how i need to look at this properly - the site is www.coffeecup.com? (i’ve included the sample original code and my changes below)…

Original code:
<!DOCTYPE html>
<html dir=“ltr” lang=“en”>
<head>

<link rel=“stylesheet” href=“/min/?b=stylesheets&f=master.css,homepage.css,colorbox.css,actionModal.css” type=“text/css” media=“screen”>

My changes:
<!DOCTYPE html>
<html dir=“ltr” lang=“en”>
<head>

<link rel=“stylesheet” href=“C:\Website\styles.css” type=“text/css” media=“screen”>

Appreciate any replies,
Max.

Hi maxdp73. Welcome to the forums. :slight_smile:

<link rel=“stylesheet” href=“C:\Website\styles.css” type=“text/css” media=“screen”>

The first question is: where is the page that’s calling these styles located? If it’s not in the “Website” folder, then that will be a problem.

I’m not familar with Windows file paths, either, so I can’t tell if that’s a valid path or not. What does the path to your page file look like? Is that path above actually what you see in your browser address bar for the CSS file?

[FONT=Verdana]I would just use a relative file path there - it’s easier (in my opinion ;)).

So if your CSS file is in the same folder as your HTML file, all you would need is:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

[/FONT]

Thanks for ur quick replies, ralph and technobear…i tried the relative path method and its worked!..am not sure why the absolute didn’t :(…

That normally doesn’t work on desktop, as that’s probably not the real absolute path. You can only really use absolute paths on your desktop if you are using a local server environment like XAMMP. (Well worth checking out, because you can set your site up with the same absolute paths on your desktop as online, meaning you don’t have to change anything when you upload. You can also run PHP etc.)

Have downloaded XAMMP, Ralph, will work on it from now on…thnx for the tip…

You’re welcome. :slight_smile: I haven’t used XAMPP because I’m on a Mac, which uses MAMP instead. But another handy thing to know about to make the experience even better is to learn how to set up “virtual hosts”, so that your URLs can be exactly the same in XAMPP and online. Here is a post that may help:

http://sawmac.com/xampp/virtualhosts/

(I just Googled this, as there’s an equivalent resource for MAMP.)