CSS Practice Tools: VS Code and Live Server

What Is It?

Use VS Code to edit your HTML and CSS files, and Live Server to preview saved changes in a browser. This lesson takes you from an empty folder to a working local page and a separate stylesheet.

Properties, Tags and Attributes Explained

• VS Code: A code editor for creating files and editing HTML and CSS.
• Live Server: A VS Code extension by Ritwick Dey that serves your practice folder locally and reloads the browser after saved changes.
• index.html: The HTML entry page you open with Live Server.
• styles.css: A separate CSS file loaded by the HTML page.
• link / rel / href: The HTML link element uses rel="stylesheet" to identify CSS and href="styles.css" to locate the file.
• color / background-color / padding: CSS properties that change text color, background fill, and space inside an element.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Step 1: Install and Open VS Code

1. Download Visual Studio Code from the official VS Code website.
2. Run the installer for your operating system and complete the setup. On macOS, move the app into Applications when prompted.
3. Open VS Code. You will use its Explorer to manage files and its editor area to write code.

Step 2: Open a Practice Folder

1. Create a folder on your computer named web-practice.
2. In VS Code, choose File > Open Folder, select web-practice, and open it. On macOS, File > Open can also open a folder.
3. If Workspace Trust asks, trust the folder only when it contains your own practice files or code you trust.
4. Open the Explorer from the left sidebar. Create a file named index.html using its New File button.
5. Copy the complete HTML from Example 1 below into index.html.
6. Save with Ctrl+S on Windows/Linux or Cmd+S on macOS. Check that the filename ends in .html, rather than .html.txt.

Your starting folder should look like this:

web-practice/
  index.html

Step 3: Install the Live Server Extension

1. Open Extensions in the left sidebar. The shortcut is Ctrl+Shift+X on Windows/Linux or Cmd+Shift+X on macOS.
2. Search for Live Server.
3. Select Live Server by Ritwick Dey. Its extension ID is ritwickdey.LiveServer; check this so you install the intended extension.
4. Choose Install. If VS Code requests a reload, complete it before continuing.

Live Server runs a local web server and reloads the browser after you save supported project files. It previews files on your computer; it does not publish your website to the internet.

Step 4: Open Your Page with Live Server

1. Keep the web-practice folder open in VS Code.
2. In Explorer, right-click index.html and choose Open with Live Server. You can also open that file and choose Go Live in the status bar.
3. Your browser should open a local HTTP address, for example http://127.0.0.1:5500/index.html. Use the actual address Live Server opens; the port can differ.
4. Check that the heading and paragraph from Example 1 appear.
5. Keep both the editor and browser open side by side so you can compare your code with its result.

Step 5: Edit, Save and See the Change

1. In index.html, change the text inside the main heading.
2. Save the file with Ctrl+S or Cmd+S.
3. Return to the browser tab opened by Live Server. The updated heading should appear automatically.
4. Change another line, save again, and repeat. For CSS practice, change a rule in the HTML style element or linked stylesheet, then save that file too.

The practice loop is edit → save → inspect the browser. Editing browser DevTools is useful for experiments, but those edits do not normally update your saved source files.

Step 6: Stop and Restart the Server

1. Open the Command Palette with Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS.
2. Run Live Server: Stop Live Server when you finish.
3. To continue later, reopen your practice folder and use Open with Live Server on index.html again.

If Something Does Not Work

• No Go Live button: confirm that the extension is installed and enabled, open the practice folder, then right-click index.html. You can also run Live Server: Open with Live Server from the Command Palette.
• A directory listing opens: select index.html, or start the server by right-clicking that file instead of the folder.
• Changes do not appear: save the file, make sure the browser is showing the local HTTP page from the same folder, and refresh once. Restart Live Server if needed.
• A stylesheet does not load: save both files, check the spelling and letter case of styles.css, and check that its href matches the file location.
• The browser does not open automatically: use the local address shown by Live Server. Check VS Code notifications if the server fails to start.

The lesson's Try in new tab button is a separate built-in editor. It works without installing VS Code or Live Server. Use Live Server when practicing with files saved on your own computer.

Official help: VS Code getting started and Live Server extension instructions.

Example 1: Your first local CSS page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Practice Tools: VS Code and Live Server</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    h1 { color: #1d4ed8; }
    p { background-color: #dbeafe; padding: 16px; }
  </style>
</head>
<body>
  <h1>My CSS practice page</h1><p>I can edit, save, and preview CSS.</p>
</body>
</html>

What you see: The heading is blue and the paragraph has a pale blue background. Copy this complete page into index.html for the setup steps above.

Example 2: Change CSS and save

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Practice Tools: VS Code and Live Server</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    h1 { color: #15803d; }
    p { background-color: #dcfce7; padding: 24px; }
  </style>
</head>
<body>
  <h1>My CSS practice page</h1><p>I changed the colors and spacing.</p>
</body>
</html>

What you see: The heading is now green and the paragraph has more padding. Make these same changes locally, save the file, and check the Live Server browser tab.

Step 7: Move CSS into a Separate Stylesheet

1. In the same VS Code folder, create a file named styles.css.
2. Copy only the CSS rules from Example 1 into that file. Do not copy the opening or closing style tags.
3. In index.html, remove the entire style element, including those tags and the copied rules.
4. Inside the HTML head, add <link rel="stylesheet" href="styles.css">. Keep the title and meta elements.
5. Save both index.html and styles.css. The page should still look like Example 1 because the same rules now load from a different file.
6. Change color: #1d4ed8 to color: #15803d in styles.css, save, and check the heading in the Live Server tab.

Your files now look like this:

web-practice/
  index.html
  styles.css

If the stylesheet is inside a folder named css instead, use href="css/styles.css". The path is relative to the HTML page. The in-page previews bundle the styles into one document for convenience; the local setup above uses two real files.

When and Where to Use It

Use VS Code and Live Server when learning with real files, linking a separate stylesheet, or practicing a multi-page static site. The built-in playground is useful for a quick experiment.

Common Mistake or Useful Tip

Start Live Server from index.html, not styles.css. A browser renders the HTML page, which then loads the linked stylesheet. Save both files after moving CSS into styles.css.

Try It Yourself

Create the practice folder, run Example 1 locally, then move its rules into styles.css using the steps below. Change the heading color and paragraph padding, save, and confirm that both changes appear.