CSS: Cascading Style Sheets

Source file extensions: .css

Import in 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 adoptedStylesheet in ShadowDOM (or not). See references for more details.

References

• CSS: Cascading Style Sheets
• Constructible Style Sheets
• Adopt a Design System inside your Web Components with Constructable Stylesheets

Quick example

style.css

strong {
  color: red;
}

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