Re: Mixing css with html

Consider exactly how CSS works. The server sends down an HTML page which contains, among other things, a reference to a stylesheet (in the form of another URL). The user’s browser now makes a separate HTTP request for that CSS file if it does not already have a copy in its cache.

While it is certainly possible for your (Perl) application to serve a copy of the CSS-file, since it is a static file it is much more common practice to simply arrange for Apache to serve up the contents of the file directly.

Or both... Consider the slightly-unusual technique used by Perlmonks itself, which you can easily see by examining the source code of, say, the page you are looking at right now. When I did this, I saw the following two lines:

<link rel="stylesheet" href="/css/common.css" type="text/css" /> <link rel="stylesheet" href="?node_id=204962" type="text/css" /> [download]

The PerlMonks web-server is giving your browser two places from which it (your browser...) should now retrieve CSS information. The first is probably a reference to a static directory, defined by a <directory> directive somewhere deep inside httpd.conf in such a way that Apache will simply deliver the content of an existing file as-is. But the second is obviously a request that will be served by the Perl executable that runs the site. There’s a node out there (everything in PerlMonks is a numbered node), and it is node #204962, and it contains CSS. (If you are so inclined, you can type either of these URLs (properly prefixed by the website URL in your case) into the address-bar of your web browser, and look at what they contain. That’s exactly what your browser did do, and a copy is sitting in your browser’s local cache right now.) Your browser doesn’t care: it sent a URL, Apache did the right thing, and somebody-or-other somehow-or-other sent back a file.

Replies are listed 'Best First'.
Re^2: Mixing css with html by ww (Archbishop) on Apr 18, 2011 at 03:34 UTC
While most of what you've written is fairly close to accurate, you'd make a better case if you omitted weasel-words like "probably," "somewhere," and "obviously" and if your explanation of the interactions among server, site and browser were clearer... and supported by the readily available specifics: The source to which you refer OP is: `<!-- Theme 1092: Web safe blue PerlMonks Theme --> <link rel="stylesheet" href="/css/common.css" type="text/css" /> <link rel="stylesheet" href="?node_id=204962" type="text/css" />` [download] The first can be seen at `http://www.perlmonks.com/css/common.css` (NB: if perlmonks.com is not your server, substitute perlmonks.org). The second is available at `http://www.perlmonks.com/index.pl?node_id=204962`. But consider: how is all of this verbose reply¹ really more helpful (at any immediate level) to OP than a simple statement of fact: Browsers get css from the server by reading a particular URL supplied in the .html. And that's only a marginally useful expansion of moritz' original reply. ¹ Yep, this is excessively wordy, too!	[reply] [d/l] [select]

Replies are listed 'Best First'.

Re^2: Mixing css with html
by ww (Archbishop) on Apr 18, 2011 at 03:34 UTC

you've

The source to which you refer OP is:

<!-- Theme 1092: Web safe blue PerlMonks Theme    -->
    <link rel="stylesheet" href="/css/common.css" type="text/css" />
    <link rel="stylesheet" href="?node_id=204962" type="text/css" />
[download]

The first can be seen at http://www.perlmonks.com/css/common.css (NB: if perlmonks.com is not your server, substitute perlmonks.org). The second is available at http://www.perlmonks.com/index.pl?node_id=204962.

But consider: how is all of this verbose reply¹ really more helpful (at any immediate level) to OP than a simple statement of fact:

Browsers get css from the server by reading a particular URL supplied in the .html.

And that's only a marginally useful expansion of moritz' original reply.

¹ Yep, this is excessively wordy, too!

[reply]
[d/l]
[select]