CODEWITHSUNDEEP
phphtmlcss
Bossman
Bossman

Reputation: 17

How do you style HTML inside PHP using CSS?

I need to be able to style some simple HTML I've written in PHP

PHP:

if ($result-> num_rows> 0) {
  readfile("ViewReturn.html");
  while($row = $result-> fetch_assoc()) {
    echo "Bird Name: ".$row["pageLink"]. "<br><br>";
  }
} else {
  echo "0 results";
}

I would like to be able to style the HTML I'm outputting at "birdname" and "page link" because it doesn't sit very well on the page. Does anyone know how to go about doing this?

Upvotes: 1

Views: 7566

Answers (4)

something
something

Reputation: 99

You can style your result by adding these elements Like

 echo "<p class='birdy'>Bird Name: " . $row["pageLink"] . "</p >";

then in your CSS file or inline or in STYLE

.birdy{
   color:blue;
   text-decoration: none;
}

Upvotes: 1

Hamza Zafeer
Hamza Zafeer

Reputation: 2436

<?php
     if ($result-> num_rows> 0) {
        readfile("ViewReturn.html");
        while($row = $result-> fetch_assoc()) {
?>
        <span class="birdname">Bird Name: <?php echo $row['pageLink']; ?> </span>
        <br><br>
<?php
        }
      } else {
         echo "0 results";
     }  
?>

Upvotes: 1

Lal
Lal

Reputation: 14820

You could add the bird name in a <span> with a class and style the class using CSS.

Do it as below

 echo "<span class='birdname'>Bird Name: ".$row["pageLink"]. "</span><br><br>";

ie, replace your code as

if ($result-> num_rows> 0) {
  readfile("ViewReturn.html");
  while($row = $result-> fetch_assoc()) {
    echo "<span class='birdname'>Bird Name: ".$row["pageLink"]. "</span><br><br>";
  }
} else {
  echo "0 results";
}

and in CSS, add

.birdname{
   color:red;
}

Upvotes: 1

user5245279
user5245279

Reputation:

You can add to your echo command the html elements just as you were writing directly on HTML file. For example:

echo "<div class='some-class'>"
while($row = $result-> fetch_assoc()) {
echo "<someTag class='other-class' >". "Bird Name: ".$row["pageLink"]. "<br><br>" . "</someTag>";
}
echo "</div>"

Upvotes: 1

Related Questions