add css to html code

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

I've spent the day trying to incorporate CSS into a simple HTML file. Would someone please add some CSS code to this sample?

#
#  PROGRAM:    popup_menu.cgi
#
#  PURPOSE:    Demonstrate (1) how to create a popup_menu form and
#        (2) how to determine the value selected by the user.
#
#  Created by alvin alexander, devdaily.com.
#

#-----------------------------------#
#  1. Create a new Perl CGI object  #
#-----------------------------------#

use CGI;
$query = new CGI;

#----------------------------------#
#  2. Print the doctype statement  #
#----------------------------------#
<style>
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
}
</style>
</body>

print $query->header;

print $query->h3("x");

#----------------------------------------------------#
#  3. Start the HTML doc, and give the page a title  #

print $query->start_html('My popup_menu.cgi program');

my @arr = qw(pasta hamburger salad pierogi chicken_cutlet);
if (!$query->param) {
    print $query->start_form;
    print $query->h4('Select a dinner entree:');
    print $query->popup_menu(-name=>'entrees',
                 -values=>[@arr],
                 -default=>'Veggies');
}
print $query->end_form;

my @arr = qw(cheese_cake cannoli apple_pie);
if (!$query->param) {

    print $query->start_form;
    print $query->h3('Select a desert entree:');
    print $query->popup_menu(-name=>'deserts',
                 -values=>[@arr],
                 -default=>'Veggies');
}
print $query->end_form;

print $query->end_html;
[download]

Comment on add css to html code Download Code

Replies are listed 'Best First'.
Re: add css to html code by huck (Prior) on Apr 20, 2017 at 22:38 UTC
you dont know any perl do you? What do you expect perl to do when it sees this code? `#----------------------------------# # 2. Print the doctype statement # #----------------------------------# <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } </style> </body>` [download] I'll give you a hint `<>` is an i/o operation in perl, when it sees `<style>` it is going to try to read from an opened file named style. That is not what you want at all is it? perl statments are separated by semi-colons, that is a whuge block of stuff with no semi-colons in it. You expect that to be text, in perl text is inside quotes. For example `#----------------------------------# # 2. Print the doctype statement # #----------------------------------# print ' <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } </style> ';` [download] But you dont understand what your other parts are doing either. When dealing with html the `print $query->header;` better be run before anything else gets printed. Anything printed before that line will be considered a header, and those statements do not look like headers at all. Maybe you will even also notice that i too out the `</body>` part. That is part of the closing protocol of html. You will want to print that last. `print '</body>';` will do just fine. So in short, you need to learn more about perl, and you need to learn more about html or else you are going to be like someone trying to fix his car who only knows that the motor is under the hood. Luckily this wont kill you, like grabbing on to the battery posts or getting your shirt caught in the fan belt could.	[reply] [d/l] [select]
Re^2: add css to html code by Anonymous Monk on Apr 21, 2017 at 02:06 UTC
Thanks	[reply]
Re: add css to html code by GotToBTru (Prior) on Apr 21, 2017 at 12:50 UTC
I went to http://search.cpan.org and entered "CGI CSS". 3rd link proved the most useful: CGI::HTML::Functions. Using ctrl-S to search for CSS was very informative. But God demonstrates His own love toward us, in that while we were yet sinners, Christ died for us. Romans 5:8 (NASB)	[reply]
Re^2: add css to html code by Anonymous Monk on Apr 21, 2017 at 18:15 UTC
that is helpful; didn't see that one....thanks	[reply]
Re: add css to html code by Corion (Patriarch) on Apr 20, 2017 at 19:16 UTC
What have you tried and where did you encounter problems?	[reply]
Re^2: add css to html code by Anonymous Monk on Apr 20, 2017 at 19:31 UTC
I tried a lot of things; generally the code failed with Perl errors. I've looked at a lot of sample CSS code but haven't found anything which showed how to incorporate CSS directives into HTML generation code.	[reply]
Re^3: add css to html code by Corion (Patriarch) on Apr 20, 2017 at 19:48 UTC
Well, unless you tell us what "Perl errors" you got, we can only give you very general advice. For integrating CSS into HTML, you can look at the source code of basically any website to find how it does that. But again, without you telling us where exactly you encountered problems and what those problems were, there is only that much we can do to help you.	[reply]