CODEWITHSUNDEEP
htmlcssfile
user2228503
user2228503

Reputation: 77

Trouble using separate css files

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);
    }

Upvotes: 1

Views: 173

Answers (2)

Turnerj
Turnerj

Reputation: 4278

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

Upvotes: 2

user571545
user571545

Reputation:

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.

Upvotes: 1

Related Questions