MAT 125: Demos for Exercises

Exercise 2 Demo: Part E : Using 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; padding: 10px; 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. You can add them to an exisiting element in your coding, or add in the span tag and then add the style attribute and so on.

Make sure the last semi-colon is included inside the closing quote mark. Use CSS Inline Styles 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

Go to Part E of Demo 2.