• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Problems with CSS external style sheets.

D

Dixter

Amateur Web Developer
Joined
Mar 31, 2009
Messages
660
Reaction score
11
Hello, I'm having a few problems with CSS external style sheets. They seem to simply not work. When I write an internal style sheet in the <style></style> tags everything works fine. However for an external file sheet it's as if the document isn't reading them.

Here's my index.php:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scorpia</title>
<link rel="stylesheet" type="text/css" href="thestyle.css"/>
<style type="text/css">
body 
{
background-color:PowderBlue;
} 
</style>

<script type="text/javascript">
function show_alert() 
{
alert("Why do people always press the button they are told not to push?");
}
</script>
</head>

<body>
<h1 class="a">HELLO WORLD!</h1>
<br />
<ul class="a">
<li class="a">
<a class="a"href="http://www.w3schools.com/html/default.asp">HTML</a></li>
<li class="a"><a class="a"href="http://www.w3schools.com/css/default.asp">CSS</a></li>
<li class="a"><a class="a"href="http://www.w3schools.com/js/default.asp">JavaScript</a></li>
<li class="a"><a class="a"href="http://www.w3schools.com/xml/default.asp">XML</a></li>
</ul>
<input type="button" onclick="show_alert()" value="Do NOT press this button!" />
</body>
</html>

And here's my external style sheet, TEST.css:

Code: 
div.a
{
background-color:LightGreen;
outline-style:solid;
outline-color:LightBlue;
outline-width:3px;
}

ul.a
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li.a
{
float:left;
}


a.a:link,a.a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

a.a:hover,a.a:active
{
background-color:#7A991A;
}

h1.a
{
text-align:center;
}

Please help. I'll give you rep.
 
Last edited:
Sort by date Sort by votes
HAHA, I simply forgot to change the name of the style sheet. Wow I'm stupid :P Thanks though xD


EDIT:
What is the "./" before the "TEST.css"? I never added that before does that do something? Maybe because I never added that before is why I've had these sorts of problems in the past.
 
Upvote 0 Downvote
Dixter said:
HAHA, I simply forgot to change the name of the style sheet. Wow I'm stupid :P Thanks though xD


EDIT:
What is the "./" before the "TEST.css"? I never added that before does that do something? Maybe because I never added that before is why I've had these sorts of problems in the past.
Click to expand...

It means current directory, for example ../ would take file from upper directory etc.
 
Upvote 0 Downvote
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scorpia</title>
<link rel="stylesheet" type="text/css" href="thestyle.css"/>
<style type="text/css">
body 
{
background-color:PowderBlue;
} 
</style>

<script type="text/javascript">
function show_alert() 
{
alert("Why do people always press the button they are told not to push?");
}
</script>
</head>

<body>
<h1 class="a">HELLO WORLD!</h1>
<br />
<div id="navi">
<ul class="a">
<li class="a">
<a class="a"href="http://www.w3schools.com/html/default.asp">HTML</a></li>
<li class="a"><a class="a"href="http://www.w3schools.com/css/default.asp">CSS</a></li>
<li class="a"><a class="a"href="http://www.w3schools.com/js/default.asp">JavaScript</a></li>
<li class="a"><a class="a"href="http://www.w3schools.com/xml/default.asp">XML</a></li>
</ul>
</div>
<input type="button" onclick="show_alert()" value="Do NOT press this button!" />
</body>
</html>
Code: 
div.a
{
background-color:LightGreen;
outline-style:solid;
outline-color:LightBlue;
outline-width:3px;
}

ul.a
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li.a
{
float:left;
}


a.a:link,a.a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

a.a:hover,a.a:active
{
background-color:#7A991A;
}

h1.a
{
text-align:center;
}
#navi
{
 margin-left: auto;
 margin-right: auto;
}
 
Upvote 0 Downvote
Back
Top