Trouble using separate css files

Question

So I originally created my webpage all in one php file, and all the css styling worked as intended. However, now that I've gone ahead to try to split up the code by putting all the css in its own file, my php page is does not include any of the styling from the css page. I'm sure i've made a simple error, but I can't seem to figure out what I've done wrong. The the link to my folder is Computer --> MWebsite --> Login --> login_template.php and css folder ( --> design.css ).

Here's the top of the php page...

login_template.php

<html>
<head>
<title>CarPals</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="design.css">
</head>
<body>

and here's the top of the css page just to show how I have it laid out...

design.css

h1 {text-align: center; color: #bdd0d9 }
a {color: #f75d59; text-decoration: underline; }
yy2 {color: #808080; font-family: "Comic Sans MS", cursive, sans-serif; font-size:12px;}
yy3 {color: #6D9BC6; font-size: 30px; font-family: "palatino linotype", Book Antiqua, Palatino, serif;  font-weight:bold;}
body {width:100%; background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #4D4D4D))}
.dotted {margin:-7px; border: 1px dotted #808080; border-style: none none solid; color: #000; background-color: #F2F2F2; }   
#outline {background:#696969; position: absolute; top: 0px; margin: -10px; width:1287; height:80px;}
#outline-text {position:absolute; top:-12px; left:200px; width:300px;}  
#break {height:15px} 
#break2 {height:10px} 
#break3 {height:15px} 
#frm {
        background: #6e6e6e;
        margin:auto;
        top:320px; left:857px; width:243px; height:230px;
        position:absolute;
        font-family: "Comic Sans MS", cursive, sans-serif; font-size: 7px; font-style: italic;
        line-height: 24px;
        font-weight: bold;
        color: #C0C0C0;
        text-decoration: none;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding:10px;
        border: 1px solid #999;
        border: inset 1px solid #333;
        box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.7);
    }

this may be just a simple issue of an omitted "/" in the path to the style sheet. — Nomad101
– Nomad101, Commented Apr 28, 2013 at 22:42
the <link> tag should have to have a closing tag, like <link></link>, if not just add / in the end like <link rel="stylesheet" href="css/design.css" /> — user2277872
– user2277872, Commented Apr 28, 2013 at 22:42
I've tried it with and without the "/" but it doesn't affect the outcome. — user2228503
– user2228503, Commented Apr 28, 2013 at 22:52

Turnerj · Accepted Answer · 2013-04-28 23:12:35Z

2

It looks to me that you are just missing the type attribute for the link tag. Try with type="text/css" and see how that goes.

Also, you may want to add the media attribute as well which will help define what type of media this CSS document is for. Here is some information regarding the media attribute

EDIT

Here how Stack Overflow's CSS is included (exact HTML at time of edit):

<link rel="stylesheet" type="text/css" href="http://cdn.sstatic.net/stackoverflow/all.css?v=0f0c93534e2b">

EDIT

Further checks that would be worthwhile include doing CSS Validation and if fixing any issues with that doesn't solve your problem, it may be actually accessing the CSS file.

Check that the page you visit in the browser is relative to your CSS document. If the page you are physically accessing in the URL (ie. http://youwebsitehere.com/youPage.php) is not relative to the CSS (as your CSS href is relative - "css/design.css") so you would want to be able to access your CSS via http://youwebsitehere.com/css/design.css

edited Apr 28, 2013 at 23:12

answered Apr 28, 2013 at 22:44

Turnerj

4,3085 gold badges39 silver badges54 bronze badges

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

12 Comments

nickhar Over a year ago

The type attribute isn't mandatory, it's optional. See: stackoverflow.com/questions/6372260/…

cygorx Over a year ago

type is not required as of html5 (w3.org/html/wg/drafts/html/master/…)

Turnerj Over a year ago

Type might not be required for HTML5 however he doesn't have the HTML5 doctype for the document. Thanks for pointing it out though for HTML5, I myself did not know that.

cygorx Over a year ago

he doesn't have a DOCTYPE whatsoever; html5 is implemented by default

Turnerj Over a year ago

Pretty sure HTML5 is not implemented by default. Based on this answer, it seems that it uses an almost quirks mode.

|

user571545 · Accepted Answer · 2013-04-28 22:48:22Z

1

In the style for the body tag you're missing a closing parentheses at the end of the line, that might make the rest of the code invalid. right after color-stop, the inner nested parentheses.

answered Apr 28, 2013 at 22:48

user571545

5 Comments

Turnerj Over a year ago

Good pick up with that. As the declaration is on the one line, that definitely might affect all the other styles in the document, making it look like it is not working.

user2228503 Over a year ago

Can you elaborate on where I'm missing the parentheses... I can't seem to find it.

user2228503 Over a year ago

Oh I see what you're talking about. That was definitely an error on my end, but after fixing it, it still did not affect the main problem.

user571545 Over a year ago

One the line where the body styles are declared in the CSS, at the very end on the right

user2228503 Over a year ago

yah I fixed that, but I'm still having the same problem

Collectives™ on Stack Overflow

Trouble using separate css files

2 Answers 2

12 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related