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

AI August 28, 2025

Beauty in Shuffle: 5 Landing Pages Built by AI

Shuffle has received a massive AI update focused on design quality. Shuffle AI can now create more stunning landing pages from even the simplest prompts. You are only limited by your imagination! Here are a few examples of what you can build with Shuffle AI: ❶ Avant-garde Editorial Magazine Prompt: Design a landing page in the […]

Benedykt Michalski

Inspirational Writer

Next.js August 5, 2025

Shuffle Embraces Next.js as Default React Export Format

Big news for React developers: Shuffle is now making Next.js the default export format for React applications. This move marks a significant evolution in how Shuffle’s visual web editor supports modern React development.

Benedykt Michalski

Inspirational Writer

AI July 2, 2025

Smarter Shuffle: 5 Cool Apps Built by AI

Shuffle has received an enormous AI update, and now you can build web apps with advanced logic. You are only limited by your imagination!

Benedykt Michalski

Inspirational Writer

© 2022 Shuffle. All rights reserved.