Style MySQL Output in PHP with CSS

I have a MySQL Database and it prints live ne activities with PHP on my website. Now I like to style these text outputs (color, position, size) but I don’t know how. Do you have any ideas?

<?php
$pdo = new PDO('mysql:host=x.x.x.x.x;dbname=x.x.x.x', 'x.x.x.x', 'x.x.x.x');

$sql = "SELECT * FROM test ORDER BY id DESC LIMIT 1";
foreach ($pdo->query($sql) as $row) {
   echo '<span class="temperature">' . $row['temperatur'] . '</span>';
   echo '<span class="unit">°C</span>';
}
?>

<style>
.temperature {
    color: red;
}

.unit {
    color: blue;
    margin-top: 2em;
    position: absolute;
}
</style>

The first question/issue is solved!

Second question: I like to margin-top the img but it does not work. The height and width worked well but margin-top has no effect. Does anyone have an idea?

foreach ($pdo->query($sql) as $row)
        if ($row['status'] == '1') {
    $image = "alarm";}
        else {
    $image = "noalarm";}

    echo '<img src="img/' . $image . '.png" margin-top="3.5em" height="40%" width="35%" title="Fire" alt="Fire" />';
?>

Answer

You need to wrap your PHP output in HTML, then you can style it as you would any other HTML element.

<?php
//Database connection//

$sql = "SELECT * FROM test ORDER BY id DESC LIMIT 1";
foreach ($pdo->query($sql) as $row) {
   echo '<span class="temperature">' . $row['temperatur'] . '</span>';
   echo '<span class="unit">°C</span>';
}
?>

CSS

.temperature {
    display: inline-block;
    color: red;
}

.unit {
    display: inline-block;
    color: blue;
}

Edit ———-

Please try the above code exactly. Including the CSS. It looks like your CSS may be throwing off your display, as from a PHP perspective, this should work.

Here’s an example of it working in PHP playground: https://www.tehplayground.com/0aSiTkueB3pS1Fl4