Attaching a CSS style sheet to a new HTML doc.

[Maxclev]

I'm a recent newcomer to BBEdit and am having trouble getting my
external.css style sheet attached to the main HTML document. Could
someone tell me what the correct <link> syntax is
to accomplish that?


Thanks,


Maxclev

[Kendall Conrad]

You can reference the file in a relative or absolute manner.

Relative is the file path based on where the HTML file is located. The
below code assumes you have a folder named css in the same folder as
the HTML file that's referencing the CSS file.
<link rel="stylesheet" href="css/style.css" />

Absolute is based on the root of the web site. The below assumes you
have a folder named css at the top level of your site.
<link rel="stylesheet" href="/css/style.css" />

If you're testing locally (without a local web server) then the
absolute won't work locally, but will once uploaded. Relative will
work in both instances, but can be more maintenance down the road if
you start moving folders/files around.

-Kendall

[Webmaster]

Would you mean this?:

<link rel="stylesheet" type="text/css" href="YourPathHere.css">

--
............................................................................
EPN Website : http://www.endtimeprophecy.net
EPN Blog : http://www.endtimeprophecy.net/Blog/
EPN RSS Feed : http://www.endtimeprophecy.net/EPN-RSS-Feed.xml
Top Christian Sites : http://www.topchristiansites.org
Armageddon BBS : http://www.endtimeprophecy.net/ArmageddonBBS/
Facebook : http://www.facebook.com/profile.php?id=100001989026091
Tumblr : http://endtime-prophecy-net.tumblr.com
Twitter : http://twitter.com/WordWeaver777
............................................................................

[RobS]

On Mar 12, 9:19 pm, Kendall Conrad <angelw...@gmail.com> wrote:
> Absolute is based on the root of the web site. The below assumes you
> have a folder named css at the top level of your site.
> <link rel="stylesheet" href="/css/style.css" />

That would only be true if there was just one "layer" in the site. The
OP may need to reference it absolutely as
<link rel="stylesheet" href="../../css/style.css" />, or even
<link rel="stylesheet" href="../../../css/style.css" />, depending on
how deep the folders go. (I manage a large complex site which uses
just this method. It's easy to maintain.)

Rob

[Alan Austin]

Thanks so much, appreciate it.

Alan

--
You received this message because you are subscribed to the
"BBEdit Talk" discussion group on Google Groups.
To post to this group, send email to bbe...@googlegroups.com
To unsubscribe from this group, send email to
bbedit+un...@googlegroups.com
For more options, visit this group at
<http://groups.google.com/group/bbedit?hl=en>
If you have a feature request or would like to report a problem,
please email "sup...@barebones.com" rather than posting to the group.
Follow @bbedit on Twitter: <http://www.twitter.com/bbedit>

[Robert Huttinger]

then there are different stylesheets for different reasons:

for all browsers
<link rel="stylesheet" href="style_all.css" media="screen" />
ex: div.info { background: transparent url('badkitty.png') no-repeat 0 0; }

for printing the pages
<link rel="stylesheet" href="style_all.css" media="print" />
ex: div.info { background-color: transparent; }

for mobile
<link rel="stylesheet" href="style_all.css" media="handheld" />
ex: div.info { background: transparent url('badkitty.png') no-repeat 0 0; display:block; width:320px;}

All 3 can be declared on the same page.

You can go further by having the css be an actual php page:
<?php
header("Content-type: text/css");
// connect to database to get style prefs
echo <<<STYLES
body {
background-color: {$row['bgColor']};
color: {$row['fontColor']};
font-family: {$row['fontFamily']};
}
STYLES;
// close db connection
?>

you can then mask the fact it is a PHP page by using .htaccess to redirect requests to directory 'css'

RewriteEngine On
RewriteRule css/(.*)\.(css) /css/$1.php

now any request coming in looking for style.css will actually get style.php which is a dynamic CSS stylesheet

whew.. ok there is a lot there in a short space, and I omitting a lot for the sake of time and space, but there are some ideas for you to work with!

cheers.bo

[Kendall Conrad]

The examples you give are relative paths, not absolute. Absolute path
is define as, "The complete path to a resource, independent of the
location of the visited page." (src: http://webmaster.multimania.co.uk/glossary/)

[RobS]

Absolutely! I was confused by the relative looseness of English. Relative to a file in a particular folder, the paths I gave would be absolutely correct while actually being relative paths as defined in the regs.

I suppose the only absolutely absolute path would be the full URL of the css file which, as I understand it, would not be a good thing to do for something as oft requested as a css file.

Rob

[Charlie Garrison]

Good morning,

On 14/03/11 at 5:37 AM -0700, RobS <rstev...@accesscable.net> wrote:

>I suppose the only absolutely absolute path would be the full
>URL of the css file which, as I understand it, would not be a
>good thing to do for something as oft requested as a css file.

I haven't been following this thread, so I'm not sure what the
understanding about "not be a good thing to do" comes from.
There are three common methods of specifying a URL within an
HTML page (whether that in <head> links or <body> anchors, or elsewhere).

Three examples are:

mysite.css (or ./mysite.css)
/mysite.css
http://mysite.com/mysite.css

The first two are relative URLs, the second commonly referred to
root-relative URL. The third is absolute. All three are fine to
use, but each should be used as appropriate.

For simple HTML pages, the first two are probably 'best' to use,
and the second would be appropriate in most cases.

The first is most useful for sections of a site which might get
moved; eg a blog which might get moved from root of the site to
a /blog directory. If the blog refers to (eg) blog.css, then
using a root-relative link will be fine as /blog.css when the
blog exists at the root of the site. When the blog gets moved
then that link will break. If the link was specified as
relative, ./blog.css then it will continue to work when the blog
is moved to /blog, with one condition. The blog doesn't contain
any pages in sub-directories. Eg. the link would break when used
from /blog/admin.

In that case root-relative links are better, eg. the link
/blog/blog.css would work from any page on the site.

Since many sites use some sort of dynamic content with a theme
(eg. many php sites) the root-relative links are best since it
doesn't matter where the theme is used in the site, the links
will still work.

The absolute URL links are needed when referring to content on a
different site (or using http vs https, etc). As a general rule;
don't use absolute URLs, except when it's obvious they are needed.

So...

If you're content may later get moved to different location
within the site, use relative URLs.
If you're site is theme-driven dynamic content, use
root-relative URLs.
If you're site refers to content from another site, use absolute URLs.

It's fine to mix & match the different types as needed. All of
them are fine to use, the browser will always resolve the URLs
to absolute before making any HTTP requests, and modern browsers
will always check their local cache before making a request.

I hope that makes sense and helps you understand which style to
use; I'm still on my first cuppa so apologies if I rambled on a
bit. :-)

Charlie

--
Ꮚ Charlie Garrison ♊ <garr...@zeta.org.au>

O< ascii ribbon campaign - stop html mail - www.asciiribbon.org
〠 http://www.ietf.org/rfc/rfc1855.txt

[Alan Austin]

Thanks so much