<< .. Go to : : Home : : Exercise 2 : : Demo 2A : : Demo 2B : : Demo 2C : : Demo 2D : : Demo 2E : : TAGS : : All Class Demos .. >>

Exercise 2 Demo: Part E : CSS Inline Styles

With Inline Styles you write the style and apply it directly to a tag for precise control over your content. However, you must write a new style for every new instance, even if the effect you want is exactly the same.

Inline Styles are a combination of HTML and CSS.

Inline styles are applied using the style attribute within the opening tag of the content you want to apply the style too. The style attribute is actually HTML code so you use an equal sign after it and enclose all the CSS inside one set of quote marks. Write the information inside the quote marks just like you would write any other CSS - with the property and the value separated by a colon and a semi colon after you end each declaration - - property: value;

using the style attribute

The example from above would look like this:

Some red text using Inline CSS and the H3 tag

Using the example in the lecture, the results would look like this:

This is some text which should be 12px, arial, bold, and green

Your code would look like this:
<p>This is some text which should be <span style="font-size:12px; font-family:arial; font-weight:bold; color:green"> 12px, arial, bold, and green.</span> </p>

The <span> element is useful whenever you want to apply styles to a small amount of content, from as little a single letter to many words.

For larger passages use the style attribute in the <p> or the <div> tag, like so:

Try THIS for getting someone's attention!!!

Your code will look like this:

<p style="color:purple; font-weight: bold; font-family:arial; font-size:12px; background:yellow">Try THIS for getting someone's attention!!!</p>

The last property background:yellow will set the background color of any content enclosed in an HTML element. Try it!

REMEMBER: Inline styles over-ride any styles set in your document level styles. Use them sparingly, but you can have fun with them like this:

<span style="font-size:60px; font-family:Papyrus; font-weight:bold; color:purple">C</span>
span style="font-size:48px; font-family:Times; font-weight:bold; color:red">o</span>
<span style="font-size:48px; font-family:Zapfino; font-weight:bold; color:#fec004">
L </span>
<span style="font-size:48px; font-family:arial; font-weight:bold; color:green">
O </span>
<span style="font-size:48px; font-family:Comic Sans MS; font-weight:bold; color:blue">
r </span>

C o L O r

For Unordered Lists go back to Part A of Demo 2.

For Ordered Lists go back to Part B of Demo 2.

For Definition Lists go back to Part C of Demo 2.

For CSS Beginning Styles go back to Part D of Demo 2.

Go back to the Exercise 2 page.

© Claudia Faulk. Created in 2008. Updated 6.18