# Global styles

The first thing we will do is create global styles. These are styles that apply site-wide. They should be added to the root component of your theme.

We'll change the font to be sans-serif throughout our site. To do this let's import the `<Global>` component and the `css` function from Frontity into our root component file.

{% hint style="info" %}
`<Global>` and `css`, as well as `styled` which we will look at in the next lesson, are exported by the Emotion library. Frontity integrates Emotion so that you can import these from Frontity.
{% endhint %}

```jsx
// File: /packages/my-first-theme/src/components/index.js

// ...
import { connect, Global, css } from "frontity"

const Root = ({ state }) => {
  const data = state.source.get(state.router.link)

  return (
    <>
      <Global
        styles={css`
          html {
            font-family: system-ui, Verdana, Arial, sans-serif;
          }
        `}
      />
      {/* ... */}
    </>
  )
}
```

The `<Global>` component has an attribute, `styles`, which in turn takes a `css` function as it's value.

The `css` function takes as it's argument a [tagged template literal](https://wesbos.com/tagged-template-literals), which in this case consists of a string of standard CSS contained within backticks. You can put any CSS here that you want to be applied site wide.

When you save the file you should notice that the fonts on your site have now changed automatically to be sans-serif.

Next we'll look at the power and flexibility that styled components give us.

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/6ae98d9e25dbb706b9dff447955a3379ed1d17d0).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tutorial.frontity.org/part4-adding-styling/global-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.