I am EXTREMELY new to CSS and HTML (beginners course at uni) so I'm not sure if this is a super basic issue or not.
I'm using CODA 2 on a mac.
I have 5 HTML pages and a separate stylesheet.css.
In Coda preview the CSS works on the HTML pages. If I manually save the .css the HTML pages don't display any CSS. If I slightly edit anything on the .CSS the HTML pages refresh in preview and display the CSS again.
If I open my HTML pages in the browser (chrome/firefox) they are displayed without any css.
The correct links to the .CSS page are on all my HTML pages (under the title).
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
Any help would be MUCH appreciated as time is ticking away and I am completely lost.
Cheers
EDIT*
All the files are located within the same folder.
CSS code
`@charset "utf-8";
/* CSS Document */
header {
a:link color:white;
a:visited {color:white;
font-family: sans-serif;
background-color: #004292;
width: 640px;
}
header nav a {
color: white;
text-decoration: none;
font-family: sans-serif;
}
header > h1 > a {
color: white;
text-decoration: none;
font-family: fantasy;
font-size: large;
}
header nav a:hover {
background-color:white;
color: #004292;
border: 1px solid white;
}
body {
width: 1080px;
background-color: #004292;
padding-left: 0px;
border-bottom-left-radius: 0px;
}
nav > ul {
width 1080px;
}
nav > ul > li {
display: inline;
float: right;
}
nav > ul > li > a {
float: right;
padding: 0 15px;
transition: background-color 0.5s, border-color 1s;
}
.onion {
background-color: #004292;
font-family: sans-serif;
color: white;
float: left;
width: 640px;
margin-left: auto;
margin-right: right;
padding-top: 100px;
}
section {
background-color: #004292;
font-family: Arial, sans-serif;
color: white;
float: left;
width: 640px;
}
.lcol {
width: 100px;
float: left;
}
.lcol img {
width 200px;
}
.rcol {
width: 100px;
float: right;
}
.rcol img {
width 200px;
}
#wrap {
width: 640px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-family: Arial, sans-serif;
color: white;
float: left;
}
#beef img{
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg);
background-position: 0 0;
}
#beef img:hover {
background-position: 0 100%;
opacity: 0.1;
}
#wrap img:hover {
opacity: 0.1;
background-position: 0 0;
}
#wrap img {
margin: 10px;
border:2px solid white;
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg) bottom;
}
#yelp {
background-color: white;
color: white;
width: 1080px;
margin-top: 100px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
border-bottom-left-radius: 0px;
float: left
}
#yelp img {
margin-left: auto;
margin-right: auto;
}
footer {
width: 640px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
color: white;
background-color: #004292;
font-family: Arial, sans-serif;
clear: both;
display: block;
padding-top: 100px;
padding-left: 50px;
}
HTML for the index.html page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>GTM Canberra</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
</head>
<body>
<!-- Header -->
<header>
<div id="corn"
<h1><a href="index.html">GTM </a></h1>
<nav>
<!-- nav links -->
<ul>
<li><a href="about.html">About</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="info.html">Event Info</a></li>
<li><a href="getting_there.html">Getting There</a></li>
<li><a href="lineup.html">Lineup</a></li>
</ul>
</nav>
</div>
</header>
<!-- Logo/Image/PageID -->
<div id="yelp"
<section>
<img src="images/logo.jpg" alt="logo" width="647" height="358">
</section>
</div>
<!-- Content -->
<div id="wrap"
<section>
<div class="rcol">
<a id="beef">
<a href="lineup.html"><img src="images/steptones.jpg" alt="steptones" >
</a>
<a href="lineup.html"><img src="images/stone.jpg" alt="stone" >
</div>
<div class="lcol">
<a href="lineup.html"><img src="images/north.jpg" alt="north" >
<a href="lineup.html"><img src="images/kingswood.jpg" alt="kingswood" >
</div>
</section>
</div>
<!--Footer -->
<footer>
<p> Presented by Cattleyard Promotions and supported by triple j and Channel V </p>
</footer>
</body>
</html>
In new projects, it's better to start with as little code as you can in both the HTML and CSS files (and js files too) just to see that all files are linked together.
Edit:
a:visited {color:white