Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Use Inline Style

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268