Inline <style> tags vs. inline css properties

What is the preferred method for setting CSS properties?

Inline style properties:

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

Style properties in <style>...</style> tags:

<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>

Style rules can be attached using:

• External Files
• In-page Style Tags
• Inline Style Attribute

Generally, I prefer to use linked style sheets because they:

• can be cached by browsers for performance; and
• are a lot easier to maintain for a development perspective.

However, your question is asking specifically about the style tag versus inline styles. Prefer to use the style tag, in this case, because it:

• provides a clear separation of markup from styling;
• produces cleaner HTML markup; and
• is more efficient with selectors to apply rules to multiple elements on a page improving management as well as making your page size smaller.

Inline elements only affect their respective element.

An important difference between the style tag and the inline attribute is specificity. Specificity determines when one style overrides another. Generally, inline styles have a higher specificity.

Read CSS: Specificity Wars for an entertaining look at this subject.

I hope that helps!

Here's one aspect that could rule the difference:

If you change an element's style in JavaScript, you are affecting the inline style. If there's already a style there, you overwrite it permanently. But, if the style were defined in an external sheet or in a <style> tag, then setting the inline one to "" restores the style from that source.

It depends.

The main point is to avoid repeated code.

If the same code need to be re-used 2 times or more, and should be in sync when change, use external style sheet.

If you only use it once, I think inline is ok.

To answer your direct question: neither of these is the preferred method. Use a separate file.

Inline styles should only be used as a last resort, or set by Javascript code. Inline styles have the highest level of specificity, so override your actual stylesheets. This can make them hard to control (you should avoid !important as well for the same reason).

An embedded <style> block is not recommended, because you lose the browser's ability to cache the stylesheet across multiple pages on your site.

So in short, wherever possible, you should put your styles into a separate CSS file.

From a maintainability standpoint, it's much simpler to manage one item in one file, than it is to manage multiple items in possibly multiple files.

Separating your styling will help make your life much easier, especially when job duties are distributed amongst different individuals. Reusability and portability will save you plenty of time down the road.

When using an inline style, that will override any external properties that are set.

I agree with the majority view that external stylesheets are the prefered method.

However, here are some practical exceptions:

• Dynamic background images. CSS stylesheets are static files so you need to use an inline style to add a dynamic (from a database, CMS etc...) background-image style.

• If an element needs to be hidden when the page loads, using an external stylesheet for this is not practical, since there will always be some delay before the stylesheet is processed and the element will be visible until that happens. style="display: none;" is the best way to achieve this.

• If an application is going to give the user fine control over a particular CSS value, e.g. text color, then it may be necessary to add this to inline style elements or in-page <style></style> blocks. E.g. style="color:#{{ page.color }}", or <style> p.themed { color: #{{ page.color }}; }</style>

Whenever is possible is preferable to use class .myclass{} and identifier #myclass{}, so use a dedicated css file or tag <style></style> within an html. Inline style is good to change css option dynamically with javascript.

There can be different reasons for choosing one way over the other.

• If you need to specify css to elements that are generated programmatically (for example modifying css for images of different sizes), it can be more maintainable to use inline css.
• If some css is valid only for the current page, you should rather use the script tag than a separate .css file. It is good if the browser doesn't have to do too many http requests.

Otherwise, as stated, it is better to use a separate css file.

You can set CSS using three different ways as mentioned below :-

1.External style sheet
2.Internal style sheet
3.Inline style

Preferred / ideal way of setting the css style is using as external style sheets when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file.

sample usage can be :-

<head>
    <link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>

If you want to apply a unique style to a single document then you can use Internal style sheet.

Don't use inline style sheet,as it mixes content with presentation and looses many advantages.