PHP with HTML & CSS
In this page:
<?php $variable = value; ?>
<h1><?php echo $variable; ?></h1>
<?php if (condition): ?>
<p>shown only when condition is true</p>
<?php endif; ?>Mixing PHP with HTML
PHP tags can be embedded directly inside an HTML file; the server executes any PHP it finds and replaces those blocks with their output before the finished HTML is sent to the browser.
Example: Mixing PHP with HTML
<?php $name = "Alice"; ?>
<h1>Welcome, <?php echo $name; ?></h1>Login to try C/C++/Java/PHP code in the editor
Outputting CSS Dynamically
Because PHP runs before the page reaches the browser, you can generate CSS values dynamically -- like setting a background color from a database-stored theme preference -- by echoing them straight into a style attribute or block.
Example: Outputting CSS Dynamically
<?php $themeColor = "darkblue"; ?>
<div style="background-color: <?php echo $themeColor; ?>;">Themed box</div>Login to try C/C++/Java/PHP code in the editor
Conditional HTML Rendering
Wrapping HTML in if-else blocks lets a template show or hide entire sections based on server-side conditions, like displaying an admin menu only when the logged-in user has the right role.
Example: Conditional HTML Rendering
<?php $isAdmin = true; ?>
<?php // The if/endif alternative syntax reads cleanly when mixed with HTML ?>
<?php if ($isAdmin): ?>
<nav>Admin Menu</nav>
<?php else: ?>
<nav>Regular Menu</nav>
<?php endif; ?>Login to try C/C++/Java/PHP code in the editor
Looping HTML Elements
A foreach loop around a chunk of HTML is the standard way to render a repeating structure -- like table rows or product cards -- once per item in an array, instead of writing out each one by hand.
Example: Looping HTML Elements
<?php $products = ["Book", "Pen", "Notebook"]; ?>
<?php // Loop over $products, printing one .product-card div per item ?>
<?php foreach ($products as $product): ?>
<div class="product-card"><?php echo $product; ?></div>
<?php endforeach; ?>Login to try C/C++/Java/PHP code in the editor
Shorthand Echo Tags
The shorthand tags <?= $value ?> are equivalent to <?php echo $value; ?> but far less noisy when a template needs to print dozens of small values throughout a page.
Example: Shorthand Echo Tags
<?php $price = 19.99; ?>
<p>Price: $<?= $price ?></p>Login to try C/C++/Java/PHP code in the editor
- Forgetting to close a PHP tag with
?>or a brace before switching back to HTML in a loop. - Echoing user input into HTML without
htmlspecialchars, which allows XSS. - Sending output before a
header()call, which causes a headers already sent warning.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: