# Example 1.2.3 CSS ([Graph](https://nodysseus.ulysses.codes/#example_1_2_3))
Using css and class assignment to add some style to the html output.

<div align="center">
    <img src="https://gitlab.com/ulysses.codes/nodysseus/-/raw/main/docs/examples/images/1_2_3_graph.png" title="Example 1.2.3 CSS" />
</div>


## Graph breakdown

1. Nodysseus takes the `display` input to the last node and uses hyperapp to create HTML elements. The `html_element` and `html_text` nodes set up the HTML content for styling ([Example 1.2.2](https://gitlab.com/ulysses.codes/nodysseus/-/blob/main/docs/examples/1_2_2_html_children.md))
2. The `props` input to the `span` node sets attributes on the `span` HTML element using [hyperapp props syntax](https://github.com/jorgebucaran/hyperapp/blob/main/docs/api/h.md#props)
3. `css_styles` constructs a `style` element using the input `css_object`.
4. `css_object` is created using nodes without references or values (`object` nodes). These nodes simply create an object using the input labels as keys and the data as values.
5. `.name` is the [css selector](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector)
6. `font-style` and `font-weight` are css [properties](https://developer.mozilla.org/en-US/docs/Glossary/property/CSS)
7. `italic` and `bold` are css [values](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#what_is_a_css_value)