banner headline with in line style

I've asked my students to do this task:

Make 5 copies of your website. Then using HTML-Kit develop different good looking banner headlines:

• One of them very bad
• Three of them good (one of those not using any background images)
• At least one of them unusual and good

Experiment with variations in fonts, font size, borders (different top, bottom, left, right), padding, colours, background images, letter spacing, word spacing, width, height, text-align

Convert the embedded style (in head section) to inline style and display your five different banner headlines in one blogpost

The banner headline does not appear in Preview but it does appear in Compose view and it is published ok

Also blogger sometimes changes and capitalises the properties for some reason (but not always, not sure why)
eg.
border: 10px double #f00; was changed to

BORDER-RIGHT: #f00 10px double;
BORDER-TOP: #f00 10px double;
BORDER-LEFT: #f00 10px double;
BORDER-BOTTOM: #f00 10px double;

banner headline

banner headline

banner headline

To get the background image to appear using inline style upload the image you want to use and then find the src attribute of the image tag. Copy and paste that url into the background-image: url() value

banner headline

chunder headline

banner headline

unusualheadline