[ACCEPTED]-Inline <style> tags vs. inline css properties-css

Style rules can be attached using:

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

Generally, I 11 prefer to use linked style sheets because 10 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 9 about the style tag versus inline styles. Prefer 8 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 7 elements only affect their respective element.

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

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

I hope 1 that helps!

Here's one aspect that could rule the difference:

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

It depends.

The main point is to avoid repeated 4 code.

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

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

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

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

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

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

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

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

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

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

However, here 15 are some practical exceptions:

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

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

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

Inline CSS have more precedence than CSS 2 within tag. There are three ways to add 1 CSS. Read this article on w3school, very informative.

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

There can be different reasons for choosing 2 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 1 is better to use a separate css file.

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

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

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

sample usage can be 5 :-

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

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

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