Style The Cascading Style Sheets
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Welcome to STCSS - Style The Cascading Style Sheets!

STCSS is a new standard for formatting CSS. It indents your CSS selectors based on your DOM making it easy for developers to read and know how each CSS selector is nested.

How does it work?

STCSS is now in Beta. Live Demo

  • Download the project
  • Launch index.html in any browser
  • Either paste your HTML in the HTML box or start typing

Tada, your CSS is created live and indented according to your DOM.

STCSS Formatting

You can develop your own CSS based on STCSS formatting by using the same indentation as your HTML.

HTML example:

<section id='wrapper'>
    <header id='header'>
        <h1 id='header-h1'>
            <a class='link' href='#'>Style the Styles</a>
        <div id='header-slogan'></div>

Would be written:

#wrapper {}
    #header {}
        #header-h1 {}
            .link {}.link:hover {}.link:before {}
        #header-slogan {}