How to Use ChatGPT to Write Custom CSS for Rise Blocks
A practical workflow for using Inspect, ChatGPT, and Mighty Custom Code to adjust Rise blocks without becoming a developer.
With Mighty Studio, you can build custom layouts and interactive templates using the AI you already use, like ChatGPT. But sometimes you don’t need a new block—you just want to adjust one that’s already in your Rise course.
Maybe the media in a timeline isn’t lining up the way you want, or a quote block needs a different image treatment. For those targeted changes, Mighty’s Custom Code feature gives you a place to add CSS that styles existing Rise blocks.
The basic idea#
Rise outputs HTML for every lesson and block. You can inspect that HTML in Chrome, copy the part you care about, and ask ChatGPT to suggest CSS for a specific visual change.
Then Mighty gives you a place to save that CSS in your Rise course.
Be as specific as possible. Give ChatGPT:
- The HTML for the block area you want to alter
- A clear description of what should change
- A reminder that you need CSS only, without changes to the HTML
That last point matters because this workflow styles the structure Rise already provides.
Before you start#
You’ll need:
- A Rise 360 course open in Chrome
- The Mighty Chrome extension installed and enabled
- Access to ChatGPT
- An existing Rise block you want to adjust visually
Check the block’s native settings first. If Rise already offers a control for the change you want, that’s usually the simplest place to start.
For changes beyond those settings, Chrome’s Inspect tools let you test CSS before saving it in Mighty. Those temporary edits disappear when the page reloads, making Inspect a useful place to experiment.
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 an image from the Rise library
In the recorded example, the 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.
Move your cursor through the surrounding HTML elements until the page highlight includes the full section you care about, without extra blocks or unrelated content.
In the video, the useful wrapper is the timeline card area—specifically the timeline-card__main section. Rise’s markup can change over time, so inspect your current block rather than assuming its structure will be identical.
The goal is to copy a small, relevant slice of HTML.
2. Copy the element HTML
Once you’ve selected the wrapper containing the date, title, description, and media, right-click that element in the Inspect panel and choose Copy > Copy element.
Now you have the 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.
In the video, ChatGPT suggests using flexbox on the card’s main container, then assigning an order to each item.
Flexbox can change the visual order without changing the underlying HTML. That also means the reading order used by assistive technology may stay the same. When reordering content, check that the visual layout, screen-reader order, and keyboard navigation still make sense together.
4. Test the CSS in Chrome first
Before adding anything to Mighty, test the CSS in the browser.
In Chrome’s Elements panel, use the + button in the Styles pane to create a new style rule. Open the associated inspector stylesheet to paste additional rules as needed.
You should see the block update if the CSS targets the correct elements.
Check more than the order. In the timeline example, the description feels tight against the YouTube video, and the image gains extra spacing underneath.
5. Give ChatGPT design feedback
Go back to ChatGPT and describe what still needs work:
The order looks right. Please add 20px of space between the description and the media, and remove the extra space below the media. Keep the solution CSS-only.
In the video, ChatGPT adjusts the description’s bottom margin and removes the media’s bottom margin.
Start with the layout, test it, then refine the spacing.
6. Save the CSS in Mighty Custom Code
Once the CSS works in your temporary inspector stylesheet, copy the final version.
Then in Rise:
- Go to the course Theme area.
- Open Custom Code through Mighty.
- Choose the scope that fits your change: the relevant block, lesson, or entire course.
- Find the CSS section and paste your tested CSS.
- Save the change.
- Preview the course and return to the Timeline block.
If you only want to change one timeline, use block scope. If you want the same treatment across multiple timelines, choose a broader scope intentionally and check each affected block.
Review the result at desktop and mobile sizes, then test a published output to confirm the change works where learners will see it.
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:
- 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
Custom CSS can be useful when you want to keep the existing Quote block and adjust its appearance. If you want to create a reusable quote layout with more design flexibility, building a template in Mighty Studio is another option.
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 containing the quote text and image. In the video, the relevant element is 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 into a circle, and remove the background quote mark.
ChatGPT responds with updated HTML and CSS. For this workflow, though, we need CSS that works with the existing HTML.
You can make that constraint clear from the start:
Please write CSS only, without changing the HTML. Move the quote text to the left and the image to the right, make the image circular, and remove the decorative background quote mark.
If ChatGPT still provides new HTML, remind it that the solution needs to work with Rise’s existing structure.
3. Test the CSS in the inspector stylesheet
Paste ChatGPT’s CSS into the inspector stylesheet.
For the quote layout, ChatGPT suggests reversing the flex direction so the image moves to the right and the quote text moves to the left.
It also suggests border-radius: 50% to make the image circular. This produces a circle when the image or its container is square; a rectangular shape will become an oval.
Check the image crop and the layout at smaller screen sizes, too. A treatment that looks good on desktop may need a different arrangement on mobile.
4. Clean up unnecessary CSS
ChatGPT also suggests height and width values for the image. In the video, those values don’t appear to affect the current view, so John removes them.
You don’t have to keep every line ChatGPT gives you. Temporarily disable a declaration using the checkbox beside it in Chrome’s Styles pane, then compare the result.
Before removing a rule, check other screen sizes and relevant states. A declaration that appears unnecessary in one view may still affect another.
5. Be ready to chase pseudo-elements
The background quote mark is trickier.
In the video, the generated CSS doesn’t remove it immediately. Inspect reveals that the quote mark comes from a ::before pseudo-element attached to the quote block figure.
Some visual details are created with ::before or ::after rather than appearing as regular HTML elements.
If ChatGPT’s first attempt misses something like this, use Inspect to identify where it comes from, then share that detail in your next prompt.
Once the result looks right, save the CSS in Mighty Custom Code with the appropriate scope. Check the affected blocks, mobile layouts, and published output.
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 useful prompt usually includes:
- “I have HTML from an existing Articulate Rise block.”
- “Please write CSS only.”
- “Do not change the HTML.”
- “Here is the visual change I want.”
- “Keep the layout responsive.”
- “Here is the HTML.”
Describe the intended scope, too. Are you changing one block or every block of that type?
Broad selectors can affect other elements with the same classes or structure. Choose the appropriate scope in Mighty and inspect the results rather than relying on the prompt alone. is worth including. Broad CSS can accidentally affect other Rise blocks that use similar classes or structures.
When to use Custom Code versus Studio#
Use Mighty Custom Code when an existing Rise block already does what you need, but you want a targeted adjustment beyond its native settings. Changing media order, spacing, or image treatment can be good examples.
Use Mighty Studio when you want to build a custom layout or interaction, create a reusable template, or make changes that would be easier to manage in the template itself.
If you’re refining a Studio template, start with its available editing controls or ask your AI tool to update it in Studio.
Coding for all#
You don’t have to become a developer to make thoughtful CSS adjustments in Rise. Check the native settings first. When you need more control, copy the relevant HTML, ask ChatGPT for CSS only, test it in Chrome, and save the working version in Mighty Custom Code.
Start with one small adjustment, choose the right scope, and check the result where your learners will experience it.