# CSS total beginner's guide?

**URL:** <https://narrat.discourse.group/t/css-total-beginners-guide/465>\
**Category:** Help\
**Created:** [1 June 2026 14:09 UTC](https://narrat.discourse.group/t/css-total-beginners-guide/465 "2026-06-01T14:09:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zulu](https://yyz2.discourse-cdn.com/free1/user_avatar/narrat.discourse.group/zulu/32/560_2.png) [@Zulu](https://narrat.discourse.group/u/Zulu)\
**Post date:** [1 June 2026 14:09 UTC](https://narrat.discourse.group/t/css-total-beginners-guide/465/1 "2026-06-01T14:09:06Z")

</div>

Hey y’all, I’m completely new to game development - the only coding I’ve ever done was fake error messages on Windows 7 with .bat files. Overall, I think I understand Narrat and how it works, but I have no idea how to use CSS with it. For example, how can I make the dialogue window a different color, or slightly transparent? How can I edit the menu screen, or the buttons in-game? Is there a guide, tips, or any projects I can download to check how they did it?

Thanks!

P.S.: since I aim to have buttons on the viewport, how do you know where they will go? Do you place a button at, for example, x200 y200, see where it ended up, then change it?

---

<div class="post-metadata">

**Author:** ![Twobirds](https://avatars.discourse-cdn.com/v4/letter/t/d26b3c/32.png) [@Twobirds](https://narrat.discourse.group/u/Twobirds)\
**Post date:** [7 June 2026 00:52 UTC](https://narrat.discourse.group/t/css-total-beginners-guide/465/2 "2026-06-07T00:52:21Z")

</div>

I used the below tutorial, it was pretty good. Generally, you’ll also need to have some sense of how HTML works as well. But generally, you don’t need the extra fancy CSS stuff, just the selective formatting. Yes, I do a lot of iterating in my placement. A proper pixel position is one thing, getting it to look good is another. 🙂

> **[CSS styling basics - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)**
>
> CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides all...