Use Inline Style
By Stephen Bucaro
Inline style is when you place the style rules directly in an html tag,
using the style attribute. Below is an example of using inline style in a
<p> (paragraph) tag to specify the font that should be used for the
text in the paragraph.
<p style="font-family:verdana; font-size:12px; color:blue;">
This text will be displayed using 12 pixel high blue verdana font.</p>
• You would normally want to avoid using inline style because it negates
one of the primary advantages of using CSS, which is to define the styles
for an entire page (by using embedded style), or to define the styles for
an entire web site (by using a linked style sheet).
If you define a style inline for a specific property of a specific html
element, that inline rule over-rides any embedded or linked style rule
for that specific property of that specific html element. Therefore, use
inline style when you want a specific html element to look different than
other elements of the same type which are being styled by embedded or linked style rules.
The example below shows font style rules defined inline for an html <div>
(division) element.
<div style="font-family:verdana; font-size:12px; color:blue;">
font style rules defined inline for a div apply to any text within the div.
</div>
One advantage of inline style is that it keeps the style rules close
to the place where they are used. This makes inline style very useful
for developing prototypes. When the prototype is complete, common style
characteristics can be defined as style classes in an embedded style block
or linked style sheet.
The example below shows font style rules defined inline for an html
<div> element, where a span nested inside the div uses inline
style rules to over-ride those rules.
font style rules defined inline for this div are
over-ridden by font style rules defined inline for a span
nested within this div.
<div style="font-family:verdana; font-size:12px; color:blue;">
font style rules defined inline for this div are
<span style="font-family:courier; font-size:12px; color:red;">
over-ridden by font style rules defined inline for a span</span>
nested within this div.
</div>
• On the Internet I often find web pages with an embedded style block and
multiple links to external style sheets. A web page element will have an
unwanted style and the designer will have no clue as to where that style
is defined. In that situation, use inline style to force the element
to display in the desired style.
More CSS Quick Reference:
• Set the Type of Bullet Used in List
• nth-child Selector
• Set List Bullets Position
• Vertical Align an Element
• Set an Element's Overflow
• Set an Element's Margin
• Set the Border Style
• Set the border-collapse
• Use Image for List Item Bullets
• Set a Background Image's Position
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
