Keith Keith - 2 months ago 7
CSS Question

html won't link to external style sheet on local system

example html (which is really a template for django on an aws server), is below, then the css. I have a github repo that I'm using to shuttle files back/forth from my local machine to the aws machine, so this is happening locally. I initially tried with the css file in ../css/limbo.css (relative to the html), but then moved the css to the same folder as the html to see if I was having directory path problems. the a href is a link to it in the original location, which does work, btw.

name.html:

<!DOCTYPE html>
<html>
<head>
<style>
<link rel="stylesheet" type="text/css" href="limbo.css">

</style>
</head>
<body>

<div class=top> <h1>This is a heading</h1> </div>
<div class=left> <h3>Left Side</h3> </div>

<div class=main>
<p>This is a paragraph.</p><br>
<a href="../css/Limbo.css">css</a>
<form action="/polls/name-test.html" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="OK">
</form>
<br><p class=red>This is a second paragraph</p>
</div>
</body>
</html>


limbo.css:

/*
Theme Name: Limbo browser
Theme URI:
Description:
for CS419 - Oregon State University
Fall 2016

Version: 1.0
Author: Keith McKinley, John Watts, Marta Wegner
Author URI:
*/

/* reset styles */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
vertical-align: baseline; background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

form {color: yellow;}

body {
font-size: 62.5%;
text-align: center;
color: #000000;
}
.bold {
font-weight: strong;
}

/* container - place inside each section or around the entire page depending on your layout */
.container {
width: 960px;
margin: 0 auto;
text-align: left;
position: relative;
}

/* for clearing any floats <br class=&quot;clearfloat&quot; /> */
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

.top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
}
.main {
padding-top: 23px;
}
.left {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 10%;
height: 100%;
border: right;
padding-top: 10em;
}


At first, I was thinking it was a django problem, but I don't even have django locally (win8.1 surface, fwiw), so this is just a chrome 53.0.2785.143 browser.

Most interestingly, if I copy the entire contents of limbo.css and put it in the style block of the html header, it works as expected. I'm just doing stupid things to make sure it's all working as expected, then will build the site.

https://jsfiddle.net/bwrkcey6/ will probably work, maybe it'll help.

Answer

Your link tag should not be inside a style tag.

Corrected HTML with style tag removed:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="limbo.css">
</head>
<body>

<div class=top> <h1>This is a heading</h1> </div>
<div class=left> <h3>Left Side</h3> </div>

<div class=main> 
    <p>This is a paragraph.</p><br>
    <a href="../css/Limbo.css">css</a>
    <form action="/polls/name-test.html" method="post">
        {% csrf_token %}
        {{ form }}
        <input type="submit" value="OK">
    </form>
    <br><p class=red>This is a second paragraph</p>
</div>
</body>
</html>