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

This example is as easy as it gets:

<p style="color:red;"> 

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

Place the above style attribute and value into your first opening paragraph tag so it looks like the above example. The end tag doesn't need to change. 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.

Now try replacing your 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. 

Add a background colour style to the second paragraph.  Make it green.  When you try it the new style should override the background colour from the body element.  Although the body background colour is inherited by the paragraph (and all the others) the in-line style in this oen paragraph is considered more important and so is used.

Multiple styles

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

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

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

spans

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>

The finished page