Skip to main content

About Author

My photo
Alex George
Alex George has Engineering graduation in Computer Science and an MBA in Finance. He had been working as a senior Network Engineer for ten years. His specialization is in Cisco products. Traveling is one of his hobbies and visited various places as part of his onsite work. He visited different places as part of his onsite work like New York, Dubai, London, etc. Right now Alex is a director of one of the leading career development firms in India, which trains students for UPSC, SSC, and PSC examinations. He guides a lot of students to get selection for various prestigious institutions like CBI, Income Tax Department, etc. Alex George is a stock market investor and a very active intraday trader. Engineering Background: He has a B.Tech in Computer Science and Engineering and passed different network and security courses like CCNA, CCNP (Security), CEH, and various Microsoft certifications. Finance Background: Alex has an MBA in Finance. He is an active intraday trader and a Share Market Investor. Webmaster Skills: Alex is a blogger since 2004. He has a working knowledge of HTML, CSS, PHP, and JavaScrip.

Error: Element Style is Missing Required Attribute Scoped

A professional web developer always ensures if his website has any HTML error before delivering it to the client. I do it once the coding is finished. This post explains one error code I received while validating the HTML code. As I progress HTML validation with my websites, I met a new error "Error: Element style is missing required attribute scoped". Validator showed the lines where this error present. While checking the code I found the following lines.

<style >
    blockquote
         {
         clear: both;
         font-style: italic;
         margin-left: 10px;
         margin-right: 10px;
         position: relative;
         border: 0px;
         font-size: 20px;
         line-height: 200%;
         font-weight: light;
         width: 100%;
         font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
         text-align: center;
         }
    </style>


The screenshot of the error message is shown below.



<style> is considered as part of CSS and anything written in it will be applied to the whole document. However, if we use the attribute scoped, the style applies only to its parent element. To read more about it, you can visit the Mozilla Developer site using the link below.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style


Though scoped attribute is very helpful, not every browser support it right now. At this time only the latest versions of Mozilla Firefox is supporting scoped attribute. But there is a good method to override this defect by using: scope. Using: scope instead of scope we can avoid the risk of applying the special style to entire document in unsupported browsers.


Fix

I have fixed the HTML validation error by adding the scoped attribute to the style. Once the code is updated, the error message is gone. The new style is given below.
<style scoped>
         blockquote
         {
         clear: both;
         font-style: italic;
         margin-left: 10px;
         margin-right: 10px;
         position: relative;
         border: 0px;
         font-size: 20px;
         line-height: 200%;
         font-weight: light;
         width: 100%;
         font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
         text-align: center;
         }
      </style>

As I explained above, right now this code is error free but will work on Firefox (latest versions) only. For any unsupported browsers, this style will be applied to the whole document. To solve that issue, I should rewrite the code as below.

<style scoped>
    :scope blockquote
         {
         clear: both;
         font-style: italic;
         margin-left: 10px;
         margin-right: 10px;
         position: relative;
         border: 0px;
         font-size: 20px;
         line-height: 200%;
         font-weight: light;
         width: 100%;
         font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
         text-align: center;
         }
 </style>

Related Tutorials
  1. Element div not Allowed As Child of Element Span in this Context

  2. Validating user input in PHP input Forms

  3. Problems With Receiving Emails On ZOHO Mail

  4. Warning: Invalid Argument Supplied For foreach()

Comments

Recent Comments

Archive

Show more