DEV Community

Cover image for HTML tags | style
Carlos Espada
Carlos Espada

Posted on • Edited on

3

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more