DEV Community

Cover image for HTML tags | style
Carlos Espada
Carlos Espada

Posted on • Updated on

HTML tags | style

It is used to assign styles to the document or to a part of it. Inside it will contain CSS that will define how HTML elements are rendered in a browser.

It must go inside <head>. It is generally better to put styles in external style sheets and link them using the <link> element.

Like the <link> element, the <style> element can include media attributes that contain media queries to allow you to selectively apply styles based on certain characteristics such as the width of the viewport.

It can have several attributes:

  • type: defines the style language as a MIME type (the charset must not be specified). This attribute is optional and its default value is text/css (it cannot have any other value than that or empty string). In modern web documents there is no reason to use it.
  • media: defines to which media the style should be applied. Its value is a media query whose default value is all.
  • nonce: a cryptographic nonce (number used once) used to whitelist inline styles in a style-src Content-Security-Policy. The server must generate a unique nonce value each time it broadcasts a policy. It is essential to provide a nonce that cannot be guessed, otherwise bypassing the policy of a resource is very easy.
  • title: specifies a name so that you can use alternate style sheets.

If multiple <style> and <link> elements are included to external style sheets in the same document, they will be applied to the HTML document in the order in which they have been included, so it is important to take this into account to avoid unwanted effects.

  • Type: none
  • Self-closing: No
  • Semantic value: No

Definition and example | Support

Top comments (0)