CGI.pmとスタイルシート

配色をとてもわかりやすい色で構成してみました・・・

print $query->start_html(-style=>{'src'=>'form.css'});
という感じで　外部スタイルシートを呼びます

form.css の中身は　これ
/* --基本部分の設定-- */
body{background-color:#66ffcc;font-size:20px;line-height:20px}
h1{text-align:center;margin:0 15%;
background-color:#eea8aa;
font-size:20px;
color:#ffffff;
font-style:italic;}
em{font-size:20px;
border-bottom:dashed;
color:#808000;}
#bbb {color:#ff1493;margin:0 15%;line-height:12px;}
.ccc {color:#008000;margin:0 15%;line-height:15px;}
.aaa{border:solid 20px red;margin:2px 15%;padding:0px;line-height:20px;}

で、肝心の　form.cgiは
クラスと　idを　こんなかんじて　設定します

$q->start_div({-id=>"aaa"});　　　閉じるときはprint $q->end_div;

$q->start_div({-class=>"bbb",});　閉じるときはprint $q->end_div;

form.cgiは

#!D:/xampp/perl/bin/perl -w　　　　　#CドライブのひとはCになおしてね
use CGI;
use utf8;
$q = new CGI;
print $q->header(-charset=>'utf-8'),
$q->start_html(-title=>"Example CGI.pm Form",-style=>{'src'=>'form.css'}),
$q->h1('Example CGI.pm Form'),
$q->start_div({-class=>"aaa"}),
$q->p('これはclass="aaa"の部分です'),
$q->start_form(-action=>'mail2.cgi'),
$q->em("What's your name?"),
$q->br,
$q->br,
$q->textfield('name'),
$q->checkbox('Not my real name'),
$q->br,
$q->br,
$q->em("Where can you find English Sparrows?"),
$q->br,
$q->br,
$q->checkbox_group(-name=>'Sparrow locations', -values=>['England','France','Spain','Asia','Hoboken'], -linebreak=>'yes', -defaults=>['England','Asia']),
$q->br,
$q->em("How far can they fly?"),
$q->br,
$q->br,
$q->radio_group(-name=>'how far',-values=>['10 ft','1 mile','10 miles','real far'],-default=>'1 mile'),
$q->br,
$q->br,
$q->em("What's your favorite color?"),
$q->br,
$q->br,
$q->popup_menu(-name=>'Color', -values=>['black','brown','red','yellow'],-default=>'red'),
$q->hidden('Reference','Monty Python and the Holy Grail'),
$q->br,
$q->br,
$q->em("What have you got there?"),
$q->br,
$q->br,
$q->scrolling_list(-name=>'possessions', -values=>['A Coconut','A Grail','An Icon','A Sword','A Ticket'], -size=>5, -multiple=>'true'),
$q->br,
$q->br,
$q->em("Any parting comments?"),
$q->br,
$q->br,
$q->textarea(-name=>'Comments', -rows=>5, -columns=>50),
$q->reset,
$q->submit('Action','Shout'),
$q->submit('Action','Scream'),
$q->endform,
$q->end_div,
$q->start_div({-id=>"bbb"}),
$q->h3('これはid="bbb"の部分です'),
$q->end_div,
$q->start_div({-class=>"ccc"}),
$q->h3('これはclass="ccc"の部分です'),
$q->end_div,
$q->end_html;