> For the complete documentation index, see [llms.txt](https://docs.idew.org/code-trivia-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.idew.org/code-trivia-app/more/code-mod-examples/style-changes-with-css.md).

# Style Changes with CSS

Below are some basic style changes you could use to update the look of the trivia app. With CSS, the possibilities are nearly endless. Just look at this [CSS reference at w3schools](https://www.w3schools.com/cssref/default.asp). It is easy to just try things out by trial and error. Most styles have several options to consider. So, as needed, do a Google search for "CSS" followed by a simple description of a style you are interested in, and you will likely find some answers.

### Backgrounds

In your *style.css* file try changing or adding the following [background properties](https://www.w3schools.com/cssref/css3_pr_background.asp) to different elements in your trivia game,--like the `body`, `.screen`, or `button` CSS selectors to see the result.

```css
background: rgba(255,100,100);
```

Notice that there are [**many ways to define colors**](https://www.w3schools.com/css/css_colors.asp).

```css
background: linear-gradient(red, yellow);
```

```css
/* You need an image file in your folder for this one */
background: url("paper.gif");
```

### Borders and Shadows

```css
border: 1px solid rgb(50,50,50);
```

```css
border-radius: 10px;
```

```css
box-shadow: 3px 3px 7px red;
```

### Fonts and Text

```css
font-family: "Times New Roman", Times, serif;
font-size: 32px;
color: blue;
text-align: right;
```

Want to get a unique font? Try [**Google Fonts**](https://fonts.google.com/). Hint: If you find a font you like, click the "+" for the font family then click the "family selected" bar at the bottom of the page to see instructions.