Getting Started

Get started with Master CSS

Master CSS is a markup-driven CSS language with smart rules allowing you to write familiar CSS using concise syntax within HTML.

Copy and paste CDNs to instantly launch the runtime engine in your browser out of the box.

Start in one step

Copy and paste to start styling your first element with Master CSS!

<!DOCTYPE html>
<html lang="en" style="display: none">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preload" as="script" href="">
<link rel="preload" as="style" href="">
<link rel="stylesheet" href="">
window.masterCSSConfig = {
variables: {
primary: '#000000'
<script src=""></script>
<h1 class="fg:primary font:40 font:heavy italic m:50 text:center">Hello World</h1>

Open your browser to watch the changes.


Hello World

Get stuck? Check out our web framework or build tool guides for better starting points and recommendations.

Language Service for Master CSS

Enhanced Master CSS development experience, including syntax highlighting, code completion, syntax rule preview, and more.

MIT License © Aoyue Design LLC.