How to Use ChatGPT to Write Custom CSS for Rise Blocks

With Mighty Studio, you can easily design super custom interactive templates simply by prompting the AI you already use, like ChatGPT. But sometimes all you need to make is a targeted CSS code modification to a preexisting (or Studio-imported) block. For those moments, you can use Mighty’s Custom Code block.

🚀 Make Your Rise Courses Stand Out with ChatGPT + Mighty!

The basic idea#

Rise outputs HTML for every lesson and block. You can inspect that HTML in Chrome, copy only the part you care about, and ask ChatGPT to suggest CSS for a specific visual change.

Then Mighty gives you a place to add that CSS to your Rise course so the change can persist when you preview and publish.

It’s important to be as specific as possible. ChatGPT does much better when you give it:

• The exact HTML for the block area you want to alter
• A clear description of what should change
• A reminder that you can only add CSS, not edit the HTML

That last point is key because Rise controls the HTML structure. In this workflow, you’re styling what Rise already gives you.

Before you start#

You’ll need:

• A Rise 360 course open in Chrome
• The Mighty Chrome extension installed
• Access to ChatGPT
• A block you want to adjust visually

You’ll also want to test your CSS before saving it into Mighty. Chrome’s Inspect tools let you do that quickly, which is helpful because ChatGPT can be surprisingly good—and occasionally very weird, especially if you’re using a lower model after hitting a free-plan limit.

Case Study 1: Making timeline media appear in a consistent order#

In the video walkthrough, John starts with a Rise Timeline block that uses two different media types inside events:

• One event has an embedded YouTube video
• Another event uses a normal image from the Rise library

Rise displays those differently. The embedded YouTube video appears above the description, while the image appears below it.

If you want each timeline card to follow the same pattern—date, title, description, then media—custom CSS can help.

1. Open Inspect on the timeline card

In your Rise lesson, find the Timeline block.

Right-click the part of the timeline card you want to adjust and choose Inspect. Chrome opens the Elements panel and highlights the HTML for the area you clicked.

Now move your cursor up through the surrounding HTML elements until the page highlight includes the full section you care about, but not extra blocks or unrelated content.

In the video, the useful wrapper is the timeline card area—specifically the timeline-card__main section.

The goal is to copy a small, relevant slice of HTML. Too much HTML can confuse ChatGPT and lead to a less useful answer.

2. Copy the element HTML

Once you’ve selected the wrapper that contains the date, title, description, and media, right-click that element in the Inspect panel and choose Copy > Copy element.

Now you have the actual Rise HTML for that timeline card.

3. Prompt ChatGPT with the specific change

Paste the HTML into ChatGPT with a clear request. John’s prompt follows this structure:

I have some HTML that I’d like for you to create some CSS for. In this example, I have four items that I want to rearrange. Specifically, I want to move the YouTube video to the bottom of this timeline card. Can you help? Here is the HTML.

Then paste the copied HTML below it.

ChatGPT suggested a CSS approach using flexbox on the card’s main container, then assigning an order to each item: date, event title, description, and embedded media.

That’s a reasonable approach for this kind of layout issue because flexbox can visually reorder elements without changing the underlying HTML.

4. Test the CSS in Chrome first

Before adding anything to Mighty, test the CSS in the browser.

In the Chrome Inspect panel, click the + button to create an inspector stylesheet. Paste ChatGPT’s CSS into that temporary stylesheet.

You should see the Rise block update immediately in the browser.

In the timeline example, the order now looks right: Date, title, description, YouTube embed or image

This is the moment to inspect the details. In the video, the description felt a little tight against the embedded YouTube video, and the image had gained extra spacing underneath.

5. Give ChatGPT design feedback

Instead of manually fussing with every value, go back to ChatGPT and describe what still needs work:

Yep, this was perfect. Can you add some padding between the description and the YouTube video, but then also remove the space after that video?

ChatGPT suggested adjusting the description’s bottom margin to 20px and setting the media’s bottom margin to 0.

That’s the right kind of iteration: start with structure, test it, then refine spacing.

6. Save the CSS in Mighty Custom Code

Once the CSS works in the temporary inspector stylesheet, copy the final CSS.

Then in Rise:

1. Go back to the course Theme area.
2. Open Custom Code through Mighty.
3. Find the CSS section.
4. Paste your tested CSS.
5. Save the change.
6. Preview the course.

In preview, navigate back to the lesson with the Timeline block and confirm that the layout holds.

Case Study 2: Flip a quote block and crop the image to a circle#

The second example uses a Rise Quote block with a person’s image on the left and the quote text on the right.

The desired changes are more visual:

• Move the quote text to the left
• Move the image to the right
• Crop the image into a circle
• Remove the large background quote mark

The workflow is the same, but this example shows why your prompt needs one extra guardrail.

1. Copy only the quote block HTML

Right-click the quote block and open Inspect.

Hover through the HTML structure until you find the wrapper that contains the quote text and image. In the video, the relevant element is the quote block’s figure area—the quote-block__figure section.

Right-click that element and choose Copy > Copy element.

2. Tell ChatGPT what you want—and what you can’t change

John initially asks ChatGPT to flip the order, crop the image to a circle, and remove the background quote mark.

ChatGPT responds with updated HTML and CSS.

That’s not what we want here.

Because Rise owns the HTML, the better follow-up is simple:

We can’t update the HTML.

After that, ChatGPT shifts to a CSS-only solution.

This is a helpful thing to know: if ChatGPT gives you new HTML, tell it you need CSS that works with the existing HTML structure.

3. Test the CSS in the inspector stylesheet

Paste ChatGPT’s CSS into the inspector stylesheet.

For the quote layout, ChatGPT suggests another flexbox-based approach—this time reversing the direction of the quote block container so the image moves to the right and the quote text moves to the left.

It also suggests using border-radius: 50% to make the image circular.

That part works well. A 50% border radius is the standard CSS move for turning a square image into a circle, assuming the image is displayed in a square container.

4. Clean up unnecessary CSS

ChatGPT also suggests height and width values for the avatar image. In the video, those values don’t appear to do much, so John removes them. Remember, you don’t have to keep every line ChatGPT gives you.

If you’re testing in Chrome, you can comment out a selected CSS line with:

• Command + / on Mac
• Control + / on Windows

If nothing changes visually, the rule may not be needed.

5. Be ready to chase pseudo-elements

The background quote mark is trickier.

In the video, the generated CSS doesn’t remove it immediately. Looking through Inspect reveals that the quote mark is coming from a ::before pseudo-element attached to the quote block figure.

That’s a very normal CSS debugging moment. Some visual pieces in Rise blocks may not exist as regular HTML elements; they may be created with ::before or ::after styles.

If ChatGPT’s first attempt misses something like that, use Inspect to identify where the visual element is coming from, then feed that detail back into your prompt.

A few prompt tips that make this work better#

You don’t need to write developer-perfect prompts. But you do need to be clear.

A good prompt for this workflow usually includes:

• “I have some HTML from an Articulate Rise block.”
• “Please write CSS only.”
• “Do not change the HTML.”
• “I want to rearrange these items in this order…”
• “Here is the HTML.”

For example:

I have some HTML from an Articulate Rise block. Please write CSS only; I cannot edit the HTML.

I want the items in this card to display in this order:
1. Date
2. Title
3. Description
4. Media

Please keep the CSS as targeted as possible so it only affects this block structure. Here is the HTML:

Then paste the copied element.

The phrase “as targeted as possible” is worth including. Broad CSS can accidentally affect other Rise blocks that use similar classes or structures.

Why this matters#

Rise is great because it gives you structured blocks with sensible defaults. And now, with Mighty Studio, you can create brand new custom interactions in additional to those reliable standard blocks. But every now and then, you need to make some small tweaks, like when:

• Brand standards call for a specific image treatment
• Stakeholders want a layout to match a previous course
• Accessibility reviews flag spacing or visual clarity issues
• Mixed media types don’t line up the way you expected

Native Rise doesn’t give you a visual control for every one of those details. Mighty’s Custom Code gives you a place to apply carefully tested CSS when you need that extra layer of control.

The key word here is carefully. Test in Inspect first, preview in Rise, and make sure the change still behaves well across the lesson—especially if the same block type appears multiple times.

The takeaway#

You don’t have to become a developer to make thoughtful CSS tweaks in Rise. Copy the right HTML, ask ChatGPT for CSS only, test it in Chrome’s inspector stylesheet, then save the working version in Mighty Custom Code.

Try it on one small block adjustment first—something like timeline ordering or quote image styling—and build from there.