Cascading Style Sheets : 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. Inlines 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 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:
<span style="font-size:12px; font-family:arial; font-weight:bold; color:green"> This is some text which should be 12px, arial, bold, and green.</span>

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 external style sheet or your document level styles. Use them sparingly. We will talk about setting styles with Classes and IDs next.