Inline Style Rules

There are a couple of things that we need to discuss to wrap our overview of styles. Firstly, inline styles are the least flexible way of defining style rules...

There is one remaining case where style definitions can be used, although this type of styling should be used sparingly. These are so-called inline styles. In this case, the style is applied directly to the specific element without using a rule. As an indication of how little you should use this technique, remember that Dreamweaver does not even use it to implement its implicit styles!

Look at the page heading - it has a different colour than normal and is in italic. If you look at the code for the page, you will notice the following:

<h2 style="color:#906; font-style:italic">Inline Style Rules</h2>

In this case, the style is defined as a property of the tag itself. The value of the style property is a quoted list of style attributes, separated by semi-colons, as it would be for the body of a style rule (the part inside curly braces). However, in this case the style definitions will only be applied to the given element. Because of this, these are the least flexible form of style rules that you can use, but they are sometimes useful for locally overriding definitions from external or local style sheets.

Inline StyleLater version of Dreamweaver provide support for inline style definitions within the GUI. In earlier versions, like CS3, you just have to go in and edit the code. First, you must make sure that the CSS button is selected in the properties panel. Select the object or text to which you want to apply the inline style and then click on the Target Rule dropdown. This will give you the selection show on the left (screen shot from CS5).

From this list select the <New Inline Style> item and then click on the Edit Rule button. You will then be given the familiar style rule definition dialog, only now the style is being generated as an inline element in your code. Typically, this will result in a span element with the given style definitions included.

Remember to use this technique sparingly, if at all!

The next page discusses how rules cascade... Next