Starter – spot the difference

Have a look at these two pages. Both have exactly the same HTML content, but they look completely different. How many differences can you spot?


no css

With CSS

with css


All about inline CSS

Inline CSS Styles are used to change the appearance of one particular element on a page,
such as a picture, a heading or some text.

They can be used to make simple changes, such as just changing the color of things, or
they can be used to do far more complicated things like animations and special text effects.

Adding a style

style = ‘name:value’

To add a style you need to used add a style attribute inside the html tag itself. Each style declaration consists of a property and a  value.


<h1 style = ‘color:blue’¬†>


Adding multiple styles

style = ‘name:value;name:value’

You can apply multiple styles to a tag by seperating them by a comma.


<p style = ‘text-align:center;font-size:15px’>

Text styles


Used to adjust the size of the fon


Used to change the font to a different font


Used to change the font color.


Image Styles


Aligns the image to the left, center or right of the page.


Alighns text, images or other objects.

margin-left: 10px

Sets the external padding of a document

margin: 0px

Sets all of the margins for an object


Sets the internal padding of an object.


Download the html file below and make the amendment on the worksheet






Printable Worksheet for starter

CSS Styles Cheat Sheet

A cheat sheet of all the basic style options.

Style Sheets Review Kahoot