Source file extensions: .css

Import from Javascript/Typescript

Import globally

import './style.css';
import 'https://web.site/style.css';

This form will transform the css file in a ES Module that append the css style in a <style> tag in the <header> of the page. In consequence, the styles will be applied globally to the host page.

Import as a CSSStyleSheet

import style from './style.css';
import style2 from 'https://web.site/style2.css';

This form will create a CSSStyleSheet for use with adoptedStylesheets in ShadowDOM (or not). See references for more details.

Import as a CSS Module

If the imported file ends with .module.css, then it's imported as a CSS Module .

/* index.js */
import styles from `./style.module.css`;
element.innerHTML = '<div class="' + styles.className + '">';
/* style.module.css */
.className {
  color: green;


Quick example


strong {
  color: red;

div.menu-bar li:hover > ul {
  display: block;