Anonymous Monk has asked for the wisdom of the Perl Monks concerning the following question:

Hi, i am very much a beginner with perl, and new to these forums, hoping someone can help me out with a little problem i am having... I am trying to incorporate a CSS file with my program
open WEBPAGE, ">g:/programming/perlbackups/results_webpage.htm"; print WEBPAGE "<html><head><title>Results</title> "; print WEBPAGE "<link href='g:/programming/perlbackups/human_vision.css +' rel='stylesheet' type='text/css' /></head><body>";
usually i find these simple solutions through google but i'm having no such luck...

my current program asks the user to complete a simple quiz, their results are then saved to a txt file, which i then have printing into a html document, i wanna be able to modify how the html document appears.

Thanks

Replies are listed 'Best First'.
Re: Mixing css with html
by moritz (Cardinal) on Apr 14, 2011 at 22:12 UTC
Re: Mixing css with html
by MidLifeXis (Monsignor) on Apr 15, 2011 at 13:07 UTC

    In addition to those items mentioned above, watch the quotes on your attributes. I believe that they are supposed to be double quotes, not single quotes. Also, I would probably make the css link relative (<link href="human_vision.css"...>).

    --MidLifeXis

Re: Mixing css with html
by locked_user sundialsvc4 (Abbot) on Apr 15, 2011 at 13:25 UTC

    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" />

    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.

      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" />

      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 reply1 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.

      1 Yep, this is excessively wordy, too!

Re: Mixing css with html
by Anonymous Monk on Apr 14, 2011 at 22:33 UTC
    So i can't link a style sheet from my computer at all?

      That's not at all what moritz said.

      If "human_vision.css" is -- in fact -- the applicable css, try (inside the head section):

      <link rel="stylesheet" type="text/css" href="file:///g:/programming/perlbackups/human_vision.css">

      Alternately, there's nothing to stop you (except some folks notion of "good practice") from including your css inside the .html file.

      Update: You can and should read about formating in the Monastery. Minimally, use <c>...</c> tags around your code (and data). See Markup in the Monastery.

      Update 2: Removed the single quote/apostrophe before the "g" (in the code) thanks to a good catch by Mr._Muskrat.