Blog homepage » Entry
Bootstrap December 23, 2019

Three ways to change CSS styles.

Benedykt Michalski

Inspirational Writer

In this mini-tutorial, I’ll show you how to use three functions to change background color in your project. The background color is just an example, and you can change other properties in the same way.

This description applies to three editors, Bootstrap Shuffle, Bulma Builder, and Tailwind Builder. The screens come from Bootstrap Shuffle but are so readable that you will easily find the same functions in the editor you are using.

Note: The last method (Custom CSS) is a new feature, that’s why I created this mini-tutorial 🙂

1. Visual panel with convenient pickers.

The easiest way to change your style is simply to find the right option in the variable settings of the CSS framework.

Using Color Picker to change background color.

You can use a search bar for this.

Searching for framework variables.

2. HTML Structure

The second method is to add the appropriate CSS class to the body element. You can do this in the HTML Structure panel.

To open it:

  1. Hover over the component you want to edit.
  2. Click the “Content” icon.
  3. Go to the “HTML Structure” tab
The HTML Structure panel.

Note: Each component you are editing has an additional “Parents” section, which includes a body element and a global wrapper.

You need a good knowledge of the CSS framework classes, but for ease of use, we have auto-completion, which will tell you the name of the class you are looking for.

Suggesting CSS classes.

You can read more about this panel here: “Using advanced editor functions to modify CSS classes“.

3. Custom CSS

We have made it possible to add your CSS code, so you can simply add a code that will change the background color for the body. Of course, you can create your CSS classes here and then add them in the HTML Structure panel (see step 2).

Using new panel to write your own CSS.

Note: Please use the Save button to save the CSS code. All other changes made in steps 1 and 2 are saved automatically. The CSS code can be so large that the autosave would be very inefficient (every time we save the changes, we have to recompile the framework to CSS).

Try it yourself: Bootstrap Shuffle

Related blog posts

Shuffle June 26, 2025

Best UI Libraries of 2025 by Shuffle

In today’s fast-paced development environment, selecting the right UI library can significantly impact your project timeline. Shuffle offers over 80 professionally designed UI libraries with 13,200+ beautiful UI components.

Benedykt Michalski

Inspirational Writer

Cursor June 19, 2025

Shuffle and Cursor, how to use beautiful UI components directly from desktop IDE

Shuffle and Cursor are a powerful combination for great-looking and functional websites. It will effortlessly elevate your designs!

Benedykt Michalski

Inspirational Writer

Cursor May 12, 2025

AI Website Generation — Alternative to Cursor, Lovable, and Windsurf, focused on UI

Shuffle can now create page structure, sections, content (text, images), and a logo from a simple prompt.

Benedykt Michalski

Inspirational Writer

© 2022 Shuffle. All rights reserved.