` elements. We will add more detail to each screen later. Notice that each screen has `class='screen'` . This will allow us to easily change the style (CSS) of all three screens later in the same way. Also, notice that each screen has a unique `id` that will allow us to target each screen in a particular way later. **Copy the HTML code and paste it into a new *****index.html***** file, or use the CodePen version if you are starting with** [**CodePen's HTML**](https://codepen.io/pen/)**.** The browser page preview is not exciting, but it should contain text from all three screens. {% tabs %} {% tab title="HTML - complete index.html file" %} ```markup iDEW Trivia

Welcome screen.

Question screen.

Thank you screen.

``` {% endtab %} {% tab title="HTML - CodePen version with body only" %} ```markup

Welcome screen.

Question screen.

Thank you screen.

``` {% endtab %} {% endtabs %} > {% hint style="info" %} ### **This is single page web app.** What is a single page web app? Most traditional web sites are a collection of HTML files (pages) that link to each other. With a single page web app you will create a single HTML file that contain different views (we call them *screens* in our case) that you *hide* or *show* depending on the *state* of the app. For example, in the trivia game, you will *hide* the question and thank you screens at the beginning and *show* the welcome screen. When the visitor starts the game, you will *hide* the welcome screen and *show* the question screen, and so on. Don't worry if this isn't totally clear yet. It will make more sense when we get to the JavaScript programming part later. {% endhint %} ### CSS for the Body and Screens Let's add a little style to our screens next. In the code below notice how the `body` , which contains all contents of the page, is given a background color of "gray" and a margin of "0". This gives us a nice edge-to-edge background for placing our screen content. Next you will see several styles being applied to screens, since `.screen` affects all elements with that class. Notice how `background-color` uses `rgba( )` so that we can "see through" the screen a bit to the background. You will want this feature later. The rest of the styling has to do with sizing the screens and content in a way that fits nicely on any device, and you will probably want to leave these elements alone. **Copy the CSS code below into your *****style.css***** file and notice the change. You will need to scroll down in the live preview to see all the screens now.** {% code title="CSS" %} ```css body { margin: 0; background-color: gray; } .screen { background-color: rgba(255,255,255,.5); box-sizing: border-box; margin: 15px auto; padding: 15px; max-width: 700px; width: calc(100vw - 30px); height: calc(100vh - 30px); } ``` {% endcode %} ### **Save your Code before the next step!**