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