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

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

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay