On Fri, 10 Oct 2003 01:33:55 +1000,
lorelei@ozconnect.net.au wrote:
[color=blue]
> <link rel="stylesheet" type="text/css" href="filename.css"> does this
> mean there are other types of... well, types?[/color]
Yup. This is the MIME type, telling the browser what kind of file to
expect from the server. If you've ever messed around with what program
opens what types of files in Windows (setting Winamp to open .wav files,
for example) you've dealt with MIME types.
Possible types are "text/html", "image/png", "image/gif", "video/mpeg",
"text/css", and "audio/basic", among others.
[color=blue]
> I'm also assuming the LINK REL is telling the computer to expect/read
> the file as a stylesheet.[/color]
REL is an attribute of LINK (and less commonly A). It states the
relationship of the linked object to the page you're on (forward, back,
stylesheet, etc.). The full explanation would be pretty long; visit
http://www.w3.org/TR/html401/types.html#type-links if you're interested in
details.
[color=blue]
> The other thing I'm wondering is exactly how a stylesheet should be laid
> out when being written.[/color]
There are rules, and then there are conventions. Conventions are things
like capitalizing HTML elements like BODY and P, making classes and ids
lowercase (.class or #id), and putting excessive whitespace, tabs, or
newlines in to make it more readable. That sort of stuff is optional.
A basic sheet like you described should run something like:
BODY { background-color: #ffffff; /* or #fff, or white */
color: #000000;
font-family: sans-serif;
}
..BOX { position: relative;
height: 10em; /* units in em, px, or % */
width: 30em;
border: 1px solid #0000ff;
margin: 0 1em 0 1em; /* or define margin-left, -right, etc. */
background-image: url(path);
}
Do _not_ forget those semicolons between properties -- very common
mistake. Just to clarify fully, comments are put /* between these markers
*/ and are ignored totally; handy when you want to do a quick subtraction
from the code to test something.
The page it fits into would be, in brief:
<HTML>
<HEAD><TITLE>Inside the box</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css"></HEAD>
<BODY>
<DIV class="BOX">This goes in the box, with or without P tags.</DIV>
</BODY>
</HTML>
Personally, I'd try plunking your styles between <STYLE> tags in the
webpage itself to make sure whether the stuff works before putting it in
an external file. It's easier to edit when it's right up there in the
HEAD portion, and you don't run into the occasional problem with servers
not having the correct settings to serve up stylesheets.
If you feel up to posting your sample code, either here or in an obscure
corner of a server that you can link to, we can look it over and tell you
more specifically what might be wrong. Or check out
http://jigsaw.w3.org/css-validator/ , which allows you to run your code by
a machine (guaranteed not to snicker).
Alison
-----------
http://www.painters-wing.com