Best IT Recipes

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 the <style>...</style> tags:

 <style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>
+69
html css
Aug 17 '12 at 21:40
source share
9 answers

Style rules can be attached using:

  • External files
  • Page Style Tags
  • Inline Style Attribute

Generally, I prefer to use related stylesheets because they are:

  • Can be cached by browsers for performance and
  • much easier to maintain for a development perspective.

However, your question asks about style tags and inline styles. Prefer to use the style tag, in this case, because it:

  • provides a clear separation of markup styles;
  • Creates clearer HTML markup and
  • It’s more efficient with selectors to apply rules to several elements on a page, improving management as well as reducing the size of your page.

Inline elements only affect their corresponding element.

An important difference between the style tag and the inline attribute is specificity. Specificity determines when one style overrides another. Inline styles tend to be more specific.

Read CSS: Specificity Wars for an interesting look at this topic.

I hope this helps!

+86
Aug 17 '12 at 21:44
source share

Here is one aspect that can adjust the difference:

If you change the style of an element in JavaScript, you affect the inline style. If there is already a style there, you rewrite it forever. But if the style was defined in the external sheet or in the <style> , then setting the built-in to "" restores the style from this source.

+16
Aug 17 '12 at 21:50
source share

To answer your direct question: none of them is preferred. Use a separate file.

Inline styles should only be used as a last resort or specified by Javascript code. Inline styles have the highest level of specificity, so they override the actual style sheets. This can make them difficult to manage (you should avoid !important for the same reason).

The nested <style> block is not recommended because you lose the ability of the browser to cache the stylesheet across multiple pages of your site.

So, if possible, you should put your styles in a separate CSS file.

+7
Aug 17 2018-12-12T00:
source share

It depends.

The main thing is to avoid repeated code.

If the same code needs to be reused 2 times or more and needs to be synchronized when changing, use an external stylesheet.

If you use it only once, I think the string is fine.

+7
Aug 30 '13 at 10:05
source share

From the point of view of maintainability, it is much easier to manage one element in one file than to manage several elements in possibly several files.

Sharing your style will help make your life much easier, especially when work responsibilities are shared between different people. Reusability and portability will save you a lot of time.

When using the inline style, which will override any set external properties.

+3
Aug 17 '12 at 21:45
source share

You can set CSS using three different methods as follows: -

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

The preferred / ideal way to set the css style is used as external style sheets when the style is applied to many pages. Using an external stylesheet, you can change the look of the entire website by changing a single file.

Using an example could 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, you can use an internal stylesheet.

Do not use the built-in style sheet, as it mixes content with the presentation and loses a lot of benefits.

+1
Jul 27 '13 at 14:32
source share

In any case, it is preferable to use the .myclass{} class and the identifier #myclass{} , so use the highlighted CSS file or the <style></style> in html. The inline style is good to dynamically change the css parameter using javascript.

0
Aug 17 2018-12-12T00:
source share

There may be different reasons for choosing one path one after another.

  • If you need to specify css for elements that are generated programmatically (for example, to change css for images of different sizes), it may be more convenient to use built-in css.
  • If any css is valid only for the current page, it is better to use a script tag than a separate .css file. Well, if the browser does not need to make too many HTTP requests.

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

0
Aug 17 2018-12-12T00:
source share

I agree with the majority view that external style sheets are preferred.

However, here are some practical exceptions:

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

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

  • If the application will provide the user with subtle control over a specific CSS value, for example. the text color, then you may need to add this to the built-in style elements or to the <style></style> blocks. For example. style="color:#{{ page.color }}" , or <style> p.themed { color: #{{ page.color }}; }</style> <style> p.themed { color: #{{ page.color }}; }</style>

0
May 6 '16 at 1:12
source share


More articles:


All Articles