The easiest place to type styles is in the HTML itself. It is also the least useful as you will see later. Start easy though!

You should remember attributes and values from HTML.

There is a style attribute. Its value is one style or more.

Applying a single style to an HTML element

Open textemphasis.html (created in the beginners HTML tutorial) and save it as inline.html.  Change the title and h1 to HTML with CSS.

This example is as easy as it gets.  Change the opening p tag in your first paragraph to this:

<p style="color:red;"> 

The end tag doesn't need to change (it never does). View the page in a browser and the first paragraph should now be red. There is a better way to do colour as you will find out later but this one is fine as well.

Change the second paragraph in the same way but set the background colour this time:

<p style="background-color:green;">

Now try replacing your existing body tag with this one:

<body style="background-color:yellow;">  

That should set the background colour of your whole page to yellow.

The CSS property/value pair is separated by a colon and terminated by a semi-colon. The property here is background-color and the value is yellow.

Cascading (part 1)

The styles apply to the HTML element they are in and to all the elements inside that element.  So the background colour applied to the whole page including the paragraphs and lists etc..  The color style only applied to the paragraph it is in as there are no other elements inside it. 

The background colour green in the second paragraph should override the background colour from the body element.  Although the body background colour is inherited by the second paragraph (and all the others) the in-line style in this one paragraph is considered more important and so is used.

Multiple styles

Add a second style to the first p element and try the page in a browser:

<p style="color:red; background-color:green;">  

Why use in-line styles?

As you just saw adding more styles is easy.  The trouble is as you add more the HTML starts to get very confused.  That is one of the three main reasons for not using in-line styles.

You can change almost any characteristic of an HTML element using in-line CSS. However the changes apply to just that one HTML element (and those inside it). That is why only one paragraph turned red.  This is the second reason for not using in-line styles (unless you do only want one thing changed of course).

The final reason is really the same but it is because you will often want all pages on the site to look the same.  That means putting the styles in every page over and over again.


You found out what spans were earlier but they weren't much use. Now they can be.  You can apply styles to just part of an HTML element. For example, one part of a paragraph. To do this you enclose the part you want to style in SPAN tags.  Add this paragraph to the end of inline.html:

<p>Some text will not be affected but <span style="color:yellow; background-color:green;">this text will be</span> I hope.</p>

Your page should now look like this (don't worry if the text is slightly different this is about the colours):

The finished page