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. 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 to different elements in your trivia game,--like the body, .screen, or button CSS selectors to see the result.

background: rgba(255,100,100);

Notice that there are many ways to define colors.

background: linear-gradient(red, yellow);

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

Borders and Shadows

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

border-radius: 10px;

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

Fonts and Text

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

Want to get a unique font? Try Google Fonts. 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.