# How to Style my Elm application? (Beginner)

**URL:** <https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437>\
**Category:** Learn\
**Created:** [November 4, 2023, 7:26pm UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437 "2023-11-04T19:26:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nikita0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nikita0x/32/5056_2.png) [@Nikita0x](https://discourse.elm-lang.org/u/Nikita0x)\
**Post date:** [November 4, 2023, 7:26pm UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437/1 "2023-11-04T19:26:30Z")

</div>

Hi everbody. I have discovered Elm just recently and wanted to pick it up as my first functional programming language ( I am a junior front end react developer).

How do I do CSS styling of my simple Elm application?

---

<div class="post-metadata">

**Author:** ![novid](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/novid/32/4341_2.png) [@novid](https://discourse.elm-lang.org/u/novid)\
**Post date:** [November 4, 2023, 8:38pm UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437/2 "2023-11-04T20:38:36Z")

</div>

Welcome to the community! There are many ways to style your Elm application. Here’s my list in order of complexity:

- [elm/html](https://package.elm-lang.org/packages/elm/html/latest/): for inline and external styles
- [rtfeldman/elm-css](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/): for defining CSS in Elm
- [mdgriffith/elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/): a new language for layout and interface

There’s also numerous third-party [packages](https://package.elm-lang.org/) available at the time but the above list is my go-to reference on the sibject.

---

<div class="post-metadata">

**Author:** ![Nikita0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nikita0x/32/5056_2.png) [@Nikita0x](https://discourse.elm-lang.org/u/Nikita0x)\
**Post date:** [November 4, 2023, 9:20pm UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437/3 "2023-11-04T21:20:55Z")

</div>

Thank you for your reply, novid.  
But I am still struggling with the styles, specifically rtfeldman/elm-css package.  
I tried to import it as a module and tried to apply it to style attribute, but there was a type mismatch - it expected a String and I was giving it a Style…

[https://ellie-app.com/ppq4FWh8HJNa1](https://ellie-app.com/ppq4FWh8HJNa1) - here is my project with the elm-css package installed. Can you please, give me a simple example on how to use it?

---

<div class="post-metadata">

**Author:** ![novid](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/novid/32/4341_2.png) [@novid](https://discourse.elm-lang.org/u/novid)\
**Post date:** [November 4, 2023, 9:28pm UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437/4 "2023-11-04T21:28:36Z")

</div>

Have a look at [examples directory of elm-css’s github repository](https://github.com/rtfeldman/elm-css/tree/18.0.0/examples).

---

<div class="post-metadata">

**Author:** ![wolfadex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wolfadex/32/2461_2.png) [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [November 4, 2023, 10:10pm UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437/5 "2023-11-04T22:10:05Z")

</div>

Here’s your Ellie, but modified to use elm-css [https://ellie-app.com/ppqPgDGgF4Wa1](https://ellie-app.com/ppqPgDGgF4Wa1).

Also, I’d recommend switching from rtfeldmand/elm-css to [dzuk-mutant/elm-css](https://package.elm-lang.org/packages/dzuk-mutant/elm-css/latest/) as it’s a more recent fork of rtfeldman/elm-css that’s being maintained. Richard Feldmand spoke on a podcast some months ago about it being a better alternative than his package as well.

---

<div class="post-metadata">

**Author:** ![Nikita0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nikita0x/32/5056_2.png) [@Nikita0x](https://discourse.elm-lang.org/u/Nikita0x)\
**Post date:** [November 5, 2023, 7:54am UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437/6 "2023-11-05T07:54:11Z")

</div>

Thank you very much wolfadex for your recommendation and your example of how to you use. I wouldn’t have asked it in the firstplace if I understood the examples given in the package, but those were not clear to me.  
Thank you!

---

<div class="post-metadata">

**Author:** ![wolfadex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wolfadex/32/2461_2.png) [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [November 5, 2023, 2:27pm UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437/7 "2023-11-05T14:27:19Z")

</div>

Of course, happy to help!

A couple of notes for differences:

You can expose multiple things from an import, so

```elm
import Html.Events exposing (onClick)
import Html.Events exposing (onInput)

```

can be simplified to

```elm
import Html.Events exposing (onClick, onInput)

```

The modules `Html` and `Html.Styled` both have a type named `Html`. This can be confusing if you’re using the two, which is why I used fully qualified names in the Ellie.

There’s also a button on the top middle of Ellie to run elm-format on your code, that can be super helpful.

Enjoy the coding 😄

---

<div class="post-metadata">

**Author:** ![dirkbj](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dirkbj/32/3162_2.png) [@dirkbj](https://discourse.elm-lang.org/u/dirkbj)\
**Post date:** [November 7, 2023, 9:22pm UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437/8 "2023-11-07T21:22:24Z")

</div>

Once you get your head around elm-css (its always good to learn the basics before building on top of them), I would recommend using the [tailwind css framework](https://tailwindcss.com/) along with the [elm-tailwind-default-modules](https://package.elm-lang.org/packages/matheus23/elm-default-tailwind-modules/latest/) package.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [November 17, 2023, 9:22pm UTC](https://discourse.elm-lang.org/t/how-to-style-my-elm-application-beginner/9437/9 "2023-11-17T21:22:40Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.