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.

    Extensions Pane
    Click on Extensions from the sidebar on the left side.

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

    Install Live Server
    Search for Live Server and then install it.

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.

    Open Folder
    Click on the Open folder button to start creating a folder.

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

    Choose your directory
    Choose your preferred directory for your folder.

  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.

    HTML New File
    Create an HTML file by clicking on the New File button.

  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.

    CSS New File
    Create a CSS file by clicking on the New File button.

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.

Write the basic HTML code in the code editor. Don’t forget to add the Link marker to link HTML with CSS.

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.

background-color: red;
CSS Code
Write basic CSS code to style the HTML file.

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.

    Go Live Server
    Click on the Go Live button on the bottom-right corner of the VS Code code editor.

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

    Firewall Prompt
    Click on Allow access.

  3. The browser will open the webpage with the HTML structure and CSS styling.
    This is the output of our HTML and CSS code!

    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!

Join the conversation

Leave a Comment