link to hitmill.com home page


CSS Tutorial:
Using In-line Style

This page is a CSS tutorial about how to use in-line stylesheets rules. In-line CSS Style rules take precedence over internal CSS Style Sheets rules. The internal CSS style sheet (template) takes precedence over any external CSS style sheets rules. The lowest on the totem pole is the external style sheet (template), also called the external CSS style sheets rules. The highest in the hierarchy is the in-line STYLE property which can be added to a tag, such as <P STYLE="text-align:center;">.
In this paragraph the text will take on the properties of the internal CSS style, CLASS="micro". If no internal Cascading Style Sheets rules have been established the external CSS style will be used, if you created a text file for the external Cascading Style Sheets rules. If no CSS is used, your Web page will be rendered by the default settings of the user's browser.
If you find yourself using in-line styles a lot, you will want to consider making a new class to handle any style that you are using repeatedly. Place it into an internal or external style sheet rather than in-line style. In-line style was only meant for very occasional use. Oh, and I get lazy and use it more than I should at times, so I will consiously try to clean up my own faults, too. This is how it is done:
Let's say for some reason that your internal style sheet (persistent style) has specified all of your H3 headings as blue and you need on to be a more subtle orange color. In the BODY of the HTML document when you want this change to occur, you would code
<H3 STYLE = "color:#FF9473;">

just as if everything within the quotes is an actual declaration from a regular style sheet. The quotes are required. Use semi-colons again if using more than one declaration. Preceed the in-line style with STYLE = after the opening HTML "tag" and the entire in-line style is coded before closing the first "tag".

Another example of in-line occurs when you want to change only the left and right margins of one paragraph.

<P STYLE="margin-left:25; margin-right:25;">[text]</P>

For any element in HTML that has a STYLE attribute, you may use in-line style rather than the internal style sheets rule.. Any inline style rule supercedes and over-rides the internal style sheets rule. The internal style sheets rules however still supercede and over-ride the external style sheets rules. This is the reason they are called Cascading Style Sheets... their heirarchy flows from the external (least important), to the internal, and one down to the in-line style sheets rule (most important in that in over-rides all the other rules for the element).


Search Tutorial
JavaScript | Web Services | Home


Updated 11 April 2006
© hitmill.com
All Rights Reserved