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 has a significant impact on 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.

Additional Tools Required

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. Live Server allows you to run your HTML code as a web application running on your localhost web server directly from your machine. It also reloads your page automatically every time you save the file. Do the following to install Live Server:

  1. 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.

Preparing the 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 HTML and CSS files, do the following:

  1. Create a folder to store your HTML and CSS files. Click Open folder.

    Open Folder
    Click on the Open folder button to start creating a folder.
  2. Create a folder in the 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”.

    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 the “index.css” file above. Name it “style.css”. I put .css at the end of the filename, which is the extension for CSS files.

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

Running CSS in VS Code

With both CSS and HTML files ready, now we are prepared to write and style a webpage. Do the following:

  1. First, write some basic HTML code inside the HTML file. In our case, we’re are writing an HTML code that will print out the words “Welcome To CSS.”
  2. 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.

    HTML Code
    Write the basic HTML code in the code editor. Don’t forget to add the Link marker to link HTML with CSS.
  3. Open the CSS file and write some basic CSS code. In our case, I am changing the body color to red.
    body{
    background-color: red;
    }

    CSS Code
    Write basic CSS code to style the HTML file.
  4. Save the files by pressing CTRL S.
  5. Now that we have both the files ready, we can run the program by pressing Go Live on the right corner of the code editor.

    Go Live Server
    Click on Go Live button on the bottom-right corner of the VS Code.
  6. When prompted with the “Network Access” message, click on Allow Access.

    Firewall Prompt
    Click on Allow Access to grant the access to VS Code.
  7. The browser will open the webpage with HTML structure and CSS styles.

    Webpage
    This is the output of our HTML and CSS code.

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

Was this article helpful?

1 thought on “How To Run CSS Code in Visual Studio Code”

Leave a Comment