I want to add CSS to my php code.How to do it?

Question

I am new with php and I was wondering how can I add css to my php code? I basically want to do form handling using php.So I want to collect the username and email and display it as soon as the user hits submit.But how can I render the text on php page using different colors or change its css styles? For example if I want my 'id:fullname' to render in red color.How can I do it??

I googled it but didn't got a clear answer.

CSS I want to add:

 #fullname{
      color: red;
    }

My html code:

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
      <title>Sign Up!</title>
      <!-- FONT AWESOME -->
      <script src="https://kit.fontawesome.com/887e6e97bd.js" crossorigin="anonymous"></script>
      <!-- CSS STYLESHEET -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
      <!-- FONTS -->
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu:wght@500&display=swap" rel="stylesheet">
      <link rel="stylesheet" href=" css/login.css ">
    </head>

    <body>
      
        <div class="container" id="container">
          <div class="form-container sign-in-container">
            <form id="signupform" action="sign.php" method="post">
              <h1 style="font-weight: bold; margin: 0;">Create Account</h1>
              <div class="social-container">
                <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
              </div>
              <span>or use your email for registration</span>
              <input id="fullname" type="text" placeholder="Name" name="fullname" />
              <input id="emailid" type="email" placeholder="Email" name="emailid" />
              <input id="password" type="password" placeholder="Password" name="password" />
              <input id="cpassword" type="password" placeholder=" Confirm Password" name="cpassword" />
              <button id="signbutton">Sign Up</button>
              <a style="color: #000000" href="login.html">Already have an account?</a>
                    </form>
          </div>
        </div>
      </div>
      <script src="s.js" charset="utf-8"></script>
      <footer id="footer">
        <p>© Copyright 2020 Foodzie</p>
      </footer>

    </html>


<!-- end snippet -->

this is my php code:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
    
          </head>
      <style>
    
      <?php include 'CSS/styles.css'; ?>
      </style>
    
      <body>
        Welcome to Foodzie!!<?php echo $_POST["fullname"]; ?><br>
        Your email address is: <?php echo $_POST["emailid"]; ?>
    
      </body>
    </html>

score 0 · Answer 1 · answered Oct 26 '20 at 04:37

0

In general, it's best to have your CSS before your HTML and your PHP before your CSS. I always start my scripts with <?php at the very beginning of the file, close it ?>, have my JavaScript <script>...</script>, have my CSS <style>...</style>, and then my HTML. So, in your case, you can simply put your CSS between the style tags just above your opening HTML tag <html>.

answered Oct 26 '20 at 04:37

Snake14

416
2
7

So should I write – Khushi Zawar Oct 26 '20 at 06:05
@KhushiZawar Yes. That would make the text of the element with the id of fullname red. – Snake14 Oct 26 '20 at 06:39
See this is my php code Welcome to Foodzie!!
Your email address is: – Khushi Zawar Oct 26 '20 at 08:37
It is not coming in red color – Khushi Zawar Oct 26 '20 at 08:38
@KhushiZawar Your CSS is trying to change the color of the element with the ID fullname, so I assumed you were trying to change the color of your input with that ID. Your PHP response doesn't have an element with the ID of fullname. If you want the name portion to be red, you could change the above to something like the following. `Welcome to Foodzie!!
Your email address is: `. – Snake14 Oct 26 '20 at 19:18

I want to add CSS to my php code.How to do it?

1 Answers1