| Previous | Table of Contents | Next |
In this lesson, you learn how to apply style properties directly to individual HTML elements.
In previous lessons, you learned many different methods for isolating HTML elements in order to apply styles to them. Class, contextual, and ID selectors all have their uses and are an important part of the standard, but sometimes using them is inconvenient.
Styles provide you with effects that cannot be duplicated using conventional HTML codes, and there will be times when you want to apply one of these effects to a single text element in a quick and dirty manner. The CSS1 standard permits you to do this by allowing the use of STYLE as an attribute as well as an element.
This is referred to as applying inline styles because the style definitions are intermingled with the document contents, instead of being stored in a separate block or file. Inline styles override the effect of any embedded or linked style rules for the same selector. You could conceivably elect to apply all of your style definitions inline because the properties and values are identical to those used in embedded and linked styles. The excessive use of inline styles, however, essentially defeats the primary purpose for using styles in the first place.
Inline style properties are applied only to the text enclosed within the tags containing the properties. There are therefore no selectors for inline styles, as they can only address a single element. If the same effect is required elsewhere in the same document, the entire style attribute must be reproduced in another tag. This can add considerably to the size of your documents and make the HTML code much more difficult to decipher and maintain. Styles containing many different properties can be rather long when strung along a single line of text.
To apply an inline style, add an attribute called STYLE= to any normal HTML tag. The equal sign is followed by quotation marks that contain all of the properties and values that you want to assign to that tag, separated by semicolons in the usual manner. No curly brackets are used in inline styles. If you apply the style for the <P> tag from your SAMPLE2.HTML as an inline style, for example, it appears as follows:
<P STYLE="font-family: Verdana; font-size: 14pt; margin-left: .1in; margin-right: .1in; color: navy">
Of course, you would have to insert exactly the same tag for every paragraph that you wanted to format.
The quotation marks replace the curly braces used in embedded and linked styles, and enclose the declaration to separate it from the rest of the tag. You can add any other attributes that you wish to a tag containing styles because the style syntax is fully compliant with the HTML standard.
TIP: Syntax Deviation When creating inline styles, it is not necessary to enclose font family names that include spaces in quotation marks. They can interfere with the proper processing of the HTML tag.
Inline styles can chiefly be seen as an expedient way to apply the new effects defined by the CSS1 standard to an existing HTML document. If the web author does not have the time or inclination to plan the strategy by which embedded or linked styles are most effectively used, inline styles provide a quick alternative.
When you are working on existing HTML documents, keep in mind that inline styles can be particularly effective when you use them with the <DIV> and <SPAN> tags discussed in Lesson 6. With this combination, you can apply style effects to your pages without affecting your existing HTML code, or the appearance of your pages in a browser that does not support style sheets.
The ancestral inheritance rules of embedded styles are equally applicable to inline styles. The Verdana font-family value applied to the <P> tag in the previous sample, for example, overrides a different typeface specified in its parent element, regardless of whether the parent’s properties are defined by inline or embedded styles.
The rules that govern the application of conflicting styles are a different matter. You can apply both inline and embedded (and even linked) styles within the same document. The issue of what happens when linked styles, embedded styles, and inline styles specify properties for the same selectors is decided by different guidelines, as covered in Lesson 20.
In this lesson, you learned how to use the STYLE attribute to create inline styles that are added directly to HTML tags. In the next lesson, you learn about the cascading effect of conflicting style definitions.
 |
 |
 |