> For the complete documentation index, see [llms.txt](https://docs.idew.org/code-internet-of-things/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-internet-of-things/tutorials/create-smart-light/3.8-web-app-css.md). # C-8 Web App CSS Next, you'll add the CSS for your web app's stylesheet. ## Add CSS Copy this CSS, and paste it into a **blank** CSS file named `style.css`: ```css body { font-family: Helvetica, Arial, sans-serif; font-size: 1em; text-align: center; } .card { width: 250px; height: 200px; margin: 0 auto 20px; padding: 10px; background-color: #ccc; /* gray */ border: 2px solid #aaa; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0,0,0,0.2); } .light-on { background-color: #ffff99; /* yellow */ } button { width: 100px; padding: 10px; font-size: 1em; color: #444; background-color: white; border-radius: 10px; } ``` As you can see, this CSS has style declarations for 4 types of elements in your HTML: 1. The CSS for `body` styles the `` section in your HTML. 2. The CSS for `.card` styles elements in your HTML that have `class="card"`. The `
` element has this class. 3. The CSS for `.light-on` styles any elements in your HTML that have `class="light-on"`. Currently, **no** elements have this class. However, your web app JS will add this class to the `
` element if your light is turned on (changing the card's background color to yellow) and will remove this class if your light is turned off (changing the card's background color back to gray). 4. The CSS for `button` styles the `