VS Code Can Do That - Workshop

1.0.0

Introduction
Essential Keyboard Shortcuts
Exercise 1 - Customizing The Editor
Exercise 2 - Productivity Tricks
Exercise 3 - Navigation And Refactoring
Exercise 4 - Debugging
Exercise 5 - Docker
- Untitled

Powered by GitBook

On this page

Add a background image to the page
Style the rest of the page

Was this helpful?

Styling with Emmet

PreviousCreating HTML with Emmet NextUpdate image sizes

Last updated 5 years ago

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