# Basic CSS question

**URL:** <https://discourse.elm-lang.org/t/basic-css-question/4016>\
**Category:** Learn\
**Created:** [July 18, 2019, 1:42pm UTC](https://discourse.elm-lang.org/t/basic-css-question/4016 "2019-07-18T13:42:06Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mfilej](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mfilej/32/2357_2.png) [@mfilej](https://discourse.elm-lang.org/u/mfilej)\
**Post date:** [July 18, 2019, 1:42pm UTC](https://discourse.elm-lang.org/t/basic-css-question/4016/1 "2019-07-18T13:42:06Z")

</div>

Hi, I’m totally new to Elm and I’m enjoying it so far.

I’m trying to draw something with svg and I need to make `html` and `body` to fill up the entire window (`width: 100%; height: 100%;`).

From what I understood by searching the web it seems that Elm discourages external CSS files and instead suggests using inline styles? I’m willing to give it a try, but I can’t figure out how to apply an inline style to the `html` and `body` tags in this case, since they are already rendered by the time my code has any effect.

---

<div class="post-metadata">

**Author:** ![pdamoc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pdamoc/32/36_2.png) [@pdamoc](https://discourse.elm-lang.org/u/pdamoc)\
**Post date:** [July 18, 2019, 2:02pm UTC](https://discourse.elm-lang.org/t/basic-css-question/4016/2 "2019-07-18T14:02:43Z")

</div>

> [@mfilej](#):
>
> From what I understood by searching the web it seems that Elm discourages external CSS

Hi Miha and welcome to Elm.

Elm doesn’t discourage external CSS. I actually prefer this way of handling CSS. So, feel free to solve this using an external CSS.

For testing purposes you can also add an `Html.node "style"` element with the needed CSS.

Here is how:  
[https://ellie-app.com/67vmrPtcygwa1](https://ellie-app.com/67vmrPtcygwa1)

---

<div class="post-metadata">

**Author:** ![mfilej](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mfilej/32/2357_2.png) [@mfilej](https://discourse.elm-lang.org/u/mfilej)\
**Post date:** [July 18, 2019, 5:08pm UTC](https://discourse.elm-lang.org/t/basic-css-question/4016/3 "2019-07-18T17:08:28Z")

</div>

@pdamoc Thanks, that works a treat!

---

<div class="post-metadata">

**Author:** ![dwayne](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dwayne/32/5478_2.png) [@dwayne](https://discourse.elm-lang.org/u/dwayne)\
**Post date:** [July 18, 2019, 8:07pm UTC](https://discourse.elm-lang.org/t/basic-css-question/4016/4 "2019-07-18T20:07:10Z")

</div>

External CSS is fine and not discouraged at all.

To make `body` fill up the entire window you’d write the following CSS:

```css
body {
  margin: 0;
  height: 100vh;
}

```

By default `body` has margin so we remove it. Then, we make the height of the `body` equal to 100% the height of the viewport. Read about viewport-percentage lengths [here](https://developer.mozilla.org/en-US/docs/Web/CSS/length).

**N.B.** _You don’t need to set the width since it already expands to fill the width of the viewport._

For a concrete example, you can look at how it’s done in this [app](https://elm-school.github.io/pomodoro-clock/), [here](https://github.com/elm-school/pomodoro-clock/blob/ed770cff4967746e18e1980555fa58301b087c5f/assets/styles.css#L90-L91).

---

<div class="post-metadata">

**Author:** ![dwayne](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dwayne/32/5478_2.png) [@dwayne](https://discourse.elm-lang.org/u/dwayne)\
**Post date:** [July 18, 2019, 8:08pm UTC](https://discourse.elm-lang.org/t/basic-css-question/4016/5 "2019-07-18T20:08:53Z")

</div>

Oh and for inline styles you can use the existing [style](https://package.elm-lang.org/packages/elm/html/latest/Html-Attributes#style) attribute.

---

<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:** [July 28, 2019, 8:08pm UTC](https://discourse.elm-lang.org/t/basic-css-question/4016/6 "2019-07-28T20:08:55Z")

</div>

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