如何将 CSS 样式放入 php 代码中？

Question

I want to edit the input boxes of table ie the fields where user inputs username and password in a table. I have created this table inside php code.

Now I want to make the input field texts in different color and only in small letters not caps.

I tried to give class for the td selected such as class="smallCaps" and tried to edit in the external css file but it didn't work.

<?php 
if ($username && $userid){
   echo "You have logged in as <b> $username </b>. Click here to <a href='logout.php'>         Logout </a>";  
 }
  else {
 $form = "<form action= 'index.php' method='POST'> 
 <table> 
    <tr> <td> <font color='black' face='arial' size='3'>Username:  </font> </font></td>    <td> <input type='text' name='user' placeholder='Username' > </td>
    <td> <font color='black' face='arial' size='3'>Password: </td>  </font><td> <input type='password' name='password' placeholder='Password'></td> 
    <td> <button type='submit' class='btn' name='loginbtn' value ='Login'><font size='3'>Login</font> </td></button>
    <tr><td> <a href='signup.php'> <font color='black' face='arial' size='3'>Register</font> </a> </td> </tr>
  </table>
   </form>";

Answer 1

I am not sure what you are doing here. Did you include the external css file?

And I assume you did [ class='smallCaps' ] not [ class="smallCaps" ] which would conflict echo.

Answer 2

you should try inline styling like that:

<table style=" background-repeat:no-repeat; width:450px;margin:0;" cellpadding="0" cellspacing="0" border="0">
  <tr style="height:40px; width:450px; margin:0;">
    <td style="height:40px; width:40px; margin:0;">

etc....

Answer 3

Try to keep your client side and your server side codes separately. You can do so by doing the following:

echo '<table class="myClass">';

and then go put the table styles in the class you declared

.myClass{
    top: 15px;
    left: 10px;
 }