ECStyleSheet

A client-side styling engine that doesn't require extra CSS files.

How to Import & Use

1. Add the script to your HTML inside the <head> element:

<head>
    <script src="https://inpsstudio.com/js/ECStyleSheet.js"></script>
</head>

2. Use utility style classes directly in your HTML elements:

<p class="backgroundColor-blue color-white padding-10px hover:opacity-0.8">Styled Element</p>

1. Basic Property Styling

Use standard CSS properties mapped to class names. Spaces are written as underscores (_).

class="backgroundColor-#007bff color-white padding-15px borderRadius-8px fontWeight-bold textAlign-center"

2. Hover & State Modifiers

Prefix classes with pseudo-selectors like hover:.

3. Responsive Breakpoints

Resize your screen width. (Note: Put larger breakpoints first in your class list so smaller media queries correctly override them):

Default View (Gray) / Tablet <= 1024px (Yellow) / Mobile <= 768px (Red)

4. Dynamic Class Injection

The observer automatically registers and generates styles for classes injected at runtime via JavaScript.

This box has no custom background/text styles until you click the button above.