OneBite.Dev - Coding blog in a bite size

link css to html in vscode

Code snippet for how to link css to html in vscode with sample and detail explanation

Linking CSS to HTML in Visual Studio Code is a fundamental skill for building visually appealing websites. This foundational method allows web developers to ensure their sites are not only functional, but also aesthetically pleasing.

Code Snippet: Linking CSS to HTML in Visual Studio Code

Let’s begin writing our basic HTML structure by creating an HTML file, let’s call it “index.html”. Here’s a glimpse of what your HTML structure might look like:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple website.</p>
</body>
</html>

Then, create a simple css file named “styles.css” in the same directory:

h1 {
    color: blue;
}

p {
    color: red;
}

In the HTML file, the <link> tag is used inside the <head> element. The “rel” attribute specifies the relationship between the HTML file and the linked file, the “type” attribute specifies the type of the linked file, and the “href” attribute specifies the URL of the linked file.

Code Explanation: Linking CSS to HTML in Visual Studio Code

The CSS file is linked to the HTML with the <link> HTML element in the <head> section. With <link rel="stylesheet" type="text/css" href="styles.css">, we’ve told the browser that there is a stylesheet it should refer to for stylistic instructions.

The rel attribute describes the relationship between the HTML file and the CSS file. In our case, “stylesheet” indicates that the linked file is a CSS file.

type attribute describes the MIME type of the linked document. Here, type="text/css" indicates that the linked file is a text file and the type of text file it is a CSS.

href is the attribute where we specify the path to the CSS file. It’s set to "styles.css" which means the CSS file is in the same directory as the HTML file. If your CSS file is located in a different folder, you would indicate the path to that folder here.

The CSS file “styles.css” contains styles for h1 and p elements. This will change the color of h1 to blue and p to red respectively.

By correctly linking your CSS file to your HTML file in Visual Studio Code, you are now equipped to further beautify your web pages and improve user experience.

css