Styling PHP Output with an External Stylesheet
Question
I know that this question has been asked in abundance, however, I am too novice to grasp the general gist of other threads; hence me asking my own question that is specific to my own code.
I would like to style the text that my PHP form gives the user following their submission of the form, be it the style of the text, background, layout, etc. through an external CSS.
My current PHP is this:
<?php
// pull out the values from the request stream sent by the form
// and store those values into memory variables
$email = $_REQUEST['email'];
$webmail = $_REQUEST['subject'];
$firstName = $_REQUEST['Firstname'];
$lastName = $_REQUEST['Lastname'];
$sex = $_REQUEST['sex'];
$to = 'emailaddress@me.com';
$comment =$_REQUEST['comment'];
$subject =$_REQUEST['subject'];
$header = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"';
$header .= ' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
$htmlhead = '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">';
$htmlhead .= '<head><title>Getting Student Info</title>';
$htmlhead .= '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>';
$htmlbody = '<body>';
// use the variables that store the information sent from the form.
mail($to, $subject,"You have received the following feedback:". $comment, "from " . $firstName . " " . $lastName, "From: $email");
$htmlbody .= '<div class="formSubmissionText">';
$htmlbody .= "<h1>Processing a form</h1>";
$htmlbody .= "<p>Thank you " . $firstName . " " . $lastName;
$htmlbody .= ". We've recieved an email from your email address: " . $email . ", and will be respond as soon as possible!</p>";
$htmlbody .= "</div></body></html>";
// use echo to write all the information out back to the browser
echo $header . $htmlhead . $htmlbody;
?>
1 answers
solution1
0 ACCPTED 2016-03-21 13:18:00
Simply add classes to your HTML elements - even though you're dynamically outputting the HTML from PHP the same styling rules apply. You have a class applied to the containing DIV, so you can style the child elements like so:
/* The Container */
.formSubmissionText { background:#ff0000; }
/* The Heading */
.formSubmissionText h1 { font-weight:bold; }
/* The Paragraph */
.formSubmissionText p { fonr-size:24px; }
You can write your styling into a .css file then include it in the <head>...</head> section:
<link rel="stylesheet" type="text/css" href="/css/my-stylesheet.css"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.