Using style tags in the body with other HTML

Question

lt html gt     lt body gt       lt style type  text css  gt        p first  color blue        p second  color green       lt  style gt        lt p class  first  gt Hello World lt  p gt       lt p class  second  gt Hello World lt  p gt        lt style type  text css  gt        p first  color green        p second  color blue       lt  style gt        lt p class  first  gt Hello World lt  p gt       lt p class  second  gt Hello World lt  p gt     lt  body gt   lt  html gt    How is a browser supposed to render css which is non contiguous  Is it supposed to generate some data structure using all the css styles on a page and use that for rendering   Or does it render using style information in the order it sees

User · Answer

As others have said  this isn t valid html as the style tags belong in the head   However  most browsers dont  really enforce that validation   Instead  once the document is loaded then the styles are merged and applied   In this case the second set of styles will always override the first because they were the last definitions encountered

User · Answer

BREAKING BAD NEWS for  style in body  lovers  W3C has recently lost the HTML war against WHATWG  whose versionless HTML  Living Standard  has now become the official one  which  alas  does not allow STYLE in the BODY  The short-lived happy days are over     The W3C validator also works by the WHATWG specs now   Thanks  FrankConijn for the heads-up     Note  this is the case  as of today   but since there s no versioning  links can become invalid at any moment without notice or control  Unless you re willing to link to its individual source commits at GitHub  you basically can no longer make stable references to the new official HTML standard  AFAIK  Please correct me if there s a canonical way of doing this properly    OBSOLETED GOOD NEWS   Yay  STYLE is finally valid in BODY  as of HTML5 2   And scoped is gone  too    From the W3C specs  relish the last line        4 2 6  The style element               Contexts in which this element can be used       Where metadata content is expected       In a noscript element that is a child of a head element       In the body  where flow content is expected      META SIDE-NOTE   The mere fact that despite the damages of the  browser war  we still had to keep developing against two ridiculously competing  official  HTML  standards   quotes for 1 standard   1 standard  lt  1 standard  means that the  fallback to in-the-trenches common sense  approach to web development has never really ceased to apply   This may finally change now  but citing the conventional wisdom  web authors developers and thus  in turn  browsers should ultimately decide what should  and shouldn t  be in the specifications  when there s no good reason against what s already been done in reality  And most browsers have long supported STYLE in BODY  in one way or another  see e g  the scoped attr    despite its inherent performance  and possibly other  penalties  which we should decide to pay or not  not the specs    So  for one  I ll keep betting on them  and not going to give up hope     If WHATWG has the same respect for reality authors as they claim  they may just end up doing here what the W3C did

User · Answer

The  lt style gt  tag belongs in the  lt head gt  section  separate from all the content   References  W3C Specs and W3Schools

User · Answer

I guess this may be an issue about limited contexts  e g  WYIWYG editors on a web system used by not-programmers users  that limits the possibilities of follow the standards  Sometimes  like TinyMCE   it s a lib that puts your content code inside a textarea tag  that is rendered by the editor as a big div tag  And sometimes  it may be an old version of these editors  I m supposing that   these not-programmers users don t have an open channel with the system admins  or institution s webdevs   to ask for including some CSS rules at the system s stylesheets  Actually  it would be impractical for the admins  or webdevs   considering the number of requests in that sense that they would have  this system is legacy and still doesn t support newer versions of HTML   In some cases  without use style rules  it may be a very poor design experience  So  yes  these users need customization  Okay  but what would be the solutions  in this scenario  Considering the different ways to insert CSS in a html page  I suppose these solutions   1st option  ask your sysadm Ask to your system adm for including some CSS rules at the system s stylesheets  This will be an external or internal CSS solution  As already said  it might be not possible   2nd option   lt link gt  on  lt body gt  Use external style sheet on the body tag  i e   use of the link tag inside the area you have access  that will be  on the site  inside the body tag and not in the head tag   Some sources says this is okay  but  quot not a good practice quot   like MDN   A  lt link gt  element can occur either in the  lt head gt  or  lt body gt  element  depending on whether it has a link type that is body-ok  For example  the stylesheet link type is body-ok  and therefore  lt link rel  quot stylesheet quot  gt  is permitted in the body  However  this isn t a good practice to follow  it makes more sense to separate your  lt link gt  elements from your body content  putting them in the  lt head gt    Some others  restrict it to the  lt head gt  section  like w3schools   Note  This element goes only in the head section  but it can appear any number of times   Testing I tested it here  desktop environment  on a browser  and it works for me  Create a file foo html   lt  DOCTYPE html gt   lt html gt   lt head gt  lt  head gt   lt body gt       lt link href  quot bar css quot  type  quot text css quot  rel  quot stylesheet quot  gt       lt h1 class  quot test1 quot  gt Hello lt  h1 gt       lt h1 class  quot test2 quot  gt World lt  h1 gt   lt  body gt   lt  html gt   And then a CSS file  at the same directory  called bar css   test1        color  green      Well  this will just looks possible if you have how upload an CSS file somewhere at the institution system  Maybe this would be the case   3rd option   lt style gt  on  lt body gt  Use internet style sheet on the body tag  i e   use of the style tag inside the area you have access  that will be  on the site  inside the body tag and not in the head tag   This is what Charles Salvia s and Sz s answers here are about  Choosing this option  consider their concerns   4th  5th and 6th options  JS ways Alert These ones are related to modifying the  lt head gt  element of the page  Maybe this will not be allowed by the institution s system administrators  So  it s recommended to ask them permission first  Okay  supposing permission granted  the strategy is access the  lt head gt   How  JavaScript methods  4th option  new  lt link gt  on  lt head gt  This is another version of the 2nd option  Use external style sheet on the  lt head gt  tag  i e   use of the  lt link gt  element outside the area you have access  that will be  on the site  not inside the body tag and yes inside the head tag   This solution complies with the recommendations of MDN and w3schools  as cited above  on 2nd option solution  A new Link object will be created  To solve the matter through JS  there are many ways but at the following codelines I demonstrate one simple  Testing I tested it here  desktop environment  on a browser  and it works for me  Create a file f html   lt  DOCTYPE html gt   lt html gt   lt head gt  lt  head gt   lt body gt       lt h1 class  quot test1 quot  gt Hello lt  h1 gt       lt h1 class  quot test2 quot  gt World lt  h1 gt       lt script gt             JS code here      lt  script gt   lt  body gt   lt  html gt   Inside the script tag  var newLink   document createElement  quot link quot    newLink href    quot bar css quot   newLink rel    quot stylesheet quot   newLink type    quot text css quot   document getElementsByTagName  quot head quot   0  appendChild newLink    And then at the CSS file  at the same directory  called bar css  as at the 2nd option    test1        color  green      As I already said  this will just looks possible if you have how upload an CSS file somewhere at the institution system  5th option  new  lt style gt  on  lt head gt  Use new internal style sheet on the  lt head gt  tag  i e   use of a new  lt style gt  element outside the area you have access  that will be  on the site  not inside the body tag and yes inside the head tag   A new Style object will be created  This is solved through JS  One simple way is demonstrated following  Testing I tested it here  desktop environment  on a browser  and it works for me  Create a file foobar html   lt  DOCTYPE html gt   lt html gt   lt head gt  lt  head gt   lt body gt       lt h1 class  quot test1 quot  gt Hello lt  h1 gt       lt h1 class  quot test2 quot  gt World lt  h1 gt       lt script gt             JS code here      lt  script gt   lt  body gt   lt  html gt   Inside the script tag  var newStyle   document createElement  quot style quot    newStyle innerHTML         quot h1 test1   quot            quot color  green  quot        quot   quot   document getElementsByTagName  quot head quot   0  appendChild newStyle    6th option  using an existing  lt style gt  on  lt head gt  Use an existing internal style sheet on the  lt head gt  tag  i e   use of a  lt style gt  element outside the area you have access  that will be  on the site  not inside the body tag and yes inside the head tag   if some exists  A new Style object will be created or a CSSStyleSheet object will be used  in the code of the solution adopted here   This is at some point of view risky  First  because it may not exists some  lt style gt   object  Depending of the way you implement this solution  you may get undefined return  the system may use external style sheet   Second  because you will be editing the system design author s work  authorship issues   Third  because it may not be allowed at your institution s IT politics of safety  So  do ask permission to do this  as at in other JS solutions   Supposing  again  permission was granted  You will need to consider some restrictions of the method available to this way  insertRule    The solution proposed uses the default scenario  and a operation at the first stylesheet  if some exists  Testing I tested it here  desktop environment  on a browser  and it works for me  Create a file foo bar html   lt  DOCTYPE html gt   lt html gt     lt head gt  lt  head gt     lt body gt       lt h1 class  quot test1 quot  gt Hello lt  h1 gt       lt h1 class  quot test2 quot  gt World lt  h1 gt       lt script gt           JS code here      lt  script gt     lt  body gt   lt  html gt   Inside the script tag  function demoLoop       remove this line     var elmnt   document getElementsByTagName  quot style quot        if  elmnt length     0               there isn t style objects  so it s more interesting create one         var newStyle   document createElement  quot style quot            newStyle innerHTML                quot h1 test1   quot                     quot color  green  quot                 quot   quot           document getElementsByTagName  quot head quot   0  appendChild newStyle         else              Using CSSStyleSheet interface         var firstCSS   document styleSheets 0           firstCSS insertRule  quot h1 test2 color blue   quot       at this way  without index specified   will be like an Array unshift   method            remove this too demoLoop       remove this too demoLoop       remove this too  Another approach to this solution it s using CSSStyleDeclaration object  docs at w3schools and MDN   But it may not be interesting  considering the risk to override existing rules on the system s CSS   7th option  inline CSS Use inline CSS  This solve the problem  although depending of the page size  in code lines   the maintenance  by the author itself or other assigned person  of code can be very difficult  But depending of the context of your role at the institution  or its web system security policies  this might be the unique available solution to you  Testing Create a file  foobar html   lt  DOCTYPE html gt   lt html gt     lt head gt  lt  head gt     lt body gt       lt h1 style  quot color  green  quot  gt Hello lt  h1 gt       lt h1 style  quot color  blue  quot  gt World lt  h1 gt         lt  body gt   lt  html gt    Answering strictly the question asked by Gagan  How is a browser supposed to render css which is non contiguous   Is it supposed to generate some data structure using all the css styles on a page and use that for rendering  Or does it render using style information in the order it sees     quote adapted  For a more accurate answer  I suggest Google these articles   How Browsers Work  Behind the scenes of modern web browsers Render-tree Construction  Layout  and Paint What Does It Mean To    Render    a Webpage  How browser rendering works     behind the scenes Rendering - HTML Standard 10 Rendering     HTML5

User · Answer

Not valid HTML  anyway pretty much every browser seems to consider just the second instance   Tested under the last versions of FF and Google Chrome under Fedora  and FF  Opera  IE  and Chrome under XP

User · Answer

Because this is HTML is not valid does not have any affect on the outcome     it just means that the HTML does adhere to the standard  merely for organizational purposes    For the sake of being valid it could have been written this way    lt html gt   lt head gt   lt style type  text css  gt    p first  color blue    p second  color green   lt  style gt   lt  head gt   lt body gt   lt p class  first  style  color green   gt Hello World lt  p gt   lt p class  second  style  color blue   gt Hello World lt  p gt       My guess is that the browser applies the last style it comes across

User · Answer

I guess this will vary from browser to browser  The global display rules will probably be updated as the browser goes along through the code   You can see such changes in the global display rules sometimes when an external style sheet is loaded with a delay  Something similar might happen here but in such short succession that it doesn t actually get rendered   It s not valid HTML anyway  so I d say that it is a futile thing to think about   lt style gt  tags belong in the head section of the page

User · Answer

When I see that the big-site Content Management Systems routinely put some  lt style gt  elements  some  not all  close to the content that relies on those classes  I conclude that the horse is out of the barn   Go look at page sources from cnn com  nytimes com  huffingtonpost com  your nearest big-city newspaper  etc   All of them do this   If there s a good reason to put an extra  lt style gt  section somewhere in the body -- for instance if you re include  ing diverse and independent page elements in real time and each has an embedded  lt style gt  of its own  and the organization will be cleaner  more modular  more understandable  and more maintainable -- I say just bite the bullet   Sure it would be better if we could have  local  style with restricted scope  like local variables  but you go to work with the HTML you have  not the HTML you might want or wish to have at a later time   Of course there are potential drawbacks and good  if not always compelling  reasons to follow the orthodoxy  as others have elaborated  But to me it looks more and more like thoughtful use of  lt style gt  in  lt body gt  has already gone mainstream

User · Answer

As others have already mentioned  HTML 4 requires the  lt style gt  tag to be placed in the  lt head gt  section  even though most browsers allow  lt style gt  tags within the body    However  HTML 5 includes the scoped attribute  see update below   which allows you to create style sheets that are scoped within the parent element of the  lt style gt  tag   This also enables you to place  lt style gt  tags within the  lt body gt  element    lt  DOCTYPE html gt   lt html gt   lt head gt  lt  head gt   lt body gt    lt div id  scoped-content  gt       lt style type  text css  scoped gt          h1   color  red          lt  style gt        lt h1 gt Hello lt  h1 gt   lt  div gt        lt h1 gt        World      lt  h1 gt    lt  body gt   lt  html gt    If you render the above code in an HTML-5 enabled browser that supports scoped  you will see the limited scope of the style sheet     There s just one major caveat     At the time I m writing this answer  May  2013  almost no mainstream browser currently supports the scoped attribute    Although apparently developer builds of Chromium support it    HOWEVER  there is an interesting implication of the scoped attribute that pertains to this question   It means that future browsers are mandated via the standard to allow  lt style gt  elements within the  lt body gt   as long as the  lt style gt  elements are scoped    So  given that    Almost every existing browser currently ignores the scoped attribute Almost every existing browser currently allows  lt style gt  tags within the  lt body gt  Future implementations will be required to allow  scoped   lt style gt  tags within the  lt body gt       then there is literally no harm   in placing  lt style gt  tags within the body  as long as you future proof them with a scoped attribute   The only problem is that current browsers won t actually limit the scope of the stylesheet - they ll apply it to the whole document   But the point is that  for all practical purposes  you can include  lt style gt  tags within the  lt body gt  provided that you    Future-proof your HTML by including the scoped attribute Understand that as of now  the stylesheet within the  lt body gt  will not actually be scoped  because no mainstream browser support exists yet       except of course  for pissing off HTML validators        Finally  regarding the common  but subjective  claim that embedding CSS within HTML is poor practice  it should be noted that the whole point of the scoped attribute is to accommodate typical modern development frameworks that allow developers to import chunks of HTML as modules or syndicated content   It is very convenient to have embedded CSS that only applies to a particular chunk of HTML  in order to develop encapsulated  modular components with specific stylings     Update as of Feb 2019  according to the Mozilla documentation  the scoped attribute is deprecated   Chrome stopped supporting it in version 36  2014  and Firefox in version 62  2018    In both cases  the feature had to be explicitly enabled by the user in the browsers  settings   No other major browser ever supported it

User · Answer

In your example  a browser isn t  supposed  to do anything  The HTML is invalid  Either error recovery is triggered  or the parser makes of it as it will   In a valid instance  multiple stylesheets are just treated as appearing one after the other  the cascade is calculated as normal

User · Answer

Yes it can  I checked on Mozilla s page   https   developer mozilla org en-US docs Web HTML Element style

[html] Using <style> tags in the <body> with other HTML

Examples related to html

Examples related to css