VS Code Can Do That - Workshop
Main
Main
  • VS Code Can Do That Workshop
  • Essential Keyboard Shortcuts
  • Exercise 1 - Customizing The Editor
    • Customizing The Editor
    • Switch themes
    • Install a new icon theme
    • Switch fonts
    • Editor tweaks
    • Change default Settings view
    • Easily identify editor instances
  • Exercise 2 - Productivity Tricks
    • Productivity Tricks
    • Essential navigation shortcuts
    • Creating HTML with Emmet
    • Styling with Emmet
    • Update image sizes
  • Exercise 3 - Navigation And Refactoring
    • Navigation And Refactoring
    • Moving, Duplicating and Deleting
    • Folding sections
    • Multiple cursors
    • Rename refactor
    • Finding things
    • Extract refactor
  • Exercise 4 - Debugging
    • Debugging
    • Simple debugging
    • Simple launch config
    • Auto attach
    • Debugging browser apps
    • Compound debug configurations
  • Exercise 5 - Docker
    • Docker
    • Dockerizing an application
    • Running and inspecting images
    • Docker compose
    • Debugging Docker containers
  • Exercise 6 - Remote Development
    • Remote Development
    • Create a remote container
    • Create a new function in the container
    • Handling extensions
  • Exercise 7 - Working With Data
    • Working with data
    • Working with MongoDB
    • Working with SQLite
    • Working with MySQL
  • Exercise 8 - Git and Source Control
    • Git and source control
    • Cloning repos with VS Code
    • Common Git workflows
    • Branching and merge conflicts
Powered by GitBook
On this page
  • Add a background image to the page
  • Style the rest of the page

Was this helpful?

  1. Exercise 2 - Productivity Tricks

Styling with Emmet

PreviousCreating HTML with EmmetNextUpdate image sizes

Last updated 5 years ago

Was this helpful?

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

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

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

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

Add a style for the #app ID

  • Set the max-width to 800px

    • Enter maw800 press tab