View Full Version : External CSS Problems Nothing Ever Works

06-15-2012, 12:17 AM
I have always had issues with using an external stylesheet and made a test webpage trying to get it to work and of course it doesn't. Please take a look at the code below it is very short and please tell me what is wrong with it. Thanks.

The files structure is as follows.


Here is the css stylesheet code.

body {background-image:url('images/backgrounds/blackDiamond.jpg');font-family:orbitron;size:medium;font-color:0xFFD800;text-align:left;}
h1 {font-size:large;font-family:orbitron;font-color:0x0000FF;text-align:center;}
p {font-size:medium;font-family:orbitron;font-color:0xFF0000;text-align:left;}

Here is the testHome.html code.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="testStyle.css" />

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<h1>The Heading</h1>
<p>The above heading should be using Orbitron font family, large size font, blue in color, and centered. This is a paragraph which should be in medium sized Orbitron font family, red font color, and aligned to the left.There should also be a background image on this test page.</p>

06-15-2012, 01:50 AM
You can't use a fonts that are non-standard, without loading them first:
@font-face { font-family: orbitron; src: url('URL to the font-file'); }
and you are using some wrong properties and values too.
The property for text color is color:, - nor font-color:
And though 0x indicated Hex, toy need to use # instead:

color: #FF0000;
and you have a typo in body {}
size: should be font-size:

06-22-2012, 09:53 AM
Thank You!