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?

Original

no css

With CSS

with css

Introduction

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.

Example

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

Example:

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

Text styles

font-size:12px

Used to adjust the size of the fon

font-family:verdana

Used to change the font to a different font

color:blue

Used to change the font color.

text-decoration:underline

Image Styles

text-align:right

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

text-align:right

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

padding:10px

Sets the internal padding of an object.

Activity

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

 

 

 

 

Resources

Printable Worksheet for starter

CSS Styles Cheat Sheet

A cheat sheet of all the basic style options.

Style Sheets Review Kahoot