Exercise 12: Weather
Using inline CSS in conjunction with PHP.
And here’s a quick reminder of the two types of inline CSS:
Page-specific CSS
You can wrap regular CSS statements in the <head> of your HTML page using the <style> tag:
<!doctype html>
<head>
<title>My Page</title>
<style>
h1 {color:red;}
p {font-size:24px; line-height:30px;}
</style>
</head>
...
Inline CSS on particular HTML elements
You can also style a particular element with the style attribute. This will override styles inherited from the main stylesheet or the <style> tag in the page.
...
<p style="font-size:24px; line-height:30px;">My paragraph is large.</p>
...
So if I wanted to generate a random font size with PHP and just affect a single paragraph, I could do this:
<?php
$font_size = rand(10, 50); // generate a random number between 10 and 50
?>
<p style="font-size:<?php echo $font_size; ?>px; line-height:30px;">My paragraph is large.</p>
...