SQL styles
UPDATE styles
SET background = '#23054d',
color = 'white',
"font-size" = 'large',
padding = '16px',
"font-family" = '"Raleway", sans-serif',
"line-height" = '1.6'
WHERE element = 'body';
UPDATE styles SET color = '#F73D93' WHERE element = 'a';
UPDATE styles SET color = '#7AF2DF' WHERE class = 'highlight';
UPDATE styles
SET border = '1px solid gray',
"border-radius" = '4px'
WHERE element = 'code';
CSS output
⚠ Transpiling error
body {
background: #23054d;
color: white;
font-size: large;
padding: 16px;
font-family: "Raleway", sans-serif;
line-height: 1.6;
}
a {
color: #F73D93;
}
.highlight {
color: #7AF2DF;
}
code {
border: 1px solid gray;
border-radius: 4px;
}
▶
<!-- No need to add <document>, <html> or <head> -->
<!-- The HTML in this box will be added directly into <body> of the demo -->
<div><span class="highlight"><---</span> The style of this very page is here!</div>
<h3 class="highlight">How to use this playground</h3>
<ul>
<li>Edit the styles in <code>SQL STYLES</code> box on the left.
Check out the <a href="documentation.html" target="_blank">SQSS syntax</a></li>
<li>Click on the <code>HTML CODE</code> tab above to edit the HTML</li>
<li>Finally, click the <code>RUN</code> button at the top right conner</li>
<li>The compiled CSS is in the bottom left box</li>
<li>Now switch to the <code>RESULT</code> tab above to see the styled document</li>
</ul>
<br />
<p><a><---</a> Drag the bottom right conner here to resize the editors</p>