# CSS
import LiveCodes from '../../src/components/LiveCodes.tsx';
The [result page](./result.html.md) can be styled with CSS using various methods, including:
## Style Editor
Code added to [style editor](./projects.html.md)#style-editor) is [compiled](#languages) and [processed](#css-processors), then added as CSS to the [result page](./result.html.md) `head` element.
### Languages
LiveCodes supports multiple languages that compile to CSS, including [SCSS](../languages/scss.html.md), [Sass](../languages/sass.html.md), [Less](../languages/less.html.md) and [Stylus](../languages/stylus.html.md). Code authored in any of these languages is compiled to CSS before being added to the [result page](./result.html.md).
The style language can be selected from the style editor menu. In embedded playgrounds, the language can be configured via the configuration object property [`style.language`](../configuration/configuration-object.html.md)#style)
### CSS Processors
The (compiled) CSS code can be processed by one or more of the supported CSS processors. Examples of these include: [Autoprefixer](../languages/autoprefixer.html.md), [postcss-preset-env](../languages/postcssPresetEnv.html.md), [Lightning CSS](../languages/lightningcss.html.md), [CSS Modules](../languages/cssmodules.html.md), [cssnano](../languages/cssnano.html.md), ...etc.
Multiple CSS processors can be enabled at the same time. The code is processed in the order of processors placed in the style editor menu of the app.
Processors are enabled in the [standalone app](../getting-started.html.md)#standalone-app) from the style editor menu, by switching on the toggles of the required processors.
In embedded playgrounds, processors are enabled via the [`processors`](../configuration/configuration-object.html.md)#processors) property of the [configuration object](../configuration/configuration-object.html.md).
### Style Imports
[Bare modules](./module-resolution.html.md)#bare-module-imports) used with `@import` rules are supposed to be npm modules. These are converted to [full URLs from CDN](./module-resolution.html.md)#cdn-providers).
#### Example
This code:
```css
@import 'github-markdown-css/github-markdown.css';
```
becomes:
```css
@import 'https://unpkg.com/github-markdown-css/github-markdown.css';
```
Packages that specify a stylesheet as the main module can be imported like that:
```css
@import 'github-markdown-css';
```
demo:
The content can be inlined in the compiled CSS by enabling the processor [postcss-import-url](../languages/postcssImportUrl.html.md).
### Compiled CSS
Compiled CSS (following compilation of style language, and all enabled processors) is added to the [result page](./result.html.md) `head` element.
The compiled code can be inspected in the [compiled code viewer](./compiled-code.html.md) in the [tools pane](./tools-pane.html.md).
### Auto-update
When [`autoupdate`](../configuration/configuration-object.html.md)#autoupdate) is enabled (default), in contrast to [markup editor](./projects.html.md)#markup-editor) and [script editor](./projects.html.md)#script-editor), changes in style editor code does NOT trigger a full reload of the [result page](./result.html.md). The updated CSS code is sent to the page and applied without a reload.
The page can be force-reloaded by clicking the run button or using the keyboard shortcut: Shift + Enter.
## External Resources
External stylesheets can be added in [external resources](./external-resources.html.md) screen. These are added to the [result page](./result.html.md) before the compiled style editor code. This allows code in style editor to override CSS properties in external stylesheets.
External stylesheets can be added to embedded playgrounds using the [configuration object](../configuration/configuration-object.html.md) property [`stylesheets`](../configuration/configuration-object.html.md)#stylesheets).
## CSS Presets
CSS presets like [Normalize.css](https://necolas.github.io/normalize.css/) and [Reset CSS](https://meyerweb.com/eric/tools/css/reset/) can be selected in [external resources](./external-resources.html.md)#css-presets) screen.
## Stylesheets Imported in Script Editor
### External Stylesheets
CSS stylesheets imported in the script editor are added to the [result page](./result.html.md) `head` element. _The URL has to end with **`.css` extension**_.
For example, adding this in the script editor (JavaScript):
```js
import 'https://unpkg.com/github-markdown-css/github-markdown.css';
```
adds this to the page `head`:
```html
```
Currently, compiling imported stylesheets (e.g. SCSS) is not supported.
Similar to [imports in style editor](#style-imports), bare imports are converted to full URLs from CDN.
For example:
```js
import 'github-markdown-css/github-markdown.css';
```
becomes:
```html
```
### `./style.css`
Importing the URLs (`./style.css` or `./styles.css`) gets the style editor compiled/processed CSS **string** as the module's default export.
Example:
```js
import styles from './style.css';
console.log(styles); // => compiled CSS as string
```
## CSS Modules
CSS modules are supported and are [documented separately](../languages/cssmodules.html.md).
## CSS Frameworks
Multiple CSS frameworks are supported including [Tailwind CSS](../languages/tailwindcss.html.md), [UnoCSS](../languages/unocss.html.md) and [WindiCSS](../languages/windicss.html.md).
## Styles in Markup & Script
Of course, styles and stylesheets can still be added as usual in markup and script editors (via HTML elements and/or DOM).
## Related
- [Projects](./projects.html.md)
- [External resources](./external-resources.html.md)
- [Module resolution](./module-resolution.html.md)