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>
<title>My Page</title>
     h1 {color:red;}
     p {font-size:24px; line-height:30px;}

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:

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