Logo Luan Morina
Display MySQL records with CSS styles

Pop Muzik

M (1979)

Let Me Love You (Until You Learn To Love Yourself)

Ne-Yo (2012)

PHP

<?php

$conn = new mysqli ("server", "username", "password", "database_name");
mysqli_set_charset ($conn, "utf8");
if ($conn -> connect_error) {
die ("Error: " . $conn->connect_error);
}

$sql = "SELECT song, artist, year FROM top_5000_songs ORDER BY rand() LIMIT 0, 2";
$result = $conn -> query($sql);
if ($result -> num_rows > 0) {
while ($row = $result -> fetch_assoc()) { 
echo "<div class='demo-results'>"; 
echo "<h1>" . $row["song"] . "</h1>"; 
echo "<h2>" . $row["artist"] . " (" . $row["year"] . ")" . "</h2>"; 
echo "</div>"; 
} 
} 

else {
echo "No records found";
}

$conn -> close();
?>

CSS

.demo-container {
margin: 4em auto;
padding: 2em;
max-width: 600px;
background-color: rgba(241, 242, 242, 0.6);
font-family: "Roboto", sans-serif;
}	

.demo-container h1 {
font-size: 1.2em;
font-weight: 400;
background-color: rgba(255, 255, 255, 1);
margin: 0;
padding: 4px 10px;
}
	
.demo-container h2 {
font-size: 1em;
font-weight: normal;
background-color: rgba(129, 209, 180, 1);
color: rgba(255, 255, 255, 1);
margin: 0 0 20px 0;
padding: 4px 10px;
text-align: right;
}

   Display records with CSS styles