> For the complete documentation index, see [llms.txt](https://burkeholland.gitbook.io/vs-code-can-do-that/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://burkeholland.gitbook.io/vs-code-can-do-that/exercise-2-productivity-tricks/styling-with-emmet.md).

# Styling with Emmet

Emmet can also be used in CSS.

### Add a background image to the page

In the "index.html" page in the "start" project, add a `style` tag just below the `link` tag.

* Enter `style` and press `tab`

![](/files/-LlwotSMU6D2WMHgLOt7)

Inside the `style` tag, create a style for the main `html` element.

![](/files/-Llwp2VxYVpQGtY6Kgk9)

Add a background image and set it's properties...

* Enter `bgi` press `tab`
  * Set the url to "background.jpeg"
* Enter `bgr` press `tab`
  * Set the value to "no-repeat"
* Enter `bgs` press `tab`
  * Set the value to "cover"
* Set the `height` to 100%
  * Enter `h100p` press `tab`
* Set the `min-height` to 1400px
  * Enter `mh1400` press `tab`

![](/files/-LlwpnyMZlEfx-iwzIZa)

### Style the rest of the page

Add a style for the `body` element

* Set the "background-color" to "RGBA(255, 255, 255, 0.8)
  * Enter `bgc` press `tab`
* Set the `height` to 100%
  * Enter `h100p`

![](/files/-LlwqApcCLryC6lgrR5e)

Add a style for the `#app` ID

* Set the `max-width` to 800px
  * Enter `maw800` press tab