Watkins Web 3: Blog

Exercise 12: Weather

Using inline CSS in conjunction with PHP.

Exercise 12 View Demo

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>
...