Modifying CSS in Moodle editor the cheat way when creating content

Ever wished you could quickly tweak the look of a webpage without having to dive into the backend code? Good news — you can! There’s a super handy trick that lets you edit CSS directly in the browser, and the best part is, it's simple and doesn’t require any fancy developer tools or coding experience.

How to Quickly Edit CSS on a Moodle page component Without Touching the Code

Ever wished you could quickly tweak the look of a Moodle Page without having to dive into the backend code? Good news — you can! There’s a super handy trick that lets you edit CSS directly in the browser, and the best part is, it’s simple and doesn’t require any fancy developer tools or coding experience.

NOTE: This only works inside HTML editors that save back to the website.

Here’s how you can do it:

Step 1: Open Your Practice Page

Start by going to your profile in your practice course (or any page you’re working on).

Step 2: Find the Content You Want to Edit

Scroll down until you see the part of the page you’d like to change — for example, your name or a heading.

Step 3: Use the Inspect Tool

Right-click on the piece of content you want to edit and select Inspect from the menu. (This works in most modern browsers like Chrome, Edge, and Firefox.)

When you click Inspect, a panel will pop up — usually on the right-hand side. In that panel, you’ll see the HTML code for the page.

Step 4: Edit the Styles

Look for the section that says element style. This is where you can temporarily edit the CSS.

For example, if you right-clicked on your name (let’s say it’s under an <h3> heading), you can add new styles:

  • Click inside the element style section.
  • Type color: red; and hit Enter.

You’ll immediately see the text color change to red on the left side of the page!

Step 5: Save Your Changes

Once you’re happy with your edits, click Save and then Save and Display at the bottom of your page. This will save the changes you made — not just temporarily, but actually into the content.

Bonus: Add Even More Styling

Want to go further? Here’s another quick example:

  • Right-click on another heading or piece of content.
  • Click Inspect.
  • In element style, you can add more CSS, like:
    • background-color: blue;
    • color: white;
    • padding: 5px;

You can even use the color picker inside the Inspect panel to choose just the right color — either from a palette or by sampling colors from elsewhere on your page.

Final Result

With just a few quick edits, you can change colors, add padding, and generally style your page without touching the raw code. It’s a great way to make fast visual updates and experiment with design ideas.

Tip:
Remember, editing through Inspect is temporary until you save it through your platform (like in a practice course). If you just close the page without saving, your changes will disappear.

Pretty cool, right? Give it a try on your next project and start customizing your pages with ease!