Skip to main content

CSS

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. It controls layout, colors, fonts, and the overall visual appearance of web pages.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, LiveCodes!</h1>\n  <p>This is styled with <strong>CSS</strong>.</p>\n  <ul>\n    <li>Flexible</li>\n    <li>Powerful</li>\n    <li>Beautiful</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n  border-radius: 8px;\n  background: #f0f4f8;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\nh1 {\n  color: #2d3748;\n}\n\np {\n  color: #4a5568;\n  line-height: 1.6;\n}\n\nul {\n  list-style: none;\n  padding: 0;\n  display: flex;\n  gap: 1em;\n}\n\nli {\n  background: #3182ce;\n  color: white;\n  padding: 0.5em 1em;\n  border-radius: 4px;\n}\n"
    }
  }
};
createPlayground('#container', options);

Usage​

CSS code added to the style editor is added as-is without any compilation to the result page.

There is no need to add a full page structure (e.g. <html>, <head>, <link>, <style> tags). LiveCodes handles this automatically.

For more details about CSS support in LiveCodes, including CSS processors, style imports, CSS modules, and CSS frameworks, see the CSS feature documentation.

CSS Processors​

The CSS code can be further processed by one or more CSS processors. These include:

See CSS Processors for details.

Auto-update​

When autoupdate is enabled (default), changes in the style editor do NOT trigger a full reload of the result page. The updated CSS 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.

Style Imports​

CSS @import rules with bare module specifiers are resolved to full CDN URLs. See Style Imports for details.

Language Info​

Name​

css

Extensions​

.css

Editor​

style

Compiler​

None. CSS is added to the result page without compilation.

Code Formatting​

Using Prettier.

Sponsors