How to Run CSS Code in Visual Studio Code

CSS is a language used to control a web page’s formatting, presentation, and appearance. It significantly impacts user experience as it allows you to design everything from fonts, colors, and content layouts. This guide shows you how to write CSS and link it to HTML using Visual Studio Code.

Step 1: Install Live Server extension

Visual Studio Code has built-in support for writing HTML and CSS code, which means that you do not technically have to install any separate tool to write HTML and CSS code.

However, we recommend having one VS Code extension from the get-go, called Live Server. This extension allows you to run your HTML code as a web application on your localhost web server directly from your machine. It also reloads your page automatically every time you save the file, streamlining the coding process. Follow these steps to install Live Server:

1. Launch VS Code. From the sidebar, select Extensions. This opens an extensions panel.

   

2. Type “Live Server” in the search box and click on the Install button.

   

Step 2: Prepare your HTML and CSS files

To style a web page using CSS, you need an HTML file. The HTML file is necessary to provide structure and content to your web page. To create both HTML and CSS files, do the following:

1. First, we will create a new folder to store our HTML and CSS files. To do this, click Open folder on the left sidebar.

   

2. Create a folder in your preferred directory. I’m going to call it “Practice”.

   

3. You will see a project explorer view for your project on the left side, which shows files and folders for your project. Create an HTML program in this folder by pressing the New File button next to your folder heading. Name it index.html. I put .HTML at the end of the file name, which is the extension for HTML files.

   

4. Create an additional new file for the CSS program like you created above. Name it style.css. Note that I put .css at the end of the filename, the extension for CSS files.

   

Step 3: Add code to your HTML and CSS files

With both CSS and HTML files saved, we are now prepared to write and style a webpage.

Add code to your HTML file

First, write some basic HTML code inside the HTML file. In our case, we are writing an HTML code to print out the words “Welcome To CSS”.

Within the Head Tag, add this line of code.

<link rel='stylesheet' href='style.css'>

This code tells the browser to use style.css as our style sheet. It will link the HTML file with the CSS file. Note that I put the “style.css” file name inside the “href” attribute.

Add code to your CSS file

Open the CSS file and write some basic CSS code. In my case, I am changing the body color to red.

body{
background-color: red;
}

Save both HTML and CSS files by pressing CTRL + S.

Step 4: Run the CSS code

Now that we have both CSS and HTML files ready, we are prepared to run the program!

1. Press Go Live on the bottom right corner of the VS Code code editor.

   

2. When prompted with the “Network Access” message, click on Allow access.

   

3. The browser will open the webpage with the HTML structure and CSS styling.

   

   The above example shows how simple and smooth it is to style HTML using CSS in VS Code. Now, you’re ready to continue developing your CSS stylesheet!