Templates Lesson

CSS Inline Styles - Templates Lesson

Since Cascading Stye sheets do exercise tremendous power over your documents lets start with a small trick so we don't hurt ourselves.

The first demonstration covers creating an Inline style.

The inline style is the simplest way to modify a tag. You insert the style attribute within the HTML tag and then assign properties and their values. Lets try it.

1. Access your text editor and begin a new HTML document. Insert an H3 tag which includes style code.

< H3 style="color:#663399; font-family: Arial, Helvetica, sans-serif">
I am an example of an "inline style" which produces purple text displayed in the arial font
</H3>

The attribute style is followed by

an = sign

open quote

the property "color"

a colon

the hexadecimal# for purple

a semicolon

the property "font-family"

another colon

the value Arial, Helvetica, sans-serif"

ending quote

We're done!!

2. Below this <H3> tag include a sentence with an <H3> tag that has no style code so we can compare the traditional heading 3 tag to the tag with style code.

<H3>I am a plain old boring heading 3 tag, CSS code get to have all the fun :-></H3>

3. Save the file as imbed.html, launch your browser and then view the file in your browser.

Here is an example of how the page should display

Inline Style example

Here is the code i used to create this file:

<HTML> <HEAD>
<TITLE>Linda's CSS test page</TITLE>
</HEAD> <BODY bgcolor="ffffff"> <br /> <br />

<H3 style="color:#663399; font-family: Arial, helvetica, sans-serif">I am an example of an "inline style" which produces purple text displayed in the arial font</H3>

<H3 >I am a plain old boring heading 3 tag, CSS code gets to have all the fun :-></H3>

</BODY> </HTML>

That was an easy trick but not very powerful. Let's move on to bigger and better things... document level and external styles.