Example of using elm-css in style tag

Main.elm

module Main exposing (..)

import Css.File
import MyCss
import Html exposing (div, text, node)
import Html.Attributes exposing (id, class)


css =
    Css.File.compile [ MyCss.css ]


view =
    div []
        [ div [ class "NavBar" ] [ text "this has the NavBar class" ]
        , div [ id "Page" ] [ text "this has the Page id" ]
        , node "style" [] [ text css.css ]
        ]


main =
    Html.program
        { init = ( (), Cmd.none )
        , view = \_ -> view
        , update = \_ _ -> ( (), Cmd.none )
        , subscriptions = \_ -> Sub.none
        }

MyCss.elm

module MyCss exposing (..)

import Css exposing (..)
import Css.Elements exposing (body, li)
import Css.Namespace exposing (namespace)


type CssClasses
    = NavBar


type CssIds
    = Page


css =
    (stylesheet << namespace "dreamwriter")
        [ body
            [ overflowX auto
            , minWidth (px 1280)
            ]
        , (#) Page
            [ backgroundColor (rgb 200 128 64)
            , color (hex "CCFFFF")
            , width (pct 100)
            , height (pct 100)
            , boxSizing borderBox
            , padding (px 8)
            , margin zero
            ]
        , (.) NavBar
            [ margin zero
            , padding zero
            , children
                [ li
                    [ (display inlineBlock) |> important
                    , color primaryAccentColor
                    ]
                ]
            ]
        ]


primaryAccentColor =
    hex "ccffaa"