Inline style tags vs inline css properties

Question

What is the preferred method for setting CSS properties   Inline style properties    lt div style  width 20px height 20px background-color  ffcc00   gt  lt  div gt    Style properties in  lt style gt     lt  style gt  tags    lt style gt  gold width 20px height 20px background-color  ffcc00   lt  style gt  lt div class  gold  gt  lt  div gt

User · Accepted Answer

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

User · Answer

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  lt style gt  tag  then setting the inline one to    restores the style from that source

User · Answer

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

User · Answer

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  lt style gt  lt  style gt  blocks  E g  style  color     page color      or  lt style gt  p themed   color      page color       lt  style gt

User · Answer

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

User · Answer

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  -   lt head gt       lt link rel  stylesheet  type  text css  href  your css file name css  gt   lt  head gt    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

User · Answer

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

User · Answer

Whenever is possible is preferable to use class  myclass   and identifier  myclass    so use a dedicated css file or tag  lt style gt  lt  style gt  within an html  Inline style is good to change css option dynamically with javascript

User · Answer

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  lt style gt  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

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

Examples related to html

Examples related to css